表单元素

表单元素

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

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

表单分组