码迷,mamicode.com
首页 > 其他好文 > 详细

表单标签

时间:2017-02-19 12:41:32      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:文字   doctype   定义   set   info   key   tle   android   checked   

 


作用: 提交数据到服务器端


表单的属性

form定义表单的范围<form action="#" method="get"> …….</form>

action : 指定提交的服务器的地址

method: 指定表单提交数据的方式

文本框: <input type="text" name="userName">

密码框: <input type="password" name="password">

单选项: <input type="radio" name="sex" value="1" >, 需要添加name属性和value属性 ,默认选中要设置为: checked="checked"

文件框: <input type="file" >

文本域: <textarea cols="" rows="" name="userInfo"></textarea>

提交按钮: <input type="submit" value="显示的文字"/>

图片提交: <input type="image" src="图片的路径" />

重置按钮: <input type="reset" value="显示的文字"/>

普通按钮: <input type="button" value="显示的文字"/> (通常和js配合使用)

隐藏项: <input type="hidden" name="id" value="123">

下拉输入项:

<select name="stu">

<option>--请选择--</option>

<option value="1">高中</option>

<option value="2">大学</option>

</select><br/>

 


表单的提交方式:

get: 提交的时候把请求参数直接拼接到url后面 , 不安全 , 对请求参数的数据大小有限制,不能超过1k

post: 提交的时候请求参数没有在url后面 , 安全 ;

 


案例:

 

<!DOCTYPE html>

<html>

<head>

<title>表单.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>

       <form action="#" method="get" >

       <table border="1" width="300" cellspacing="0" align = "center">

       <tr>

           <td align="right"><b>用户名:</b></td>

           <td align="left"><input type="text" size="30"></td>         

       </tr>

       <tr>

           <td align="right"><b>密 码:</b></td>

           <td align="left"><input type="password" size="31"></td>        

       </tr>

       <tr>

           <td align="right"><b>性 别:</b></td>

           <td align="left">

<input type="radio" name="sex" value="female" checked="checked" >男

<input type="radio" name="sex" value="male">女

</td>             

       </tr>

<tr>

           <td align="right"><b>爱 好:</b></td>

           <td align="left">

           <input type="checkbox" name="habbit" value="Java">Java

           <input type="checkbox" name="habbit" value="Android">Android

           <input type="checkbox" name="habbit" value="IOS">IOS

           <input type="checkbox" name="habbit" value="PHP">PHP

           </td>             

       </tr>

       <tr>

           <td align="right"><b>学 历:</b></td>

           <td 

              align="left"><select name="edu">

                  

                  <option value="" >请选择</option>

                  <option value="zk" >专科</option>

                  <option value="bk" >本科</option>

                  <option value="ss" >硕士</option>

              </select>

           </td>                       

       </tr>

       <tr>

           <td align="right"><b>近 照:</b></td>

           <td align="left"><input type="file" name="file"></td>          

       </tr>  

       <tr>

           <td align="right"><b>备 注:</b></td>

           <td 

              align="left"><textarea rows="10" cols="20" name="desc" >这家伙很懒!神马也没留下!</textarea>

           </td>         

       </tr>  

       <tr>

           <td align="center" colspan = "2">

<input type="submit" value="提交"/>

<input type="reset" value="重置"/>

</td>                

       </tr>  

       </table>

       </form>

</body>

</html>

 

表单标签

标签:文字   doctype   定义   set   info   key   tle   android   checked   

原文地址:http://www.cnblogs.com/loaderman/p/6414907.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!