2022-11-10T00:00:00Z

zcj

Web前端开发基础系列：表单

原创 Web前端开发技术 2745 浏览

表单是HTML5网页中的重要元素，它通过终端设备的浏览器来将用户信息发送给服务器端程序处理，来实现网上注册、网上登录、网上交易等多种功能。本文将对表单控制和属性及如何使用CSS控制表单样式进行解析并编写程序及案例。

一、表单构成

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成，即为一个简单的HTML表单界面及其构成。对于表单构成中的表单控件、提示信息和表单域，对其的解释如下：

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：一个表单输入项标题，即为一些说明性的文字，提示用户进行填写和操作。
表单域：它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

表单构成

通过表单，要想让表单中的数据传送给后台服务器，就必须定义表单域。在HTML中，<form></form>标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，<form> </form>中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
     各种表单控件
</form>

在上面的语法中，<form>与</form>之间的表单控件是由用户自定义的，action、method和name为表单标记<form>的常用属性，分别用于定义url地址、提交方法及表单名称。

清单 1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建表单</title>
</head>
<body>
    <!-- 表单域 -->
    <form action="http://www.ischoolcode.cn/auth/login" method="post">
        账号：                                       <!-- 提示信息 -->
        <input type="text" name="account" /><br/>   <!-- 表单控件 -->
        密码：                                       <!-- 提示信息 -->
        <input type="password" name="pass" /><br/>  <!-- 表单控件 -->
        <input type="submit" value="提交"/>          <!-- 表单控件 -->
    </form>
</body>
</html>

二、表单属性

在HTML5中，表单拥有多个属性，通过设置表单属性可以实现提交方法、自动完成、表单验证等不同的表单功能。

2.1 表单常用属性

<form>标记的常用属性包含action属性、method属性、name属性。

2.1.1 `action`属性

在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的映射地址。

<form action="http://www.ischoolcode.cn/auth/login">

表示当提交表单时，表单数据会传送到映射地址为 http://www.ischoolcode.cn/auth/login 的页面去处理。action的属性值可以是相对路径或绝对路径。

2.1.2 `method`属性

method属性用于设置表单数据的提交方法，其取值为get或post。在HTML5中，可以通过<form>标记的method属性指明表单服务器处理数据的方法。

 <form action="http://www.ischoolcode.cn/auth/login" method="post">

在上面的代码中，采用post方法，而get为method属性的默认值，采用get方法，提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。采用post方法的保密性好，并且无数据量的限制，所以使用method="post"可以大量的提交数据。

2.1.3 `name`属性

name属性用于指定表单的名称，以标识一个表单区分同一个页面中的多个表单。它提供一种在脚本程序中引用表单的方法，通过document.表单名来取得这个表单。

提交表单时，这个name属性的值不会发送到服务器，此属性仅在DOM操作中有用。

2.2 H5新增表单属性

HTML5的新增表单属性包括两个，即autocomplete属性和novalidate属性。

2.2.1 `autocomplete`属性

autocomplete属性用于指定表单是否有自动完成功能，所谓“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入。

autocomplete属性有2个值，对它们的解释如下：

on : 表单有自动完成功能
off : 表单无自动完成功能

清单 2：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>autocomplete属性的使用</title>
</head>
<body>
    <form id="myform" autocomplete="on">
        用户名： 
        <input type="text" id="myname" name="myname" /><br/>
        匿&nbsp;&nbsp;&nbsp;名：
        <input type="text" id="niname" name="niname" /><br/>
        <input type="submit" value="提交" />
    </form>
</body>
</html>

2.2.2 `novalidate`属性

novalidate属性是一个boolean类型的属性，指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时，可以关闭整个表单的验证，这样可以使form内的所有表单控件不被验证。 <form>标记的属性并不会直接影响表单的显示效果。要想让一个表单有意义，就必须在<form>与</form>之间添加相应的表单控件。

<form id="myform" novalidate="novalidate">

2.3 表单的其他属性

2.3.1 `enctype`属性

enctype属性定义数据的编码类型，指定表单用什么样的封装方式将数据提交给服务器。其值有三种情况：

① Application/x-www-form-urlencoded为默认值，允许普通字符、特殊字符提交给服务器，不允许提交文件。
② multipart/form-data，只有在进行文件上传时才会使用。
③ Text/plain，只允许提交普通字符。

注意： 上传文件时，method必须为post，enctype必须为multipart/form-data。

2.3.2 `target`属性

target属性的作用为规定在何处打开action属性指定的映射url。语法格式为：

<form  target="value">

这个target的值为以下情况：

 值               描述
_blank       在新窗口中打开；
_self        默认，在相同的框架中打开； 
_parent      在父框架集中打开；
_top         在整个窗口中打开；
framename    在指定的框架中打开。

清单 3：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单属性的使用</title>
</head>
<body>
    <form action="http://www.ischoolcode.cn/auth/login" method="post" autocomplete="on"
        enctype="application/x-www-form-urlencoded" name="myform" target="_self">
        账号：
        <input type="text" name="account" /><br />
        密码：
        <input type="password" name="pass" /><br />
        <input type="submit" value="提交" />
    </form>
</body>
</html>

三、`<Input/>`标记元素及其属性

<input />标记元素是表单中的最常见的标记元素，网页中常见的单行文本框、单选按钮、复选框等都是通过它定义的。在HTML5中，<input />标记元素拥有多种输入类型及相关属性，其常用属性如下所示。

  属性           属性值             描述
 type            text             单行文本输入框
                 password         密码输入框
                 radio            单选按钮
                 checkbox         复选框
                 button           普通按钮
                 submit           提交按钮
                 reset            重置按钮
                 image            图片形式的提交按钮
                 hidden           隐藏域
                 file             文件域
                 email            电子邮件的输入域
                 url              URL地址的输入域
                 number           数值的输入域
                 range            一定范围内的数字值的输入域
                 date             日期和时间的输入类型
                 month
                 week
                 time
                 datetime
                 datetime-local
                 search           搜索域
                 color            颜色输入类型
                 tel              电话号码输入类型
 name            由用户自定义      控件的名称
 value           由用户自定义      input控件中的默认文本值
 size            正整数           input控件在页面中的显示宽度
 readonly        readonly         该控件内容为只读
 disabled        disabled         第一次加载页面时禁用该控件
 checked         checked          定义选择控件默认被选中的项
 maxlength       正整数            控件允许输入的最多字符数
 autocomplete    on/off           设定是否自动完成表单字段内容
 autofocus       autofocus        指定页面加载后是否自动获取焦点
 form            form标记元素的id  设定字段隶属于哪一个或多个表单
 list            datalist标记元素的id    指定字段的候选数据值列表
 multiple        multiple         指定输入框是否可以选择多个值
 min             数值             规定输入框所允许的最小值
 max             数值             规定输入框所允许的最大值
 step            数值             规定输入框所允许的步长（间隔）
 pattern         字符串           验证输入的内容是否与定义的正则表达式匹配
 placeholder     字符串           为input类型的输入框提供一种提示
 required        required         规定输入框填写的内容不能为空

3.1 `<Input/>`标记元素的type属性

浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等，要想定义这些元素就需要使用input控件，其基本语法格式如下：

<input type="控件类型"/>

(1) 单行文本输入框<inputtype="text" /> ：单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。
(2) 密码输入框<input type="password" />：密码输入框用来输入密码，其内容将以圆点的形式显示。
(3) 单选按钮<input type="radio" />：单选按钮用于单项选择，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。
(4) 复选框<input type="checkbox" />：复选框常用于多项选择，如选择兴趣、爱好等，可对其应用checked属性，指定默认选中项。
(5) 普通按钮<input type="button" />：普通按钮常常配合javaScript脚本语言使用。
(6) 提交按钮<input type="submit" />：提交按钮是表单中的核心控件，用户完成信息的输入后，一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用value属性，改变提交按钮上的默认文本。
(7) 重置按钮<input type="reset" />：当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用value属性，改变重置按钮上的默认文本。
(8) 图像形式的提交按钮<input type="image" />：图像形式的提交按钮用图像替代了默认的按钮，外观上更加美观。需要注意的是，必须为其定义src属性指定图像的url地址。
(9) 隐藏域<input type=" hidden" />：隐藏域对于用户是不可见的，通常用于后台的程序。
(10) 文件域<input type="file" />：当定义文件域时，页面中将出现一个文本框和一个“浏览...”按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。

清单 4：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>input控件的使用</title>
</head>
<body>
    <form action="#" method="get">
        用户名：
        <input type="text" maxlength="6"/><br/>
        密码：
        <input type="password" size="22"/><br/>
        性别：
        <input type="radio" name="sex" checked="checked"/>男
        <input type="radio" name="sex"/>女<br/>
        兴趣爱好：
        <input type="checkbox"/>书法
        <input type="checkbox"/>击剑
        <input type="checkbox"/>爬山<br/>
        上传图像：
        <input type="file"/><br/>
        <input type="submit" value="确认"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

(11) email类型<input type="email" />：email类型的input元素是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息。
(12) url类型<input type="url" />：url类型的input元素是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本，则会提交数据到服务器；如果输入的值不符合URL地址格式，则不允许提交，并且会有提示信息。
(13) tel类型<input type="tel" />：tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此，tel类型通常会和pattern属性配合使用。
(14) search 类型<input type="search" />：search 类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符，例如站点搜索或者Google搜索。在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。
(15) color类型<input type="color" />：color类型用于提供设置颜色的文本框，实现一个RGB颜色输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。单击color类型文本框，可以快速打开拾色器面板，方便用户可视化选取一种颜色。
(16) number类型<input type="number" />：number类型的input元素用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。number类型的输入框可以对输入的数字进行限制，规定允许的最大值和最小值、合法的数字间隔或默认值等。具体属性说明为： value：指定输入框的默认值。 max：指定输入框可以接受的最大的输入值。 min：指定输入框可以接受的最小的输入值。 step：输入域合法的间隔，如果不设置，默认值是1。

清单 5：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>number类型的使用</title>
</head>
<body>
    <form action="#" method="get">
        输入数值<input type="number" name="num" value="1" min="1" max="40" step="5"/><br/>
        <input type="submit" value="确认"/>
    </form>
</body>
</html>

(17) range类型<input type="range" />：range类型的input元素用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与number类型一样，通过min属性和max属性，可以设置最小值与最大值，通过step属性指定每次滑动的步幅。
(18) 日期选择器类型<input type= "date, month, week…" />：日期选择器类型是指时间日期类型，HTML5中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期。

日期选择器类型：

 类型                   说明
 date               选取日、月、年
 month              选取月、年
 week               选取周和年
 time               选取时间（小时和分钟）
 datetime           选取时间、日、月、年（UTC时间）
 datetime-local     选取时间、日、月、年（本地时间）

清单 6：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>时间日期类型的使用</title>
</head>
<body>
    <form action="#" method="get">
        <input type="date"/><br/>
        <input type="month"/><br/>
        <input type="week"/><br/>
        <input type="time"/><br/>
        <input type="datetime"/><br/>
        <input type="datetime-local"/><br/>
        <input type="submit" value="确认">
    </form>
</body>
</html>

3.2 `<Input/>`标记元素的其他属性

除了type属性之外，<input />标记元素还可以定义多个其他的属性，以实现不同的功能。

3.2.1 `autofocus`属性

在HTML5中，autofocus属性用于指定页面加载后是否自动获取焦点，将标记的属性值指定为true时，表示页面加载完毕后会自动获取该焦点。

清单 7：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>autofocus属性的使用</title>
</head>
<body>
    <form action="#" method="get">
        输入关键词：
        <input type="text" name="mykey" autofocus="true"/>
        <input type="submit" value="确认" />
    </form>
</body>
</html>

3.2.2 `form`属性

在HTML5中，在声明<form id="myform"></form>表单域时，指定其id属性，这样将控件标记元素不一定放在和标签之间，只要在声明控件标记元素时，如<input/>标记元素，在其内指定form属性，属性值为表单域的id，就可以将其放在表单域之外。

清单 8：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>form属性的使用</title>
</head>
<body>
    <form id="myform" action="#" method="get">
        姓名：
        <input type="text" name="myname"/>
        <input type="submit" value="确认" /><br/>
    </form>
    昵名：
    <input type="text" name="nickname" form="myform" />
</body>
</html>

3.2.3 `list`属性

通过<datalist>标记元素实现数据列表的下拉效果。而<input/>的list属性用于指定输入框所绑定的<datalist>标记元素，其值是某个<datalist>标记元素的id。

清单 9：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>list属性的使用</title>
</head>
<body>
    <form action="#" method="get">
        选择喜欢的作曲家：<br>
        <input type="text" name="favorites" list="composers"/><br/><br/>
        <datalist id="composers">
            <option value="巴赫">
            <option value="贝多芬">
            <option value="勃拉姆斯">
            <option value="肖邦">
            <option value="门德尔松">
        </datalist>
        <input type="submit" value="确认" />
    </form>
</body>
</html>

3.2.4 `multiple`属性

multiple属性指定输入框可以选择多个值，该属性适用于email和file类型的<input/>标记元素。multiple属性用于email类型的input元素时，表示可以向文本框中输入多个e-mail地址，多个地址之间通过逗号隔开；multiple属性用于file类型的input元素时，表示可以选择多个文件。

清单10：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>multiple属性的使用</title>
</head>
<body>
    <form action="#" method="get">
        电子邮箱：(若是多个邮箱，请使用逗号分隔)<br/>
        <input type="email" name="myem" multiple="true"/><br/>
        上传图片:<br/>
        <input type="file" name="myfile" multiple="true"/><br/><br/>
        <input type="submit" value="确认" />  
    </form>
</body>
</html>

3.2.5 `min`、`max`和`step`属性

HTML5中的min、max和step属性用于为包含数字或日期的input输入类型规定限值，也就是给这些类型的输入框加一个数值的约束，适用于date、number和range等类型。

3.2.6 `pattern`属性

pattern属性用于验证input类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配。pattern属性适用于的类型是：text、search、url、tel、email和password的<input/>标记元素。

常用的正则表达式：

正则表达式                               说明
^[0-9]*$                                数字
^\d{n}$                                 n位的数字
^\d{n,}$                                至少n位的数字
^\d{m,n}$                               m-n位的数字
^(0|[1-9][0-9]*)$                       零和非零开头的数字
^([1-9][0-9]*)+(.[0-9]{1,2})?$          非零开头的最多带两位小数的数字
^(\-|\+)?\d+(\.\d+)?$                   正数、负数、和小数
^\d+$ 或 ^[1-9]\d*|0$                   非负整数
^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$        非正整数
^[\u4e00-\u9fa5]{0,}$                   汉字
^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$   英文和数字
^[A-Za-z]+$                             由26个英文字母组成的字符串
^[A-Za-z0-9]+$                          由26个英文字母和数字组成的字符串
^\w+$ 或 ^\w{3,20}$                     由数字、26个英文字母或者下划线组成的字符串
^[\u4E00-\u9FA5A-Za-z0-9_]+$            中文、英文、数字包括下划线
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$   Email地址
[a-zA-Z]+://[^\s]* 或
^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$      URL地址
^\d{15}|\d{18}$                         身份证号（15位、18位数字）
^([0-9]){7,18}(x|X)?$ 或
^\d{8,18}|[0-9x]{8,18}|[0-9x]{8,18}?$   以数字、字母x结尾的短身份证号码
^[a-zA-Z][a-zA-Z0-9_]{4,15}$            账号是否合法(字母开头，5-16字节，允许字母数字下划线)
^[a-zA-Z]\w{5,17}$                      密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)

清单 11：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>pattern属性的使用</title>
</head>
<body>
    <form action="#" method="get">
        账号：<input type="text" name="username" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$"/><br/>
        密码：<input type="password" name="userpass" pattern="^[a-zA-Z]\w{5,17}$"/><br/>
        身份证号：<input type="text" name="usercard" pattern="^\d{15}|\d{18}$"/><br/>
        电子邮箱：<input type="email" name="useremail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/>
        <br/><br/>
        <input type="submit" value="确认"/>
    </form>
</body>
</html>

3.2.7 `placeholder`属性

placeholder属性用于为<input/>标记元素的输入框提供相关提示信息，以描述输入框期待用户输入何种内容。在输入框为空时显式出现，而当输入框敲入值时则会消失。

placeholder属性适用于type属性值为text、search、url、tel、email以及password的<input/>标记元素。

清单 12：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>placeholder属性的使用</title>
</head>
<body>
    <form action="#" method="get">
        电话：<br/>
        <input type="tel" name="mymobile" pattern="^[1][3,4,5,6,7,8,9][0-9]{9}$" placeholder="请输入11位手机号码"/>
        <br/><br/>
        <input type="submit" value="确认"/>
    </form>
</body>
</html>

3.2.8 `required`属性

HTML5中的输入类型，不会自动判断用户是否在输入框中输入了内容，如果开发者要求输入框中的内容是必须填写的，那么需要为<input/>标记元素指定required属性。required属性用于规定输入框填写的内容不能为空，否则不允许用户提交表单。

清单 13：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>required属性的使用</title>
</head>
<body>
    <form action="#" method="get">
        姓名：<input type="text" name="username" required />
        <br/><br/>
        <input type="submit" value="确认"/>
    </form>
</body>
</html>

四、其他表单控件标记元素

除了<input/>控件标记元素外，HTML5表单控件标记元素还包括textarea、select、datalist、label、fieldset等标记元素。

4.1 `textarea`标记元素

当需要输入大量的信息，单行文本输入框就不再适用，为此HTML语言提供了<textarea></textarea>标记元素。通过该控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

在上面的语法格式中，cols和rows为<textarea>标记元素的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。

另外，<textarea>元素除了cols和rows属性外，还拥有几个可选属性，分别为disabled、name和readonly，详细如下：

 属性         属性值         说明
 name       由用户自定义   控件的名称
 readonly   readonly      该控件内容为只读
 disabled   disabled      禁用该控件，显示为灰色

清单 14：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>textarea标记元素的使用</title>
</head>
<body>
    <form action="#" method="get">
        发表意见：<br/>
        <textarea cols="60" rows="8">请提出您的建议</textarea>
        <br/><br/>
        <input type="submit" value="确认"/>
    </form>
</body>
</html>

注意事项：

各浏览器对<textarea>控件标记元素的cols和rows属性的解析不同，多行文本输入框在各浏览器中的显示效果可能会有差异。所以在实际应用中，更常用的方法是使用CSS层叠样式表的width和height属性来定义多行文本输入框的宽度和高度。

4.2 `select`标记元素

浏览网页时，经常会看到包含多个选项的下拉菜单，当点击选项表单控件的右侧下拉三角按钮时，会出现一个选择列表。使用select控件定义下拉菜单的基本语法格式如下：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
     ...
</select>

在上面的语法中，<select></select>标记用于在表单中添加一个下拉菜单，<option></option>标记嵌套在<select></select>标记中，用于定义下拉菜单中的具体选项，每对<select></select>标记元素中至少应包含一对<option></option>标记元素。

在HTML中，可以为<select>和<option>标记元素定义属性，以改变下拉菜单的外观显示效果，具体如下：

  标记名        常用属性             描述
 <select>       size               指定下拉菜单的可见选项数（取值为正整数）。
                multiple           定义multiple="multiple"时，下拉菜单将具有多项选择的功能，方法为按住Ctrl键的同时选择多项。 
 <option>       selected           定义selected =" selected "时，当前项即为默认选中项。

清单 15：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>select标记元素的使用</title>
</head>
<body>
    <form action="#" method="get">
        所在城市：<br />
        <select>
            <option>-请选择-</option>
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option>武汉</option>
            <option>成都</option>
        </select><br /><br />
        性别：<br />
        特长（单选）:<br />
        <select>
            <option>唱歌</option>
            <option selected="selected">美术</option>
            <option>跳舞</option>
        </select><br/><br/>
        爱好（多选）:<br/>
        <select multiple="multiple" size="4">   
            <option>读书</option>
            <option selected="selected">编程</option>
            <option>旅行</option>
            <optionselected="selected">弹奏</option>
            <option>乒乓球</option>
        </select><br/><br/>
        <input type="submit" value="确认" />
    </form>
</body>
</html>

4.3 `datalist`标记元素

datalist标记元素用于定义输入框的选项列表，列表通过datalist标记元素内的option标记元素进行创建。如果用户不希望从列表中选择某项，也可以自行输入其他内容。datalist标记元素通常与input标记元素配合使用，来定义input的取值。在使用<datalist>标记元素时，需要通过id属性为其指定一个唯一的标识，然后为input标记元素指定list属性，将该属性值设置为datalist标记元素对应的id属性值即可。

清单 16：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>datalist标记元素的使用</title>
</head>
<body>
    <form action="#" method="get">
        用户名：<br/>
        <input type="text" list="namelist"/><br/><br/>
        <datalist id="namelist">
            <option value="admin">管理员</option>
            <option value="tom">汤姆</option>
            <option value="alice">爱丽丝</option>
        </datalist>
        <input type="submit" value="确认" />
    </form> 
</body>
</html>

4.4 `label`标记元素

<label> 标记定义输入元素的类别，通常与<input />结合使用

清单 17：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>lable标记元素的使用</title>
</head>
<body>
    <form action="#" method="get">
        <label>账户名:
            <input id="name" name="name" type="text" placeholder="输入你的名字" autofocus required size="50">
        </label>
        <input type="submit" value="确认" />
    </form>
</body>
</html>

4.5 `fieldset`标记元素

<fieldset> 标记元素可以将表单内的相关标记元素分组。可以在表单内创建多个分组区：

清单 18：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>fieldset标记元素的使用</title>
</head>
<body>
    <form action="#" method="get">
        <fieldset>
            <legend> 客户信息 </legend>
            <p>
                <label>邮件地址:
                    <input id="email" name="email" type="email" placeholder="输入你的电子邮箱地址" required size="50">
                </label>
            </p>
        </fieldset>
        <br/>
        <input type="submit" value="确认" />
    </form>
</body>
</html>

五、`CSS`控制表单样式

使用表单的目的是为了提供更好的用户体验，在网页设计时，不仅需要设置表单相应的功能，而且希望表单控制的样式更加美观。使用CSS可以轻松控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。

清单 19：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS控制表单样式</title>
    <style>
        body{font-size:12px; font-family:"宋体";}          /*全局控制*/
        body,form,input,p{padding:0; margin:0; border:0;}  /*重置浏览器的默认样式*/
        form{
            width:320px;
            height:150px;
            padding-top:20px;
            margin:50px auto;                      /*使表单在浏览器中居中*/
            background:#f5f8fd;                    /*为表单添加背景颜色*/
            border-radius:20px;                    /*设置圆角边框*/
            border:3px solid #4faccb;
        }

        p{
            margin-top:15px;
            text-align:center;
        }

        p span{
            width:40px;
            display:inline-block;
            text-align:right;
        }

        .num,.pass{   /*对文本框设置共同的宽、高、边框、内边距*/   
            width:152px;
            height:18px;
            border:1px solid #38a1bf;
            padding:2px2px 2px 22px;
        }

        .num{       /*定义第一个文本框的背景、文本颜色*/

             background: #FFF;
             color:#999;
        }

        .pass{      /*定义第二个文本框的背景*/                                                    
             background: #FFF;
        }

        .btn01,.btn02{
            width:60px;
            height:25px;
            border-radius:3px;         /*设置圆角边框*/
            border:1px solid #6b5d50;
            margin-left:30px;
        }

        .btn01{ background:#3bb7ea;}   /*设置第一个按钮的背景色*/  
        .btn02{background:#fb8c16;}    /*设置第二个按钮的背景色*/

        </style>
    </style>
</head>
<body>
    <form action="#" method="get">
        <p>
            <span>账号：</span>
            <input type="text" name="username"  class="num"  placeholder="请输入账号"/>
        </p>
        <p>
            <span>密码：</span>
            <input type="password" name="pwd" class="pass"  placeholder="请输入密码"/>
        </p>
        <p>
            <input type="submit" value="登录" class="btn01"/>
            <input type="reset" value="重置" class="btn02"/>
        </p>
    </form>
</body>
</html>

六、综合案例

清单 20：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单综合案例</title>
    <style>
        body{font-size:12px; font-family:"宋体";} 
        form {
            width: 550px;
            margin:50px auto;
            padding: 50px 60px;
            background-color: #2d2d2d;
            border-radius: 20px;
        }

        fieldset {
            padding: 0 20px 20px;
            margin: 0 0 30px;
            border: 2px solid #ffffff;
            background: #B8B8B8;
            border-radius: 10px;
        }

        legend {
            color: #ffffff;
            background: #990033;
            font-size: 0.9em;
            font-weight: bold;
            text-align: left;
            padding: 5px;
            margin: 0;
            width: 10em;
            border: 2px solid #660033;
            border-radius: 5px;
        }

        label {
            display: block;
            float: left;
            clear: left;
            text-align: left;
            width: 100%;
            padding: .4em 0 0 0;
            margin: .15em 0 0 0;
        }

        .btn {
            background:#fb8c16;
            width:60px;
            height:25px;
            border-radius:3px;  
            border:1px solid #6b5d50;
            margin-left:30px;
        }

    </style>
</head>
<body>
    <form id="orderForm" autocomplete="on" action="#" method="get">
        <fieldset>
            <legend> 客户信息 </legend>
            <p>
                <label>账户名:
                    <input id="name" name="name" type="text" placeholder="输入你的名字" autofocus required size="50">
                </label>
            </p>
            <p>
                <label>电话:
                    <input id="tel" name="telephone" type="tel" placeholder="格式: 1-234-567-8910" required size="50"
                        pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
                </label>
            </p>
            <p>
                <label>邮件地址:
                    <input id="email" name="email" type="email" placeholder="输入你的电子邮箱地址" required size="50">
                </label>
            </p>
            <p>
                <label>日期: <input type="date">
                </label>
            </p>
        </fieldset>
        <fieldset>
            <legend> 最喜欢的作曲家 </legend>
            <p>
                <label>
                    <input type="text" name="favorites" list="composers">
                    <datalist id="composers">
                        <option value="巴赫">
                        <option value="贝多芬">
                        <option value="勃拉姆斯">
                        <option value="肖邦">
                        <option value="门德尔松">
                    </datalist>
                </label>
            </p>
        </fieldset>
        <fieldset>
            <legend>作曲家</legend>
            <p>
                <label>
                    巴赫: <input name="form_number" id="form_number" type="number" min="1" max="5">
                </label>
            </p>
            <p>
                <label>
                    贝多芬: <input name="form_number" id="form_number" type="number" min="1" max="10">
                </label>
            </p>
            <p>
                <label>
                    勃拉姆斯: <input name="form_number" id="form_number" type="number" min="1" max="7">
                </label>
            </p>
            <p>
                <label>
                    肖邦: <input name="form_number" id="form_number" type="number" min="1" max="10">
                </label>
            </p>
            <p>
                <label>
                    门德尔松: <input name="form_number" id="form_number" type="number" min="1" max="4">
                </label>
            </p>
        </fieldset>
        <fieldset>
            <legend> 上传文件</legend>
            <p>上传您的乐团的一个文件,以方便包含在我们的音乐库中</p>
            <p>
                <label>
                    <input type="file" multiple="multiple" />
                </label>
            </p>
        </fieldset>
        <p>
            <input type="submit" value="提交" class="btn" />
        </p>
    </form>
</body>
</html>

博文最后更新时间： 2022-11-10T10:58:53Z

爱校码

Web前端开发基础系列：表单

一、表单构成

二、表单属性

2.1 表单常用属性

2.1.1 `action`属性

2.1.2 `method`属性

2.1.3 `name`属性

2.2 H5新增表单属性

2.2.1 `autocomplete`属性

2.2.2 `novalidate`属性

2.3 表单的其他属性

2.3.1 `enctype`属性

2.3.2 `target`属性

三、`<Input/>`标记元素及其属性

3.1 `<Input/>`标记元素的type属性

3.2 `<Input/>`标记元素的其他属性

3.2.1 `autofocus`属性

3.2.2 `form`属性

3.2.3 `list`属性

3.2.4 `multiple`属性

3.2.5 `min`、`max`和`step`属性

3.2.6 `pattern`属性

3.2.7 `placeholder`属性

3.2.8 `required`属性

四、其他表单控件标记元素

4.1 `textarea`标记元素

4.2 `select`标记元素

4.3 `datalist`标记元素

4.4 `label`标记元素

4.5 `fieldset`标记元素

五、`CSS`控制表单样式

六、综合案例

信息统计

爱校码

Web前端开发基础系列：表单

一、表单构成

二、表单属性

2.1 表单常用属性

2.1.1 action属性

2.1.2 method属性

2.1.3 name属性

2.2 H5新增表单属性

2.2.1 autocomplete属性

2.2.2 novalidate属性

2.3 表单的其他属性

2.3.1 enctype属性

2.3.2 target属性

三、<Input/>标记元素及其属性

3.1 <Input/>标记元素的type属性

3.2 <Input/>标记元素的其他属性

3.2.1 autofocus属性

3.2.2 form属性

3.2.3 list属性

3.2.4 multiple属性

3.2.5 min、max和step属性

3.2.6 pattern属性

3.2.7 placeholder属性

3.2.8 required属性

四、其他表单控件标记元素

4.1 textarea标记元素

4.2 select标记元素

4.3 datalist标记元素

4.4 label标记元素

4.5 fieldset标记元素

五、CSS控制表单样式

六、综合案例

信息统计

2.1.1 `action`属性

2.1.2 `method`属性

2.1.3 `name`属性

2.2.1 `autocomplete`属性

2.2.2 `novalidate`属性

2.3.1 `enctype`属性

2.3.2 `target`属性

三、`<Input/>`标记元素及其属性

3.1 `<Input/>`标记元素的type属性

3.2 `<Input/>`标记元素的其他属性

3.2.1 `autofocus`属性

3.2.2 `form`属性

3.2.3 `list`属性

3.2.4 `multiple`属性

3.2.5 `min`、`max`和`step`属性

3.2.6 `pattern`属性

3.2.7 `placeholder`属性

3.2.8 `required`属性

4.1 `textarea`标记元素

4.2 `select`标记元素

4.3 `datalist`标记元素

4.4 `label`标记元素

4.5 `fieldset`标记元素

五、`CSS`控制表单样式