表单元素

一系列元素，主要用于收集用户数据。

input元素

输入框

属性：

type：输入框类型。

type: text，普通文本输入框。 type: password，密码。 type：date，日期选择框,兼容性问题（旧版本浏览器）。 type：search，搜索框，兼容性问题（旧版本浏览器）。 type：range，选中范围。 type：color，颜色选择。 type：number,数字输入框。 type：checkbox，多选框，建议增加name属性确认选择范围。 type：radio，单选框，需要增加name属性，确认单选范围。 type：file，选择本地文件。

其余详见MDN

value：输入框的值。placeholder:显示提示的文本，文本框没有内容时显示。

input元素可以制作按钮（不建议使用）

当type值为reset（重置按钮）、button（普通按钮）、submit（提交按钮）时，input表示按钮。

selecte 元素

下拉列表选择框

通常与option元素配合使用

textarea元素

文本域，多行文本框。

按钮元素

button(建议使用)

type属性：reset（重置按钮）、button（普通按钮）、submit（提交按钮），默认值为submit

表单状态

readonly属性：布尔属性，是否只读，不会改变表单显示样式。

disabled属性：布尔属性，是否禁用，会改变表单显示样式。

配合表单元素的其他元素

lable

普通元素，通常配合单选和多选框使用

显示关联

可以通过for属性，让lable元素关联某一个表单元素，for属性书写表单元素id的值。

隐式关联 <p> Sex: <!-- 显示关联 --> <input type="radio" name="gender" id="rad_Male"> <label for="rad_Male">Male</label> <input type="radio" name="gender" id="rad_Female"> <label for="rad_Female">Female</label> <!-- 隐式关联 --> <label > <input name="gender1" type="radio"> 男 </label> <label > <input name="gender1" type="radio"> 女 </label> </p>

datalist

数据列表

datalist本身不会显示到页面，通常用于和普通文本框配合

form

通常情况下会将整个表单元素放置到form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。

对开发静态页面意义不大，服务器，JS相关很有用。

fieldset

表单分组