表单

HTML 表单

HTML 表单主要用于收集用户的输入信息。

它包含各种表单元素。

表单元素是允许用户在表单中输入内容的一些标签元素，比如：输入框（input）、文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。

比如我们经常用到的注册/登录的界面就是一个表单。

一个常见的表单，通常由左侧提示文本和右侧表单元素组成。

1、表单域

表单域，顾名思义，就是包含表单元素的一个区域。我们用 form 标签来表示表单域。

语法如下：

<form action="http://xxx.com/1.php" method="get" name="" autocomplete="off"></form>

action：处理表单提交的地址URL，表示表单要提交到什么地方进行处理
method：表示浏览器使用哪种方式来提交表单
get：通过地址栏提交表单数据，表单数据会附加在 action 属性的 URL 中，并以 ? 作为分隔符（简单来说，就是可以在地址栏里看到你提交的内容），安全性较差，因为如果输入了账号和密码，那么就可以直接在地址栏看到了。
post：表单数据会包含在表单体内然后发送给服务器，安全性高。
name: 表单的名称。
autocomplete：表示是否能够自动补全上次的输入内容。

2、表单元素-输入框

输入框使用input标签。

<input>标签，根据type属性的不同，会有不同的表现样式。默认type="text"，也就是文本输入框。

2.1、文本输入框

单行的文本区域，（输入中的换行会被自动去除）。

<input type="text"
    name="username"
    maxlength="6"
    readonly="readonly"
    disabled="disabled"
    value="用户名" />

type：type="text" 表示文本输入框
name：输入框的名字
maxlength：文本框能输入的最大字符数。
minlength：文本框能输入的最小字符数。
readonly：文本框只读
disabled：文本框禁用
value：输入框中的默认内容
placeholder：输入框中的提示语

2.2、密码输入框

用于输入密码的元素。

<input type="password" />

注意：密码字段字符不会明文显示，而是以星号 * 或圆点 · 替代。

PS：文本输入框的所有属性对密码输入框都有效

2.3、数字输入框

用于输入数字的元素。

<input type="number" name="num" step="2" />

step：默认情况下，向上和向下按钮可以将值增加或减小。通过使用step 属性来更改此步长值。
min：最小值
max：最大值

注意：min和max只是点击上下按钮不会让你低于 min 或高于 max 的值，但是可以通过手动输入数字。

2.3、单选框

单选框的type=radio，单选框元素默认渲染为小型圆圈图表，填充即为激活，也就是我们所说的选中效果。

<input type="radio" name="gender" checked="checked" />男
<input type="radio" name="gender" />女

checked="checked" 或者直接写 checked，可以设置默认选中的项。

单选效果：当有多个单选框是如何设置只能有一个被选中？默认的情况下，单选框是独立存在的，如果要实现单选切换效果，需要将 name 的值设置相同，才能实现单选效果。

设置单选框的样式（add 20181009）

由于单选框的样式是只能设置大小，不能设置颜色，更不能设置样式。所以，一般我们自定义单选框的样式。

实现原理：

在单选框的后面加上label标签（需要设置为inline-block或者block），在点击单选框的时候，使用 + 选择器选中label标签，设置label标签的宽高和颜色代替单选框，将单选框display:none；

代码：

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input {
            display: none;
        }
        label {
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #ccc;
            border-radius: 50%;
            vertical-align: middle;
        }
        input:checked + label {
            background-color: red;
        }
    </style>
</head>

<body>
    <input type="radio" name="sex" id="a"><label for="a" />男
    <input type="radio" name="sex" id="b"><label for="b" />女
    <input type="radio" name="sex" id="c"><label for="c" />保密
</body>

</html>

另外，我们还可以实现选项卡效果，代码如下：

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            position: relative;
        }
        li {
            list-style: none;
            float: left;
        }
        input {
            outline: none;
        }
        input[type="radio"] {
            display: none;
        }
        label {
            display: block;
            text-align: center;
            line-height: 42px;
            width: 124px;
            height: 42px;
            color: rgb(227,64,5);
            border-bottom: 1px solid rgb(227,64,5);
            cursor: pointer;
        }
        input:checked + label {
            background-color: rgb(227,64,5);
            color: #fff;
        }
        li .dv1,
        li .dv2 {
            width: 248px;
            height: 50px;
            /* background-color: #ddd; */
            position: absolute;
            display: none;
        }

        .dv1 {
            position: relative;
            left: 0;
            top: 42px;
        }
        .dv2 {
            left: 0;
            top: 42px;
        }

        input:checked + label + div {
            display: block;
        }

        .txt1 {
            position: absolute;
            width: 200px;
            height: 30px;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -15px;
        }
        .txt1 input[type="text"] {
            width: 150px;
            height: 30px;
            vertical-align: top;
            float: left;
            box-sizing: border-box;
            border: 1px solid rgb(227,64,5);
            border-radius: 10px 0 0 10px;
            padding-left: 5px;
        }
        .txt1 input[type="submit"] {
            width: 50px;
            height: 30px;
            float: left;
            border: 1px solid rgb(227,64,5);
            border-radius: 0 10px 10px 0;
            margin-left: -1px;
            background-color: rgb(227,64,5);
            color: white;
        }
        .txt2 {
            position: absolute;
            width: 200px;
            height: 30px;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -15px;
        }
        .txt2 input[type="text"] {
            width: 150px;
            height: 30px;
            vertical-align: top;
            float: left;
            box-sizing: border-box;
            border: 1px solid rgb(227,64,5);
            border-radius: 10px 0 0 10px;
            padding-left: 5px;
        }
        .txt2 input[type="submit"] {
            width: 50px;
            height: 30px;
            float: left;
            border: 1px solid rgb(227,64,5);
            border-radius: 0 10px 10px 0;
            margin-left: -1px;
            background-color: rgb(227,64,5);
            color: white;
        }
    </style>
</head>

<body>
    <div class="box">
        <form action="">

            <ul class="uu">
                <li>
                    <input type="radio" name="yz" id="a" checked>
                    <label for="a">客服验证</label>
                    <div class="dv1">
                        <div class="txt1">
                            <input type="text" placeholder="请输入需要验证的QQ号">
                            <input type="submit" value="验证">
                        </div>
                    </div>
                </li>
                <li>
                    <input type="radio" name="yz" id="b">
                    <label for="b">网址验证</label>
                    <div class="dv2">
                        <div class="txt2">
                            <input type="text" placeholder="请输入需要验证的网址">
                            <input type="submit" value="验证">
                        </div>
                    </div>
                </li>
            </ul>
        </form>
    </div>

</body>

</html>

效果：

2.4、多选框

复选框可以选取一个或多个选项：

第一个多选框：<input type="checkbox" checked="checked" value="one" />
第二个多选框：<input type="checkbox" checked />

value：复选框选中时的值。如果省略，则默认为"on"。

注意：所有的 <input> 元素都有 value 属性；但是，它对 checkbox 类型的输入有特殊作用：当表单被提交时，只有当前被选中的复选框会被提交给服务器，值就是 value 属性的值。如果没有指定 value，默认为字符串 on。

2.5、文本上传控件

文本上传控件允许用户可以从他们的设备中选择一个或多个文件。选择后，这些文件可以使用提交表单的方式上传到服务器上。

<input type="file" />

accept：表示允许的文件类型（accept="image/*,.pdf" 表示任何图片文件或者pdf文件。
multiple：如果出现，则表示用户可以选择多个文件

20181009 修改文本上传控件的样式：

实现原理：

由于上传控件的大小和颜色等是无法直接修改的，若想要修改的话，可以另外添加一个div，将div的大小设置和file控件的大小一致，将div定位，之后file文件也进行定位，覆盖到div之上（可以设置z-index），然后设置file控件的opacity为0即可。

示例：

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input {
            width: 180px;
            height: 60px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            opacity: 0;
        }
        div {
            width: 180px;
            height: 60px;
            background-color: #37f;
            color: white;
            text-align: center;
            line-height: 60px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <input type="file" />
    <div>点击上传</div>
</body>

</html>

2.6、文件提交按钮

文件提交按钮，可以实现信息提交功能。

当用户单击确认按钮时，表单的内容会被传送到服务器。表单form的属性 action 定义了服务端的文件名。

<form name="input" action="html_form_action.php" method="get">
    用户名: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

比如在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件。

2.7、按钮

用来创建一个没有默认值的可点击按钮。已经在 HTML5 被 <button>元素取代。

<input type="button" value="input按钮"> 

<!--HTML5方式-->
<button>button按钮</button>

区别：<button>在form里面，默认可以进行提交操作，除非设置type=button；而input按钮需要配合JS进行提交。

2.8、重置按钮

此按钮点击后，会将表单的所有内容重置为输入前的初始值（一般为空值）。不推荐使用。

<input type="reset">

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>
        <!-- 下拉列表 -->
        省(市)&nbsp; <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">&nbsp;
        <!-- 普通按钮 -->
        <input type="button" value="Button">&nbsp;  
        <!-- 重置按钮 -->
        <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>

HTML 表单​

1、表单域​

2、表单元素-输入框​

2.1、文本输入框​

2.2、密码输入框​

2.3、数字输入框​

2.3、单选框​

2.4、多选框​

2.5、文本上传控件​

2.6、文件提交按钮​

2.7、按钮​

2.8、重置按钮​

3、下拉列表​

4、文本域​

5、表单信息分组​

6、html5补充表单控件​

补充完整示例​