[HTML]表单控件、iframe、datails、meter、time、fieldset、mark

HTML表单与H5元素详解

最新推荐文章于 2022-06-09 13:43:16 发布

转载最新推荐文章于 2022-06-09 13:43:16 发布 · 174 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/enginex/p/6806667.html

本文详细介绍了HTML表单的各种元素及其属性，包括文本框、密码框、单选按钮、复选框等，并展示了如何创建复杂的表单实例。此外，还探讨了H5新增的元素如浮动框架、摘要与细节、度量元素等。

一、表单元素

1.input：空标记

属性：

type:文本框、密码框、单选按钮、复选框

value:当前表单元素的值，可以是提交给服务器的值，也可以是默认显示的初始值

name:名称，要提交给server使用

id:唯一标识，只能在当前页面使用，server不能用

disabled:禁用控件

文本框：<input type="text" />

密码框：<input type="password" />

通用属性：name,id,value，maxlength,readonly

单选按钮：<input type="radio" />

属性：name：定义名称、分组

value：值

checked：默认被选中的

复选框：<input type="checkbox" />

属性：name：定义名称、分组

按钮：

1.提交按钮：<inputtype="submit"value="提交"/>

2.重置按钮：<inputtype="reset"value="重置"/>

3.普通按钮：<inputtype="button"value="按钮上的文字"/>

文件选择框：<input type="file" />

注：如果有文件上传，须将enctype改为multipart/form-data，method改为post

隐藏域：<input type="hidden" name="" value="" />

使用场合：在页面中看不到，一般会配合后台开发一起使用

2.下拉框：

</select>

属性：

1.name：定义名称，传给服务器

2.size:大于1，为滚动列表，代表行数

3.multiple:设置多选

属性：

1.value:选项的值

2.selected:预先选中的值

3.多行文本域：<textarea></textarea>

属性：

1.name:名称

2.cols:指定文本域的列数，表示宽度

3.rows:指定文本域的行数，表示高度

4.readonly

4.<label>标签，关联文本与表单元素

语法：<label>文本</label>

属性：

for:表示与该元素相关联的控件ID

显式的联系：
<labelfor="SSN">Social Security Number:</label>
<inputtype="text"name="SocSecNum"id="SSN"/>
隐式的联系：
<label>Date of Birth: <inputtype="text"name="DofB"/></label>

表单案例：

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>复杂表单</title>
 6     </head>
 7     <body>
 8         <h1>修改个人信息</h1>
 9         <table border="1px" cellspacing="0" width="400px">
10             <form>
11                 <tr>
12                     <td>姓名：</td>
13                     <td>
14                         <input type="text" name="uName" value="mary"/>
15                     </td>
16                 </tr>
17                 <tr>
18                     <td>性别：</td>
19                     <td>
20                         <input type="radio" id="female" name="gender" value="female" checked /><label for="female">女士</label>
21                         <input type="radio" id="male" name="gender" value="male" /><label for="male">男士</label>
22                     </td>
23                 </tr>
24                 <tr>
25                     <td>学历：</td>
26                     <td>
27                         <select name="education">
28                             <option value="高中">高中</option>
29                             <option value="本科">本科</option>
30                             <option value="硕士">硕士</option>
31                             <option value="其他" selected>其他</option>
32                         </select>
33                     </td>
34                 </tr>
35                 <tr>
36                     <td>意向工作城市：</td>
37                     <td>
38                         <select name="city" size="5" multiple>
39                             <option value="BJ">北京</option>
40                             <option value="SH">上海</option>
41                             <option value="GZ">广州</option>
42                             <option value="SZ">深圳</option>
43                         </select>
44                     </td>
45                 </tr>
46                 <tr>
47                     <td>个人描述：</td>
48                     <td>
49                         <textarea rows="4"></textarea>
50                     </td>
51                 </tr>
52                 <tr>
53                     <td></td>
54                     <td>
55                         <input type="checkbox" />不要公共我的个人信息
56                     </td>
57                 </tr>
58                 <tr>
59                     <td></td>
60                     <td>
61                         <input type="submit" value="保存" />
62                         <input type="reset" value="重填" />
63                     </td>
64                 </tr>
65             </form>
66         </table>
67     </body>
68 </html>