HTML表单元素-其他控件

3、下拉列表

下拉列表在我们的表单中也非常常用。

使用 <select>标签，来创建下拉列表。

使用 <select> 元素中的 <option> 标签，来表示下拉列表中的每一个选项。

示例：

<select name="下拉框">
    <option value="1">选项1</option>
    <option value="2" selected>选项2</option>
    <option value="3">选项3</option>
</select>


<select multiple>
    <optgroup label="爱好">
        <option value="1">听音乐</option>
        <option value="2" disabled>看电影</option>
    </optgroup>
    <optgroup label="游戏">
        <option value="3">王者荣耀</option>
        <option value="4">LOL</option>
    </optgroup>
</select>

常见属性：

name：下拉列表名称

multiple： 表示下拉列表可以多选

selected：设置默认选中的选项

disabled：1、用在select上禁用整个下拉列表；2、如果用在选项上，表示禁用该选项。

value: 选中的下拉框的值

<optgroup></optgroup> 对下拉列表进行分组。

label：分组名称。

4、文本域

使用 <textarea> 标签定义一个多行的文本输入元素。

文本域一般使用在，当你希望用户输入一段相当长的文本的时候，比如评论，备注等。

示例：

<textarea cols="130" rows="10" placeholder="请输入"></textarea>

文本域大部分属性和input相同（比如placeholder，maxlength，minlength等）。

但是有一些独有的属性：

cols：设置文本域宽度（字符的列数）

rows：设置文本域的高度（字符的行数）

注意：

•cols和rows一般不用，直接使用css中的width和height来设置宽高。•在css中设置 resize:none;不可改变大小。

textarea {
      width: 100px;
    height: 100px;
      resize: none;
}

5、表单信息分组

一个表单里面，可能会有很多表单元素，我们可以通过 fieldset 标签，对其中的表单元素进行分组。legend 标签会显示分组区域的名称。

<form action="http://xxx.com/1.php" method="post">
    <fieldset>
        <legend>分组1</legend>
        <input />
    </fieldset>


    <fieldset disabled>
        <legend>分组2</legend>
        <input />
    </fieldset>
</form>

disabled：fieldset中所有元素都会禁用

6、html5补充表单控件

html5可以理解为html的第5个版本，在 2014 年发布，目前html5是现在最新最稳定的版本。

<!--类似 text 输入，但在提交时会有验证-->
<input type="url">网址控件
<!--输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。-->
<input type="date">日期控件 
<!--用于输入时间的控件，不包括时区。-->
<input type="time">时间控件
<!--编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。-->
<input type="email">邮件控件
<!--用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。-->
<input type="color">颜色控件
<!--此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定值的范围。-->
<input type="range" step="1">滑块控件

可以通过该链接，查看所有不同type的input标签：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

补充完整示例

<!-- 表单域 -->
    <form action="1.php" method="post">
    <!-- 对表单信息分组 -->
    <fieldset>
    <!-- 表单信息分组名称 -->
    <legend>分组信息</legend>
        <!-- 文本输入框 -->
        账户: <input type="text" name="User" value="账号/邮箱/手机号">
        <br>
        <!-- 密码输出框 -->
        密码: <input type="password" name="Pwd">
        <br>
        <!-- 文件提交按钮 -->
        <input type="submit">
        <br>
        <!-- 单选框 -->
        <input type="radio" name="gender">男
        <input type="radio" name="gender" checked="checked">女


        <br>
        <br>
        <!-- 下拉列表 -->
        省(市)  <select>
            <!-- 下拉列表选项 -->
            <option value="">北京</option>
            <option value="">山东</option>
            <option value="">广东</option>
            <option value="">福建</option>
            <option value="">河南</option>
            <option value="" selected="selected">湖北</option>
        </select>


        <select>
            <!-- 对下拉列表分组 -->
            <optgroup label="湖北省">
                <option value="">武汉</option>
                <option value="" selected="selected">襄阳</option>
                <option value="">天门</option>
                <option value="">荆州</option>
                <option value="">仙桃</option>
            </optgroup>
        </select>


        <br><br>
        <!-- 多选框 -->
        <input type="checkbox"> A
        <input type="checkbox" checked="checked"> B
        <input type="checkbox"> C


        <br><br>
        <!-- 多行文本框 -->
        <textarea cols="30" rows="10"></textarea><br><br>
        <!-- 文本上传控件 -->
        <input type="file"><br><br>


        <input type="submit"> 
        <!-- 普通按钮 -->
        <input type="button" value="Button">     
        <!-- 重置按钮 -->
        <input type="reset"><br><br>
        <!-- 图片按钮 -->
        <input type="image" src="1.png" width="100"><br><br>
        <!-- 网址控件 -->
        <input type="url" value="http://www.baidu.com"><br><br>
        <!-- 日期控件 -->
        <input type="date">
        <!-- 颜色控件 -->
        <input type="color">


    </fieldset>
    </form>