表单元素 input元素 select元素 textarea元素 按钮元素 表单状态 配合表单元素的其他元素 label datalist form元素 fieldset元素

表单元素

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

input元素

输入框

• type属性：输入框类型

**type: text， 普通文本输入框

• value属性：输入框的值**

<p>
         <input type="text" value="请输入账号">
      </p>

• placeholder属性：显示提示的文本，文本框没有内容时显示

       <p>
         <input type="text" placeholder="请输入账号">
      </p>

placeholder的效果图，只要输入文字，提示字就会消失

type：password，密码框 作用：把文字进行隐藏

type: date, 日期选择框，兼容性问题

type: search, 搜索框，兼容性问题

type: number，数字输入框
min：表示数值的最小值 max是最大值
step 是步长

type: checkbox，多选框

type: radio，单选框

上传文件：

input元素可以制作按钮

当type值为reset、button、submit时，input表示按钮。

value里可以写值

select元素

下拉列表选择框

通常和option元素配合使用


input的默认选中是 check

textarea元素

文本域，多行文本框

按钮元素

button：要用按钮，建议使用这个元素。

type属性：reset、submit、button，默认值submit

表单状态

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

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

配合表单元素的其他元素

label

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

• 显示关联

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

- 隐式关联
-

datalist

数据列表

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

form元素

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

form元素对开发静态页面没有什么意义。

fieldset元素

表单分组

   <div>
            <h1>修改用户信息</h1>
            <fieldset>
                <legend>账号信息</legend>
                <p>
                    用户账号：
                    <input type="text">
                </p>
                <p>
                    用户密码：
                    <input type="password">
                </p>
            </fieldset>

            <p>
                用户姓名：
                <input type="text">
            </p>
            <p>
                <select name="" id="">
                    <option value="">Lorem.</option>
                    <option value="">Error.</option>
                    <option value="">Sint.</option>
                    <option value="">Totam!</option>
                    <option value="">Aut.</option>
                    <option value="">Corrupti.</option>
                    <option value="">Alias.</option>
                </select>
            </p>

            <p>
                <button>提交修改</button>
            </p>
        </div>