There is even more up to date forms guidance on our new Web Fundamentals site.
在撰写本文时,所有新的表单和输入元素以及属性和类型的支持情况都会因浏览器的不同而存在很大差异。甚至在支持特定功能的各个浏览器之间,它们的行为也会互不相同。但 HTML5 表单的支持情况变化很快,且仍在不断改进。在撰写本文时,这些图表是我能找到的最新图表,它们详细说明了各个浏览器对 HTML5 表单的支持情况。
HTML5 引入了 5 种有关输入和表单的新元素。
元素 | 用途 | 注释 |
---|---|---|
progress |
用于表示任务已完成。 | progress 元素可用于表示文件的上传进程。 |
meter |
用于表示已知范围内的标量测量值。 | meter 元素可用于表示温度或重量等测量值。 |
datalist |
用于表示一组 option 元素,您可以将这些元素与新输入属性 list 配合使用,以制作下拉菜单。 |
如果对焦到带有数据表的输入,系统就会显示一个下拉菜单,其中包含 datalist 中的值。 |
keygen |
用于生成密钥对的控件。 | 提交表单时,系统会将私钥保存在本地密钥库中,并将公钥发送到服务器。 |
output |
用于显示计算结果。 | 例如,output 元素可用于显示两个输入元素值的总和。 |
HTML5 引入了 13 种新的输入类型。如果在不支持这些输入类型的浏览器中查看,系统就会使用后备的文字输入。
输入类型 | 用途 | 注释 |
---|---|---|
tel |
用于输入电话号码。 | tel 不执行特定语法,因此如果您想确保特定的格式,可以使用 pattern 或setCustomValidity() 执行额外的验证。 |
search |
用于提示用户输入要搜索的文字。 | search 和 text 之间的区别主要在于样式上。使用 search 输入类型可能会导致输入字段的样式与平台的搜索字段相一致。 |
url |
用于输入单个网址。 | url 用于输入单个表示很大范围值的绝对网址。 |
email |
用于输入单个电子邮件地址或电子邮件地址列表。 | 如果指定了 multiple 属性,就可以输入多个电子邮件地址,以逗号分隔。 |
datetime |
用于输入时区设置为 UTC 的日期和时间。 | |
date |
用于输入不含时区的日期。 | |
month |
用于输入含年份和月份但不含时区的日期。 | |
week |
用于输入含年份和周数但不含时区的日期。 | 例如,此格式的日期 2011-W05 表示 2011 年的第 5 周。 |
time |
用于输入含小时、分钟、秒和秒的小数部分但不含时区的时间值。 | |
datetime-local |
用于输入不含时区的日期和时间。 | |
number |
用于输入数字。 | 有效值为浮点数。 |
range |
用于输入数字,但与 number 的区别在于无需输入具体数字。 |
在大部分支持该类型的浏览器中,范围控件的实施形式为滑块。 |
color |
用于通过颜色池控件选择颜色。 | 值必须为有效的小写简单颜色,例如 #ffffff。 |
HTML5 还为输入和表单元素引入了几种新属性。
属性 | 用途 | 注释 |
---|---|---|
autofocus |
用于在网页加载后对焦到相关元素上的输入。 | autofocus 的目标可以是输入、选择、文本区域和按钮。 |
placeholder |
用于提示用户应输入的数据类型。 | 在对焦到相关元素以及用户输入数据之前,系统会以浅色文字显示占位符值。您可以在输入和文本区域中指定该值。 |
form |
用于指定输入元素所属的一或多个表单。 | 借助 form 属性,您可以将输入元素放在网页的任何位置上,而不是只能放在表单元素中。同时,单个输入元素可与多个表单关联。 |
required |
用于表示必填元素的布尔值属性。 | required 属性有助于在不使用自定义 JavaScript 的情况下执行基于浏览器的验证。 |
autocomplete |
用于指定浏览器不应根据用户的历史记录自动填充或预先填充某个字段。 | autocomplete 属性可用于信用卡号或一次性密码等您不想自动填充的字段。默认情况下,autocomplete 处于 on 状态,因此如果您想停用该属性,请将其设置为 off 。 |
pattern |
用于根据正则表达式验证元素的值。 | 在使用 pattern 时,您也应指定 title 值,以便向用户提供预期模式的说明。 |
dirname |
用于随表单提交控件的方向。 | 例如,如果用户按从右到左的方向输入文本数据,且输入元素包含 dirname 属性,那么系统就会将指明从右到左方向的内容随输入值一起提交。 |
novalidate |
在表单元素上指定该属性即可停用表单提交验证。 | |
formaction |
用于覆盖表单元素上的 action 属性。 | input 和 button 元素支持此属性。 |
formenctype |
用于覆盖表单元素上的 enctype 属性。 | input 和 button 元素支持此属性。 |
formmethod |
用于覆盖表单元素上的 method 属性。 | input 和 button 元素支持此属性。 |
formnovalidate |
用于覆盖表单元素上的 novalidate 属性。 | input 和 button 元素支持此属性。 |
formtarget |
用于覆盖表单元素上的 target 属性。 | input 和 button 元素支持此属性。 |
在对 XMLHttpRequest 的多项改进中,有一项是引入了 FormData 对象。借助 FormData 对象,您可以创建并发送一组密钥/值对,也可以选择使用 XMLHttpRequest 创建并发送文件。使用此技术时,数据的发送格式与您通过表单的带 multipart/form-data
编码类型的 submit()
方法提交的数据相同。
FormData 提供了一种方法,供您使用 JavaScript 即时创建 HTML 表单,然后使用 XMLHttpRequest.send()
提交表单。下面是一个简单的示例:
var formData = new FormData();
formData.append("part_num", "123ABC");
formData.append("part_price", 7.95);
formData.append("part_image", somefile)
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://some.url/");
xhr.send(formData);
您也可以在提交表单前使用 FormData 将其他数据添加到现有表单中。
var formElement = document.getElementById("someFormElement");
var formData = new FormData(formElement);
formData.append("part_description", "The best part ever!");
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://some.url/");
xhr.send(formData);
实话实说吧,验证表单数据是一项十分令人厌烦的任务,但无论如何您都要去做。现在,为了执行客户端表单验证,您可能会编写一些自定义 JavaScript 代码或使用库执行某些操作,例如检查有效输入或在表单提交前确保必填字段均已填写。
与 CSS 伪类选择器配合使用的 required
和 pattern
等新输入属性可让您更轻松地编写检查代码并向用户显示反馈。借助其他一些先进的验证技术,您还可以使用 JavaScript 设置自定义验证规则和讯息,或者确定元素是否无效以及无效原因。
required
属性 在提交表单时,带 required
属性的字段必须包含值。以下必填电子邮件地址输入字段的示例用于确保该字段包含一个值,且这个值是有效的电子邮件地址(具体定义请点击此处)。
<input type="email" id="email_addr" name="email_addr" required />
pattern
属性 您可以通过 pattern
属性指定用于验证输入字段的正则表达式。此示例表示一个部件号的必填文本输入字段。在此示例中,我们假设部件号由三个大写字母和紧随其后的四个数字组成。使用 required
和 pattern
可确保该字段包含一个值,且这个值符合部件号的正确格式。如果用户将鼠标悬停在该字段上,系统就会显示 title
属性中的讯息。
<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>
在此示例的基础上,如果输入的部件号无效,您也可以将输入字段的边框描成红色。要在值无效的情况下在输入字段周围显示红色边框,请添加以下 CSS。
:invalid {
border: 2px solid #ff0000;
}
formnovalidate
属性 formnovalidate
属性适用于 input
或 button
元素。使用该属性可停用表单提交验证。在以下示例中,通过“提交”按钮提交表单需要有效输入,但通过“保存”按钮提交则不需要。
<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Part numbers consist of 3 uppercase letters followed by 4 digits."/>
<input type="submit" formnovalidate value="Save">
<input type="submit" value="Submit">
constraint validation API 为您提供了处理自定义验证的强大工具。您可以通过该 API 执行设置自定义错误、检查元素是否有效以及确定元素无效原因等操作。在以下示例中,如果两个字段中的值不一致,系统就会显示自定义错误。
<label>Email:</label>
<input type="email" id="email_addr" name="email_addr">
<label>Repeat Email Address:</label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)">
<script>
function check(input) {
if (input.value != document.getElementById('email_addr').value) {
input.setCustomValidity('The two email addresses must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
以下预订请求表单示例综合使用了各种输入类型、表单验证以及 CSS 选择器和样式。
表单的 HTML 和 JavaScript 如下:
<form oninput="total.value = (nights.valueAsNumber * 99) +
((guests.valueAsNumber - 1) * 10)">
<label>Full name:</label>
<input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required>
<label>Email address:</label>
<input type="email" id="email_addr" name="email_addr" required>
<label>Repeat email address:</label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" required
oninput="check(this)">
<label>Arrival date:</label>
<input type="date" id="arrival_dt" name="arrival_dt" required>
<label>Number of nights (rooms are $99.00 per night):</label>
<input type="number" id="nights" name="nights" value="1" min="1" max="30" required>
<label>Number of guests (each additional guest adds $10.00 per night):</label>
<input type="number" id="guests" name="guests" value="1" min="1" max="4" required>
<label>Estimated total:</label>
$<output id="total" name="total">99</output>.00
<br><br>
<label>Promo code:</label>
<input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}"
title="Promo codes consist of 6 alphanumeric characters.">
<input type="submit" value="Request Reservation" />
</form>
<script>
function check(input) {
if (input.value != document.getElementById('email_addr').value) {
input.setCustomValidity('The two email addresses must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
表单代码所带的 CSS 如下:
:invalid {
border-color: #e88;
-webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
box-shadow:0 0 5px rgba(255, 0, 0, .8);
}
:required {
border-color: #88a;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
box-shadow: 0 0 5px rgba(0, 0, 255, .5);
}
form {
width:300px;
margin: 20px auto;
}
input {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border:1px solid #ccc;
font-size:20px;
width:300px;
min-height:30px;
display:block;
margin-bottom:15px;
margin-top:5px;
outline: none;
-webkit-border-radius:5px;
border-radius:5px;
}
input[type=submit] {
background:none;
padding:10px;
}
特别声明,本文转载来源于Html5Rocks。如需转载,请注明来源:http://www.html5rocks.com/zh/tutorials/forms/html5forms/
文章浏览阅读7.8k次。文档中主要描述 Full OTA 升级和 Incremental OTA 两种升级方式。_ota 升级包 /sdcard/data/
文章浏览阅读1.2w次。老男孩培训第一天1.什么是Linux?什么是windows?是一个操作系统(os),Operating System,个人电脑使用.手机系统:安卓(Linux)\IOS(Unix)什么是Linux?是一个操作系统(os),Operating System,用于服务器端(linux),存放网站的内容(给用户看).www.jd.com,www.baidu.com 存储用户数据的服务器可能有上万-10万台.Linux系统.2.Linux系统作用是一个基础系统软件,向下管理硬件,向上管理应用_tv5 . top
文章浏览阅读1k次。出殡当天早上,尼克到纽约去找______答:沃尔夫山姆下列哪些健康理念是错误的( )答:没有病就是健康;有病就治,无需保健;治好疾病,就是健康个人为社会提供的物质财富是对人生价值进行评价的唯一标准答:×在确定执行审计工作的前提时,下列有关被审计单位管理层责任的说法中,注册会计师认为正确的有答:被审计单位管理层应当允许注册会计师接触所有必要的相关人员 被审计单位管理层应当负责按照适用的财..._通常,能充分发挥高效能钢材的受拉作用
文章浏览阅读8.3k次,点赞2次,收藏5次。copy from zhujiamin一、介绍FFmpeg4.2支持AV1、AVS2等视频编码格式,但本身并不包含解码器,需要自己集成。集成的编解码器要避开GPL开源协议(–enable-gpl),因此不能用x264、AVS2等编解码器我在研究FFmpeg升级时,寻找能提升多媒体系统表现力的新特性,发现FFmpeg支持的基于BSD协议的dav1d解码器比较有价值,能大幅度提高AV1软解码性能,没有代码开源的风险,并且能持续迭代更新AV1是由AOM(Alliance for Open Media,开_ffmpeg av1
文章浏览阅读693次。众所周知Python常用的版本有2.x和3.x,常常会引起版本问题。由于我在Linux系统中已经安装有Python3.x和对应的TensorFlow,现在遇到需要跑在Python2.x下的TensorFlow工程时,就很麻烦,因此可以用Anaconda来建立一个独立的小环境来另外安装Python2.x及其对应的TensorFlow来跑这个工程。AnacondaAnaconda(官网)是什么..._source activate py36
文章浏览阅读8.5k次,点赞9次,收藏44次。 近期对3D引擎的架构设计做了一个梳理总结,现在开发游戏都离不开引擎,这些引擎包括Unity引擎,虚幻引擎,Cocos2dx引擎,自研引擎等等。很多开发者只会利用他们写逻辑,遇到优化问题就束手无策了,遇到Shader编程以及优化就感到头疼,长此以往对自己技术提升非常不利的。要改变现有的状态,就必须要系统的学习相关3D引擎技术,这样才能在使用引擎开发产品时得心应手。本篇博客从两方面给读者做..._二三维引擎
文章浏览阅读245次。只要是参加了高考的同学,都会关心每个高校的分数线,因为只要在分数线内的就有读大学的机会。但是不同的学校对分数线的定义是不同的,所以大家要时刻关注就读院校的分数线,以便及时报读。接下来就给大家介绍下成都市蜀兴计算机职业中学的分数线,以供参考。成都市蜀兴计算机职业中学所属地普通高中2020年录取分数线招生学校录取分数川师大附中599盐道街中学565成都市十七中543田家炳中学553电子科大实验中学57...
文章浏览阅读5.5k次,点赞34次,收藏36次。本文从数据库服务器底层硬件介绍,什么是服务器,结合CSAPP中的第4、6、9章的存储器层次结构、虚拟内存、处理器体系结构,分析MySQL服务器需要做的一些优化,并给出优化建议。_数据库优化硬件优化
文章浏览阅读5.9k次,点赞10次,收藏72次。【信息系统项目管理师】高项知识框架–考点大汇总_高项管师章节重点知识归纳
文章浏览阅读6.4k次,点赞3次,收藏28次。ASP.NET网站制作1、ASP.NET页面对象1网页脚本当客户端通过客户浏览器发送HTTP请求时,web服务器将HTML文档部分和脚本部分返回给客户端浏览器,在客户端浏览器中解释执行并及时更新页面,脚本处理工作全部在客户端浏览器执行完成。优点: 减轻服务器负荷,同时增加页面的反应速度。缺点:浏览器差异性导致页面差异支持的语言: JavaScriptJScript VBScript(2)服务端脚本..._asp.net网站制作
文章浏览阅读3k次,点赞10次,收藏54次。总的来说,OTA实现方案分为两种,一种与通常的刷写方式一样,即先擦除当前版本软件,再刷写新版本软件,但这种方法有个隐患,就是新软件有问题时,由于旧软件已经被擦除,没有备份,恢复会很麻烦,因此就提出了另一种,即A/B交换。(Firmware-Over-the-Air),是指不改变车辆原有配件的前提下,通过写入新的固件程序,使拥有联网功能的设备进行升级,包括车辆的发动机,电机,变速箱,底盘等控制系统,比如特斯拉曾通过FOTA新增过自动驾驶功能、增加过电池容量和改善过刹车距离等。,那都将是一项很繁重的任务。_sota和ota的区别?
文章浏览阅读744次。近来发现数据库过大,空间不足,因此打算将数据库的数据进行全面的清理,但表非常多,一张一张的清空,实在麻烦,因此就想利用SQL语句一次清空所有数据.找到了三种方法进行清空.使用的数据库为MS SQL SERVER.1.搜索出所有表名,构造为一条SQL语句declare @trun_name varchar(8000)set @trun_name=''select_548数据库清库