3、表单元素

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

input元素

输入框

type属性：输入框类型

type：text，普通文本输入框
type：password，密码框
type：date，日期选择框，兼容性问题
type：search，搜索框，兼容性问题
type：range，滑块
type：checkbox，多选框
type：radio，单选框
type：file，选择文件

value属性：输入框的值
placeholder属性：显示提示的文本，文本框没有内容时显示
checked 默认选中

input元素可以制作按钮

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

select元素

下拉列表选择框

通常和option元素配合使用

optgroup 分组
multiple 多选

<!-- 单选 (selected 选中状态)-->
<p>
    请选择城市：
    <select>
        <option>北京</option>
        <option selected>天津</option>
        <option>石家庄</option>
    </select>
</p>

<!-- 分组选择，单选 -->
<p>
    请选择你最喜欢的主播：
    <select>
        <optgroup label="才艺表演">
            <option>冯提莫</option>
        </optgroup>
        <optgroup label="游戏主播">
            <option>WETed</option>
            <option>infi</option>
            <option>th000</option>
        </optgroup>
    </select>
</p>

<!-- 分组选择：多选 （multiple）-->
<p>
    请选择你喜欢的主播：
    <select multiple>
        <optgroup label="才艺表演">
            <option>冯提莫</option>
        </optgroup>
        <optgroup label="游戏主播">
            <option>WETed</option>
            <option>infi</option>
            <option>th000</option>
        </optgroup>
    </select>
</p>

textarea元素

文本域，多行文本框

<p>
    请填写简介：
    <textarea style="width: 300px;height: 200px;" placeholder="请输入简介"></textarea>  
</p>

按钮元素

button

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

<p>
    <button type="button">这是一个按钮</button>
</p>

<p>
    <input type="image" src="img/button.jpeg">
    <!-- 按钮建议使用button -->
    <button>
        <img src="img/button.jpeg" alt="" style="width: 150px;">
    <p>Lorem ipsum dolor sit amet.</p>
    </button>
</p>

表单状态

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

<input type="text" value="111111" readonly>

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

<input type="text" value="111111" disabled>

配合表单元素的其他元素

label（用的较多）

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

显式关联

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

<p>
    请选择性别：
    <input id="radMale" name="gender" type="radio">
    <label for="radMale">男</label>
    <input id="radFemale" name="gender" type="radio">
    <label for="radFemale">女</label>
</p>

隐式关联

<p>
    请选择性别：
    <label>
        <input name="gender" type="radio">
        男
    </label>

    <label>
        <input name="gender" type="radio">
        女
    </label>
</p>

datalist

数据列表

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

有兼容性问题，通常也不这样写，词条数据太多，放服务器

<p>
    请输入你常用的浏览器：
    <input list="userAgent" type="text" placeholder="请输入">
</p>

<datalist id="userAgent">
    <option value="Chrome">谷歌浏览器</option>
    <option value="IE">IE浏览器</option>
    <option value="Opera">欧鹏浏览器</option>
    <option value="Safari">苹果浏览器</option>
    <option value="Fire fox">火狐浏览器</option>
</datalist>

form元素

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

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

<form action="https://www.baidu.com/" method="get">
    <p>
        账号：
        <input type="text" name="loginid">
    </p>

    <p>
        密码:
        <input type="password" name="loginpsw">
    </p>
    <p>
        城市
        <select name="city">
            <option value="1">重庆</option>
            <option value="2">上海</option>
            <option value="3">北京</option>
        </select>
    </p>
    <p>
        <button type="submit">提交</button>
    </p>
</form>

fieldset元素

表单分组

 <div>
    <h1>修改用户信息</h1>
    <fieldset>
        <legend>账号信息</legend>
        <p>
            用户账号：
            <input type="text" value="111111" readonly>
        </p>
        <p>
            用户密码：
            <input type="password">
        </p>
    </fieldset>
    
    <fieldset>
        <legend>基本信息</legend>
        <p>
            用户姓名：
            <input type="text" value="fangfang" disabled>
        </p>
        <p>
            城市：
            <select name="" id="">
                <option value="">Lorem.</option>
                <option value="">Quod.</option>
                <option value="">Maxime!</option>
                <option value="">Porro.</option>
                <option value="">Autem.</option>
                <option value="">Deleniti.</option>
                <option value="">Rerum?</option>
                <option value="">Aliquam?</option>
                <option value="">Rem.</option>
                <option value="">Iusto.</option>
            </select>
        </p>
    </fieldset>
    <p>
        <button type="button">提交修改</button>
    </p>
</div>