html5 表单

最新推荐文章于 2021-07-20 16:36:23 发布

原创最新推荐文章于 2021-07-20 16:36:23 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML5中新增的表单元素及属性，包括日期选择器、datalist、keygen等元素，以及autocomplete、autofocus等属性，并详细解释了它们的功能和用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单主要的输入类型

Input type	IE	Firefox	Opera	Chrome	Safari
email	No	4.0	9.0	10.0	No
url	No	4.0	9.0	10.0	No
number	No	No	9.0	7.0	No
range	No	No	9.0	4.0	4.0
Date pickers	No	No	9.0	10.0	No
search	No	4.0	11.0	10.0	No
color	No	No	11.0	No	No

Input 类型 - Date Pickers（日期选择器）

HTML5 拥有多个可供选取日期和时间的新输入类型：

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

表单元素

dataList元素

类似于一个下拉框

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

<span style="font-size:18px;">Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist></span>

keygen 元素

加密工具

<span style="font-size:18px;"><form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form></span>

返回的是加密的字符串

HTML5 的新的表单属性

新的 form 属性：

autocomplete
novalidate

新的 input 属性：

autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

autocomplete

autocomplete="on/off" on 表示自动之前的记录值，off表示不自动填充上次记录值

autofocus 属性

页面展示的时候自动获取焦点,如果同时有两个，默认第一个得到焦点

form

<span style="font-size:18px;"><form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" /></span>

通常的只会提交form表单范围内的，在input中使用新的form属性，也能一起提交

list属性

当有datalist的时候，类似于上面的下拉框

multiple属性

当input上传文件的时候multiple=“multiple”,用于type 等于email或者file，type=“file”是上传文件，加了这一行，只能选择一个文件

novalidate 属性

novalidate =“novalidate ”加了则一行，之前的email，url等校验无效

pattern 属性

正则校验

<span style="font-size:18px;"><input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" /></span>

placeholder 属性

类似于value的属性，但是不会提交，只是提示

required 属性

校验非空