第 10章表单元素[上]

短命女 2022-05-25 00:21 157阅读 0赞

摘要：  
1.表单元素总汇  
2.表单元素解析  
本章主要探讨 HTML5中表单元素，表单元素用于获取用户的输入数据。

**一．表单元素总汇**  
在 HTML5的表单中，提供了各种可供用户输入的表单控件。  
![这里写图片描述][70]

**二．表单元素解析**  
1.<form>定义表单，本身具有提交功能  
<form method=”post” action=”http://www.haosou.com/”>

</form>

解释：<form>元素主要是定义本身是一组表单。

![这里写图片描述][70 1]

//使用 get提交数据  
method=”get”  
//丧失自动提示功能  
autocomplete=”off”  
//使用\_blank新建目标  
target=”\_blank”  
2.<input>表示用户输入数据  
<input name=”user”>

解释：<input>元素默认情况会出现一个单行文本框，有五个属性。  
![这里写图片描述][70 2]

//聚焦光标  
<input name=”user” autofocus>  
//禁用 input  
<input name=”user” disabled>

//禁止自动完成  
<input name=”user” autocomplete=”off”>  
//表单外的 input  
<form method=”get” id=”register”>  
…  
</form>  
<input name=”email” form=”register”>  
3.<label>添加说明标签

<p><label>用户名：<input id=”user” name=”user”></label></p>  
<p><label for=”user”></label> 用户名：<input id=”user” name=”user”></p>  
解释：<label>元素可以关联 input，让用户体验更好。且更加容易设置 CSS样式。  
4.<fieldset>对表单进行编组  
<fieldset>…</fieldset>

解释：<fieldset>元素可以将一些表单元素组织在一起，形成一个整体。

![这里写图片描述][70 3]

5.<legend>添加分组说明标签  
<fieldset>  
<legend>注册表单</legend>  
</fieldset>  
解释：<legend>元素给分组加上一个标题。  
6.<button>添加按钮  
<button type=”submit”></button>

解释：<button>元素添加一个按钮，type属性有如下几个值：

![这里写图片描述][70 4]

//提交表单  
<button type=”submit”>提交</button>  
//重置表单

对于 type属性为 submit时，按钮还会提供额外的属性。

![这里写图片描述][70 5]

//表单外关联提交

[70]: /images/20220525/93517fcd61f443e2aaccd2016c79b9e0.png
[70 1]: /images/20220525/b61e6e1e9f064b29a8450e486602eae7.png
[70 2]: /images/20220525/813c55f3014f4e58a53cf8e6279f5ad6.png
[70 3]: /images/20220525/90e8cd7e41e94984b20bb1828540ec55.png
[70 4]: /images/20220525/72996069a4d34d1caf46c04ea786cc63.png
[70 5]: /images/20220525/2c24bb6b0d6e434e82d4cd3d28a62800.png