08表单标签 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <!--解决乱码 ，告诉浏览器文档类型和编码
  5 http-equiv:描述当前网页内容类型
  6 context：使用的是html的文本
  7 charset：使用的编码是UTF-8,解码也使用UTF-8
  8 -->
  9 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
 10 <title>Insert title here</title>
 11 </head>
 12 <body>
 13     <!-- 
 14       form表单标签：要提交的内容，使用该标签包裹
 15            action属性:决定表单提交到哪里
 16            method属性：决定表单的提交方式get/post get(默认值)/post
 17            post和get区别：
 18              1.post提交 (http 请求正文中)键值对没有在地址栏上，而get是放在地址栏上
 19              2.安全性上post更高一些
 20              3.长度上：get因为是放到地址栏中，长度受限,2K.  post 理论上是无限的
 21       
 22       input标签：表单项标签
 23          type类型:
 24              text  文本框
 25              password 密码框
 26              radio 单选框
 27              file 文件上传
 28              hidden 隐藏域
 29              submit 提交
 30              reset 重置
 31              image 提交(图片) 
 32              button 按钮
 33           name属性：
 34                    对于表单项：提交时键值对的键
 35           value属性：
 36                    1.对于需要提交的表单项：提交的值
 37                    2.按钮类型的：按钮上显示的文字
 38            readonly属性：
 39                        只读属性,只是限制value属性的变化.
 40                        只能给text和password textarea使用
 41            disabled属性：
 42                                                        禁用的效果：颜色变化，不参与提交
 43                                                        适用范围：所有input标签
 44            checked属性:
 45                        默认被选中.
 46                        只适用于： 1 radio 2 checkbox
 47            maxlength属性：定义最大长度              
 48            size属性：定义输入框显示长度
 49                 以上连个属性只能放在text和password中
 50                 
 51            select标签:
 52                                     下拉选
 53                 name属性：提交的键
 54                 size属性：同时显示的选项个数
 55                 multiple属性:多选
 56                      selected属性：让option默认被选中      
 57              textarea标签：
 58                                          文本域
 59                       name属性：提交的键
 60                       col属性：列宽
 61                       row属性：行高
 62                       readonly属性：只读
 63                         
 64      -->
 65     <form action="#" method="post">
 66         <table border="1">
 67             <tr>
 68                 <th colspan="3">用户注册</th>
 69             </tr>
 70             <tr>
 71                 <td>用户名：</td>
 72                 <td><input type="text" name="name" value="123"  maxlength="5"/></td>
 73             </tr>
 74             <tr>
 75                 <td>密码:</td>
 76                 <td><input type="password" name="pwd" disabled /></td>
 77             </tr>
 78             <tr>
 79                 <td>性别:</td>
 80                 <td>
 81                 女<input type="radio" name="sex" value="0" />
 82                 男<input type="radio" name="sex" value="1" checked/>
 83                 </td>
 84             </tr>
 85             <tr>
 86                 <td>爱好</td>
 87                 <td>
 88                 抽烟<input type="checkbox" name="habit" vlaue="smoke" />
 89                  喝酒<inputtype="checkbox" name="habit" vlaue="drink" />
 90                  </td>
 91             </tr>
 92             <tr>
 93                 <td>学历：</td>
 94                 <td>
 95                 <select name="edu" size="10">
 96                         <option value="00">请选择学历</option>
 97                         <option value="01">高中</option>
 98                         <option value="02">大专</option>
 99                         <option value="03">大本</option>
100                         <option value="04">硕士</option>
101                 </select>
102                 </td>
103             </tr>
104             <tr>
105                 <td>上传照片:</td>
106                 <td><input type="file" name="photo" /></td>
107             </tr>
108             <tr>
109                 <td>个人描述:</td>
110                 <td><textarea name="desc" cols="50" rows="10">这家伙很懒</textarea></td>
111             </tr>
112             <tr>
113                 <td>隐藏域：</td>
114                 <td><input type="hidden" name="secret" value="张三" /></td>
115             </tr>
116             <tr>
117                 <td>其他：</td>
118                 <td><input type="image" /></td>
119             </tr>
120             <tr>
121                 <td colspan="2" align="center"><input type="submit" value="提交" /><input
122                     type="reset" /></td>
123             </tr>
124 
125         </table>
126     </form>
127 </body>
128 </html>

 

posted @ 2016-02-20 02:12  男儿当自强！  阅读(119)  评论(0)    收藏  举报