HTML5表单详解

本文链接： https://blog.csdn.net/weixin_44196299/article/details/102137199

HTML表单是页面与WEB服务器交互过程中最重要的信息来源，有了它我们才能在Web上进行各种各样的应用,才能和服务器进行方便快捷的交互，其在网页中的作用不可小视，负责获取用户填写数据，并通过浏览器向服务器传送数据。

一个表单有三个基本组成部分：
表单标签：这里面包含了处理表单的数据所用程序的URL以及数据提交到服务器的方法，表单名等。
语法：<form action="服务器程序URL（提交到给谁处理）" method=" get/post" enctype=" MIME信息" target="文档显示方式" >表单详细设置</form>

action属性：定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页或指定了某服务器脚本来处理被提交表单：<form action="action_page.php">，如果省略 action 属性，则 action 会被设置为当前页面。
method 属性：规定在提交表单时所用的 HTTP 方法（GET 或 POST）。（何时使用get方法，如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的，注意GET 最适合少量数据的提交。浏览器会设定容量限制。何时使用 POST？如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。）
name 属性：如果要正确地被提交，每个输入字段必须设置一个 name 属性。
示例：

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 
// 本例中只会提交Last name的输入字段，First name输入字段由于没有name属性因此不会提交

target属性：规定action属性中地址的目标（默认_self）
enctype属性：规定被提交数据的编码（默认：url-encoded）。可能的值：
application/x-www-form-urlencoded
multipart/form-data
text/plain

注：我们还可以使用<fieldset> 组合表单数据，<legend> 元素为 <fieldset> 元素定义标题，示例：

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

页面效果：
在这里插入图片描述
当点击提交按钮时服务器接收到的用户输入为"firstname=Mickey&lastname=Mouse"

表单域：包括了文本框（text），密码框（password），隐藏域（hidden），复选框（checkbox），单选框（radio），文件上传框（file），
多行文本框（基本语法：<textarea name="" col="" row="" wrap="" ></textraea>）
下拉选择框（基本语法：<select name=""><option value="" selected（表示默认选择本项显示在下拉菜单上）>广州</option></select>）等。

表单按钮：包括提交按钮（submit），复位按钮（reset），一般按钮（button），图片按钮（image）

HTML5 中表单元素新增了许多新控件及其API，方便我们做更复杂的应用，而不用借助于JavaScript，HTML5表单功能扩展：

1、表单结构更加自由
在HTML4中，表单内的从属元素必须书写在表单内部，而在HTML5中，可以把它们书写在页面上任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        姓名：<input type="text" name="realname" form="form1"/>
        <form id="form1" method="get">
            <button>提交</button>
        </form>
    </body>
</html>

运行结果：
在这里插入图片描述
2、新增表单元素
HTML5 增加了如下表单元素：

<datalist>
<keygen>
<output>
<progress>
<meter>

datalist元素：<datalist> 元素为 <input> 元素规定预定义选项列表，用户会在他们输入数据时看到预定义选项的下拉列表，<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

页面效果：
在这里插入图片描述
注意： Safari或IE9（以及更早的版本）不支持datalist标签。

keygen元素：<keygen>元素的作用是提供一种验证用户的可靠方法。
<keygen>元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

页面效果：
在这里插入图片描述
输入以后点击提交：

注意： Safari和IE浏览器不支持keygen标签。

output元素：<output> 标签定义不同类型的输出，比如脚本的输出，参数有

for：定义输出域相关的一个或多个元素。
form：定义输入字段所属的一个或多个表单。
name：定义对象的唯一名称。（表单提交时使用）

示例：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form>

页面效果：
在这里插入图片描述
注意：IE 8 以及更早的版本不支持 <output> 标签。

progress元素：表示一个任务完成的进度。
示例：

<progress value="22" max="100"></progress>

页面效果：
在这里插入图片描述
注：
1、Internet Explorer 9 以及更早的版本不支持 <progress> 标签。
2、<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <meter> 标签代替。

meter元素：定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。例如磁盘用量、查询结果的相关性等等。
示例：

<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>

页面效果：
在这里插入图片描述

3、新增表单属性

formmethod属性：在HTML4中，一个表单只有一个action属性来对表单内所有元素统一指定提交页面，所以每个表单内也只有一个method属性来指统一指定提交方法。在HTML5中，可以使用formaction属性来对每个表单元素分别指定不同的提交页面，同时也可以使用formmethod属性来对每个表单元素分别指定不同的提交方式，示例：

<form id="testform" action="serve.jsp">
	<input type="submit" name="s1" value="v1" formaction="s1.jsp" formmethod="post">提交到s1
	<input type="submit" name="s2" value="v2" formaction="s2.jsp" formmethod="get">提交到s2
	<input type="submit">
</form>

formaction属性：在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在HTML5中可以为所有的提交按钮，增加不同的formaction属性，使得单击不同的按钮可以将表单提交到不同的页面。
示例：

<form id="testform" action="serve.jsp">
	<input type="submit" name="s1" value="v1" formaction="s1.jsp">提交到s1
	<input type="submit" name="s2" value="v2" formaction="s2.jsp">提交到s2
	<input type="submit" name="s3" value="v3" formaction="s3.jsp">提交到s3
	<input type="submit">
</form>

formentype、formnovalidate、formtarget属性
使用方法与formaction、formmethod属性一致，设置在提交按钮上，可以覆盖表单的相应属性。
formenctype - 重写表单的 enctype 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性

placeholder属性：placeholder是指当文本框（<input type="text">或<textarea>）处于未输入状态时文本框显示的输入提示。当文本框处于未输入状态并且未获取光标焦点时模糊显示提示文字。
示例：

<input type="text" placeholder="input in">

autofocus属性：给文本框、选择框或按钮控件添加该属性，画面打开时控件自动获得光标焦点，之前做到这一点需要使用JavaScript，譬如control.focus().
示例：

<input type="text" autofocus>

注意：一个页面只能有一个控件使用该属性，注意不要滥用该属性。

list属性：在HTML5中，为单行文本框（<input type="text">）增加一个list属性，该属性的值为某个datalist元素的id。
注：为什么没有把input元素与datalist元素结合成一个元素，像其他语言中的可输入框那样？这是基于兼容性考虑：在不支持HTML 5的浏览器中，可以忽略datalist元素，以便正常输入及用脚本编程的方式对input元素执行其他操作。

autocomplete属性：在HTML5之前因为谁都可以看见输入的值，所以存在安全隐患，但只要使用autocomplete属性，安全性可以得到很好的控制。
对于autocomplete属性可以指定"on"、“off"与”"（不指定）这三种值。不指定时，使用浏览器的默认值（取决于各浏览器的决定）。把该属性设为"on"时，可以显式指定候补输入的数据列表，自动完成时，可以将该datalist元素中的数据作为候补输入的数据在文本框中自动显示。
示例：

<input type="text" name="greeting" autocomplete="on" list="greetings">

multiple属性：multiple属性也必须设置布尔值，可以用在一些输入类型中，如email或file，从而支持在同一域中输入多个值。所插入的值必须用逗号分隔。
示例：

<input type="email" name="myemail" id="myemail" multiple>

4、input属性的扩展
⑴邮箱输入：
几乎每个表单都会使用输入域接收电子邮件地址，但目前唯一支持这种数据的输入类型是text。Text表示一般文字，而非特殊字符，所以必须使用JavaScript控制输入数据，确认所插入内容是一个有效的电子邮件地址。
现在有了email类型，浏览器会检查输入域中插入的文字，验证其是否为合法的电子邮件地址。如果验证失败，表单就不会发送。示例：

<input type="email" name="myemail" id="myemail">

各种浏览器有不同的无效输入响应方式。例如，在表示错误信息时，一些浏览器会在<input>元素周围显示红色框，另一些浏览器则显示蓝色框。也可以定制错误响应方式。

⑵搜索类型：
Search类型不能控制输入，作用是指示浏览器。示例：

<input type="search" name="mysearch" id="mysearch">

有一些浏览器会修改元素的默认设计，显示一个搜索小图标，向用户提示域的用途，Chrome浏览器中右边会出现一个清除符号。
页面效果：
在这里插入图片描述

⑶URL类型：
这种类型的作用与email完全相同，但主要针对网址。只接受绝对URL，如果输入无效URL会显示错误信息。示例：

<input type="url" name="myurl" id="myurl">

⑷电话号码类型：

这种类型主要针对电话号码。Tel类型没有规定特殊的语法，作用是指示浏览器，该应用程序需要根据不同的设备进行调整。示例：

<input type="tel" name="myphone" id="myphone">

⑸数字类型：
Number类型只能接受数字值。这个域还可以使用其他一些新属性：

min：这个属性决定了域所能接受的最小值
max：这个属性决定了域所能接受的最大值
step：这个属性值决定了域所能接受值递增或递减的步长。例如，如果步长设置为5，最小值为0，最大值为10，那么浏览器就不允许输入0 ~ 5和5 ~ 10之间的值。

示例：

<input type="number" name="mynumber" id="mynumber" min="0" man="10" step="5">

不一定要同时设置min和max，step的默认值是1。

⑹范围类型：
这是一种新增域类型。这种新控件允许用户选择一个范围的数值，通常会显示为滑块或箭头，用于增大或缩小数值，但目前还没有标准设计。
Range类型使用属性min和max，设置范围的下限值和上限值，此外还可以设置属性step，声明设置该值递增或递减的步长。示例：

<input type="range" name="mynumbers" id="mynumbers" min="0" max="0" step="5">

使用旧的value属性，可以设置元素的初始值；使用JavaScript可以在屏幕上显示数值。

⑺日期类型：
这是一种新控件，用来创建一个日期输入域。浏览器使用日历实现这个功能，用户可以单击域选择时间。用户可以选择日历中的一天，浏览器会将它与其他日期一同插入输入框中。示例：

<input type="date" name="mydate" id="mydate">

标准并没有规定它的页面设计，每一种浏览器都有不同的界面，并且有时候会根据应用程序所运行的设备不同而调整设计。通常，这个控件值的格式是：year-month-day。

⑻周类型：
这种类型提供一种与date类类似的界面，但是只能选择周。通常，这个控件值的格式是：2016-W50，其中2016是年份，50是周数。示例：

<input type="week" name="myweek" id="myweek">

⑼月份类型：
这种类型与周类型类似，但是只能选择一个月份。通常，这个控件值的语法是：year-month。示例：

<input type="month" name="mymonth" id="mymonth">

⑽时间类型：
Time类型与date类型，但是只能选择时间。它的格式包括小时和分钟，但其具体行为取决于不同浏览器的实现。通常，它的值的格式为：hour:minutes:seconds，但也可以是：hour:minutes。示例：

<input type="time" name="mytime" id="mytime">

⑾日期与时间类型：
Datetime类型支持输入完整的日期和时间，其中还包括时区。示例：

<input type="datetime" name="mydatetime" id="mydatetime">

⑿本地日期与时间类型：
datetime-local类型是一种不带时区的datetime类型。示例：

<input type="datetime-local" name="mylocaldatetime" id="mylocaldatetime">

⒀颜色类型：
Color类型具有预定义的颜色拾取界面。通常，这个域的预期值是十六进制数，如#00FF00。示例：

<input type="color" name="mycolor" id="mycolor">

HTML5没有规定标准的color界面，但是浏览器都会使用一组包含基本颜色的网格界面。
示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>input元素的扩展</title>
    </head>

    <body>
        <h2>HTML5新的表单元素</h2>
        <form>
            <p>
                <label>姓名：</label>
                <input type="text" required="required"/>
            </p>
            <p>
                <label>相片：</label>
                <input type="file" multiple="multiple"/>
            </p>
            <p>
                <label>帐号：</label>
                <input type="text" name="username" autocomplete="on" required="required" pattern="^[0-9a-zA-Z]{6,16}$" />
                请输入a-zA-Z0-9且长度6-16位的字符
            </p>
            <p>
                <label>邮箱：</label>
                <input type="email" name="mail" id="mail" value="" placeholder="请输入邮箱"/>
            </p>
            <p>
                <label>博客：</label>
                <input type="url" name="blog" id="blog" value="" required="required" autofocus="autofocus"/>
            </p>
            <p>
                <label>生日：</label>
                <input type="date">
            </p>
            <p>
                <label>身高：</label>
                <input type="number" max="226" min="80" step="10" value="170" />
            </p>
            <p>
                <label>肤色：</label>
                <input type="color" onchange="document.bgColor=this.value" />
            </p>
            <p>
                <label>体重：</label>
                <input type="range" max="500" min="30" step="5" value="65" onchange="showValue(this.value)"/>
                <span id="rangeValue"></span>
            </p>
            <button formnovalidate="formnovalidate">提交</button>
            <script type="text/javascript">
                function showValue(val){
                    document.getElementById("rangeValue").innerHTML=val;
                }
            </script>
        </form>
    </body>

</html>

页面效果：
在这里插入图片描述
注：HTML5新增了上述这么多表单元素，那么怎么对这些元素使用样式呢？基本和其他元素一样，字体、颜色等对于样式的编辑，基本采用同样的方法。但如果你想把日历的背景改成浅蓝色，或者把number元素的增减按钮改大一些，这些修改时不可能的，目前为止还没有针对新元素的局部区域进行修改的样式。

5、表单验证

自动验证：在HTML5中，通过对元素使用属性的方法，可以实现在表单提交时执行自动验证的功能。
(1)required属性
HTML5中新增的required属性可以应用在大多数输入元素上（除了隐藏元素、图片元素按钮上）。在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户这个元素必须输入的内容。
示例：

<form>
	<p>
		<label>姓名：</label>
        <input type="text" required="required" />
    </p>
    <button>提交</button>
</form>

页面效果：
在这里插入图片描述
(2)pattern属性
之前提到的一些新增input元素例如email、number、url等，要求输入内容符合一定的格式，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定的格式时，则不允许提交，同时浏览器显示信息提示文字，示例：

<form>
	<p>
		<label>姓名：</label>
	        <input type="text" size="30" pattern="[0-9][A-Z]{3}" name="name" placeholder="请输入一个数字与三个大写字母" />
    </p>
    <button>提交</button>
</form>

页面效果：
在这里插入图片描述
如果需要添加自定义提示，只需要添加title属性即可，示例：

<input type="text" size="30" pattern="[0-9][A-Z]{3}" name="name" title="只允许输入一个数字与三个大写字母" />

页面效果：
在这里插入图片描述
(3)min属性和max属性
min和max这两个属性是数值类型或日期类型的input元素的专用属性，它们限制在input元素中输入的数值和日期的范围。示例：

<form>
	<p>
		<label>年龄：</label>
        <input type="number" name="age" min="0" max="100" />
    </p>
    <button>提交</button>
</form>

页面效果：
在这里插入图片描述

(4)step属性
step属性控制input元素中的值增加或减少时的步幅，示例：

<input type="number" name="age" step="5" min="0" max="100" />

在这里插入图片描述

显式验证
除了对input元素添加属性进行元素内容有效性的自动验证外，在HTML5中还引入了一系列表单约束验证方法与属性：
约束验证 DOM 方法：

属性	描述
checkValidity()	返回 true，如果 input 元素包含有效数据
setCustomValidity()	设置 input 元素的 validationMessage 属性

约束验证 DOM 属性：

属性	描述
validity	包含与 input 元素的合法性相关的布尔属性
validationMessage	包含当 validity 为 false 时浏览器显示的消息
willValidate	指示是否验证 input 元素。

form元素与input元素（包括select元素与textarea元素）都具有checkValidity方法，调用该方法，可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。checkValidity方法以boolean的形式返回验证结果，示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>input元素的扩展</title>
    <script language="javascript">
        function check() {
            var email = document.getElementById("email");
            if (email.value === '') {
                alert("请输入Email地址");
            } else if (!email.checkValidity()) {
                alert("请输入正确的email地址")
            } else {
                alert("您输入的email地址有效")
            }
        }
    </script>
</head>

<body>
    <h2>HTML5新的表单元素</h2>
    <form id="form">
        <p>
            <label>邮箱：</label>
            <input type="email" name="email" id="email" onblur="check()" />
        </p>
    </form>
</body>

</html>

页面效果：
在这里插入图片描述
在HTML5中，form元素与input元素都存在validity属性，该属性返回一个ValidityState对象，包含一系列关于 validity 数据属性，通过这些数据属性我们也可以进行表单数据验证。

属性	描述
customError	设置为 true, 如果设置了自定义的 validity 信息
patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性
rangeOverflow	设置为 true, 如果元素的值大于设置的最大值
rangeUnderflow	设置为 true, 如果元素的值小于它的最小值
stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置
tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度
typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型
valueMissing	设置为 true，如果元素 (required 属性) 没有值
valid	设置为 true，如果元素的值是合法的

注意：以上属性值是只读的，手动修改是无效的。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>输入数字并点击验证按钮:</p>

<input id="id1" type="number" max="100">
<button onclick="myFunction()">验证</button>


<p id="demo"></p>

<script>
function myFunction() {
    var txt = "";
    if (document.getElementById("id1").validity.rangeOverflow) {
        txt = "输入的值太大了";
    } else {
        txt = "输入正确";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

页面效果：
在这里插入图片描述
取消验证
有时我们可能想要把表单临时提交一下，但又不想让它们进行表单中所有元素内容的有效性检查，那我们需要取消表单元素的验证，目前有两种方法取消表单验证，第一种方法是利用form元素的novalidate属性，它可以关闭整个表单验证。第二种方法是利用input元素和submit元素的formnovalidate属性，利用input元素的formnovalidate属性可以让表单验证对单个input元素失效，而如果对submit按钮使用了formnovalidate属性，点击该按钮时，相当于利用了form元素的novalidate属性，整个表单验证都失效了。

自定义错误信息
HTML5中许多input元素都带有对输入内容有效性的检查，如果检查不通过，浏览器会针对该元素提供错误信息，即我们前面提到的validationMessage。
示例：

<form>
    <input type=text required />
    <input type=submit>
</form>

如果text中没有输入内容，点击提交按钮，会提示“请填写此字段。”

事件顺序如下：
（1）submit按钮的click事件，若取消默认事件，则终止
（2）html5表单验证和提示，若表单验证不通过，则提示第一个不合法输入，并终止
（3）form表单的submit事件，若取消默认事件，则终止

注意：
用js触发form的submit事件，会直接进入第（3）步，不会进行html5表单验证。
所以，要想出现html5的验证提示，必须经过submit按钮。

但有时我们不想用这些提供的默认错误信息提示，那么我们可以使用JavaScript调用各input元素的setCustomValidity方法来自定义错误信息，

注意：使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity() 总是会返回false，导致无论重新输入的格式正确与否，都会提示设置好的错误信息。

解决办法：用应该使用validity的数据属性例如badInput，customError，patternMismatch，rangeOverflow等等来判断，如果输入的格式正确，就将setCustomValidity 清空，使JavaScript重新判断validity.customError的值。

其中，取消自定义提示的方式如下：

setCustomValidity('') 
setCustomValidity(null) 
setCustomValidity(undefined)

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>
<body>
    <form name="test" action="." method="post">
        <input id="input" type="text" required="required" placeholder="请输入4-11位字母加数字的密码" pattern="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{4,14}$" oninput="this.setCustomValidity('')">
        <input type="submit" onclick="setMyText()">
    </form>
    <script type="text/javascript">
        function setMyText(){
            var obj = document.getElementById("input");
            if (obj.validity.patternMismatch === true) {
                obj.setCustomValidity("请输入正确密码格式");
            } else {
                obj.setCustomValidity('');
            }
        }
    </script>
</body>
</html>

页面效果：
在这里插入图片描述

猜你喜欢