Web技巧(07)

在这一期中咱们一起来聊聊HTML5中的表单。说到HTML，可能很多同学会说，HTML5有什么好聊的，不就是一些HTML的标签吗？事实上并非如此，就拿HTML中的表单中的input元素为例吧，input元素及其相关属性和类型的支持情况都会因为浏览器的不同而存在较大的差异。甚至在支持特定功能的各个浏览器之间，它们的行为也会有所不同。那这一期中，就来围绕着input说点事。

input的现状

有关于HTML5（或者说HTML）中关于input相关的规范在HTML规范的第4.10.5一节中有详细的描述。主要包括了五个部分：

• input元素的type属性状态
• 表单控件本地化实现的一些说明
• input元素常见的一些属性（attributes）
• input元素通用的一些API
• input元素通用的一些事件行为

input的type属性

input的type属性决定了使用input元素的哪种类型，常见的type属性主要有：hidden、text、password、checkbox、radio、file、submit、reset、image和button（HTML4中提到的type属性）。在HTML5中除了具有前面提到的这些type类型之外还增加了**13**种新的type类型：

type类型	用途	备注
tel	用于输入电话号码	tel不执行特定语法，如果想确保特定格式，可以使用pattern或setCustomValidity()执行额外的验证
search	用于提示用户输入要搜索的关键词	search和text主要区别在于样式上。使用search输入类型可能会导致输入字段的样式与平台的搜索字段相一致
url	用于输入单个网址	url用于输入单个表示很大范围值的绝对网址
email	用于输入单个电子邮件地址或电子邮件址列表	如果指定了multiple属性就可以输入多个电子邮件地址，并且以逗号分隔
datetime	用于输入时区设置为UTC的日期和时间
date	用于输入不含时区的日期
month	用于输入含年份和月份但不含时区的日期
week	用于输入含牛份和周数但不含时区的日期
time	用于输入含时、分、秒和秒的小数部分，但不含时区的时间值
datetime-local	用于输入不含时区的日期和时间
number	用于输入数字	有效值为浮点数
range	用于输入数字	和number的区别在于无需输入具体数字。在大部分支持该类型的浏览器中，范围控件的实施形式为滑块
color	用一起通过颜色池控制选择颜色	值必须为有效的小写简单颜色，比如#fffff

input的属性（attributes）

这里所说的input属性是指**attributes**，它有一些通用属性：maxlenggth、minlength、size、readonly、required、multiple、pattern、min、max、step、list和placeholder。同样的，在HTML5中引入了一些新的属性：

属性	用途	备注
autofocus	用于在网页加载后对焦到相关元素上的输入	autofocus的目标可以是input、也可以是select、textarea或button
placeholder	用于提示用户应输入的数据类型	在对焦到相关元素以及用户输入数据之前，系统会以浅色文字显示占位符值。可以在样式重新定义其颜色
form	用于指定输入元素所属的一个或多个表单	借助form属性，可以将输入元素放在页面的任何位置处，而不只是放在<form>元素中。同时，单个输入元素可马多个表单关联
required	用于表示必填元素的布尔值属性	required属性有助于在不使用自定义JavaScript的情况下执行基于浏览器的验证
autocomplete	用于指定浏览器不应该根据用户的历史记录自动填充或预先填充某个字段	autocomplete属性可用于信用卡号或一次性密码等不想自动填充的字段。autocomplete的默认值是on状态（开启状态），如果你想停用该属性，需要手动将其设置为off（关闭状态）
pattern	用于根据正则表达式验证元素的值	在使用pattern时，你也应该指定title值，以便向用户提供预期模式的说明
dirname	用于随表单提交控件的方向	如果用户从右到械的方向输入文本数据，且input元素包含dirname属性，那么系统就会将指明从右到左方向的内容随输入值一起提交
novalidate	在表单元素上指定该属性即可停用表单验证
formaction	用于覆盖表单元素上的action属性
formenctype	用于覆盖表单元素上的enctype属性
formmethod	用于覆盖表单元素上的method属性
formnovalidate	用于覆盖表单元素上的novalidate属性
formtarget	用于覆盖表单元素上的target属性

其中formaction、formenctype、formmethod、formnovalidate和formtarget几个属性仅input和button元素支持。

其实，input的属性主要分为四大类：

• 内容属性（Content Attributes）：accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step 和 width
• IDL属性（IDL Attributes）：checked, files, value、valueAsDate, valueAsNumber, list , selectionStart，selectionEnd，selectionDirection
• 方法（Methods）：select()，setRanggeText()，setSelectionRange()，stepDown()和stepUP()
• 事件：input和change

不过上面三大类提到的属性还不是规范中内容，但下面表格中所描述的内容总结了内容属性、IDL属性、方法和事件适用于input元素中的哪种type。

有关于这部分更详细的描述可以点击这里进行了解。

input给用户体验带来的变化

或许很多同学在使用<input>表单元素时，不管是什么都只会使用text类型（除了复选框checkbox、单选按钮radio和button按钮）。这也可能是在PC时代遗留下来的所谓“习惯”吧，而事实上，进入移动端时代之后，如果仅使用text这种type已经无法满足用户所需。所以在HTML5中追加了一些不同的type类型，而之些type类型在移动端上使用表单<input>来输入内容时会带来更好的体验。比如：

正如上图所示，<input>元素设置不同的type属性的值在移动端中获得焦点时会调出不同的键盘。这些不同的键盘会让用户会有一个更好的体验，可以更快速的输入所需内容。除type的不同值能给用户操作表单有更好的体验之外，<input>还有一些**属性（Attributes）**也能让用户在操作表单时有一个更好的体验，比如readonly、required、minlength、maxlength、pattern、title、step、min、max和novalidate等属性。

上面说的是type和attributes相关值给用户在使用表单（特别是<input>）时有一个较好的体验，这两部分都是HTML中的部分，而在CSS中也有一些伪元素选择器能让表单更具较好的体验，比如:placeholder-shown、:required、:optional、:disabled、:read-only、:valid、:invalid、:in-range、:out-of-range和:checked等伪类选择器。下面这个就是一个很好的示例：

在使用表单时，不知道大家是否有留意过，<input>元素在不同内核的浏览器下具有独特的伪元素，而这些伪元素也可以帮你去优化表单元素的UI风格，让用户具有一个更好的UI。比如，

• type="checkbox"和type="radio"在Trident内核中可以使用::-ms-check
• type="color"在Webkit内核中可以使用::-webkit-color-swatch-wrapper 和 ::-webkit-color-swatch
• type="date"在Webkit内核中可以使用::-webkit-datetime-edit、::-webkit-datetime-edit-fields-wrapper、::-webkit-datetime-edit-text、::-webkit-datetime-edit-month-field、::-webkit-datetime-edit-day-field、::-webkit-datetime-edit-year-field、::-webkit-inner-spin-button和::-webkit-calendar-picker-indicator
• type="file"在Trident内核中使用::-ms-browse，Webkit内核中使用::-webkit-file-upload-button
• type="number"在Webkit中可以使用::-webkit-textfield-decoration-container, ::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button
• type="password"在Trident内核中使用::-ms-reveal

有关于不同内核下不同类型的input对应的伪元素可以查阅《伪元素控制表单样式》一文。

在使用表单时，都需要对表单进行验证，而上面提到的相关属性除了能让我们提高用户操作表单的体验之外也可以对表单做一些验证的操作。有关于表单验证的操作，更多的内容可以阅读下面这些文章：

• Native form validation — part 1
• Native form validation — part 2
• Native form validation — part 3
• 使用 HTML 和 CSS技巧对表单进行约束验证
• 约束验证 API
• 一个Validity State API Polyfill
• MailChimp订阅表单中的验证
• HTML5的表单验证属性:pattern

另外，有关于HTML5表单用户体验相关的更详细的介绍可以阅读：

• 使用HTML和CSS提高表单验证用户体验
• 利用 HTML5 美化表单
• 美化表单的CSS高级技巧
• HTML5 Input Types: Where Are They Now?
• UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 1)
• UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 2)

上面仅仅是表单体验中的一小部分而以，如果您对用户体验优化方面的内容感兴趣的话，不仿花点时间阅读uxmovement.com网站中有关于表单方面的内容。

input的inputmode属性

<input>的type类型可以让用户在移动端中获得焦点时显示相应的键盘类型。自2019年03月起，<input>和<textarea>元素新增了inputmode属性，该属性的值有点类似于<input>元素的type属性的值，让用户在移动端中可以获取到不同的键盘类型。

自iOS12.2版本以及Android系统的Chrome（包括Chrome、三星系统和Opear）以及所有iOS浏览器都支持该功能。

inputmode和<input>的type还是有所不同，inputmode不会更改浏览器的输入方式——它指示浏览器显示哪个键盘。

最早是在WHATWG Living标准中提出inputmode，但在W3C 5.2版本规范中又将其移出。既然WHATWG已经对其进行了文档化（也就是当作HTML标准规范的一部分），而且主流浏览器都支持它，那我们就可以假设WHATWG规范就是标准。

inputmode能接受的值有：none、numeric、tel、decimal、email、url 和 search几个值。文章开头提到过，很多前端同学使用input的时候，都习惯性的喜欢使用type="text"，那么有了inputmode属性时，可以将使用该属性来实现类似于type的相关值。也就是说，在使用inputmode时，type的值都将是text，对于<textarea>可以直接设置inputmode。不过有一点需要特别提出：

当inputmode取值为none时，在Android系统的浏览器中不会显示键盘；而在iOS 12.2系统中将显示其默认的字母数字键盘。因此在iOS系统中可以将inputmode的值设置为none来重置iOS系统下键盘。

在实际使用时，inputmode取不同值时，Android和iOS系统下看到的效果大致如下：

来个简单的例子：

如果你想了解inputmode更详细的内容可以阅读 @Christian Oliff的《Everything You Ever Wanted to Know About inputmode》一文。

HTML中其他有意思的元素

在Web中常常会需要处理Progress Bar（常称进度条）的需求，比如：

常常我们都是使用div结合CSS和JavaScript来实现。实现进度条的方法有很多种，比如@FreeFrontend 这里搜集了很多种进度条的效果。除了这些，Codepen上也有很多关于进度条实现的方法和效果：

时至今日，HTML5中的部分元素也能实现类似进度条的效果，比如meter、progress。使用这两个元素，我们可以很轻易的在Web中实现类似下图这样的效果：

progress实现进度条的效果

<progress>元素的使用非常的简单：

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

在Webkit或Blink内核的浏览器中可以借助伪元素-webkit-progress-bar和-webkit-progress-value来美化进度条的样式：

progress {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    height: 40px;
    width: 300px;
    margin: 50px;
}
progress::-webkit-progress-bar {
    background: #ccc;
    box-shadow: inset 0px 0px 10px 5px #aaa;
    border-radius: 20px;
}
progress::-webkit-progress-value {
    background-image: repeating-linear-gradient(45deg, #FF94AA, #FF94AA 8px, #FF7799 8px, #FF7799 16px);
    border-radius: 20px;
}

有关于<progress>更进一步的介绍，可以阅读下面几篇文章：

• The HTML5 progress Element
• Cross Browser HTML5 Progress Bars In Depth

meter实现进度条的效果

使用<meter>得到的效果和<progress>有点类似，都可以实现类似进度条的效果。而且其使用方式也非常的简单：

<meter min="0" low="10" optimum="50" high="90" max="100"></meter>

对于设置<meter>元素的样式也可以通过一些伪元素来完成，比如：

有关于<meter>更详细的介绍可以阅读：

• The HTML5 meter Element
• Password Strength meter

另外还有一种滑块的效果：

实现这样的效果，在HTML中也有相关的元素可以帮助我们来实现的。input type="range"和output结合，比如下面这个示例：

一个是滑块，一个是输出值：

有关于output和type="range"更多的介绍可以阅读：

• output元素
• Value Bubbles for Range Inputs
• Styling Cross-Browser Compatible Range Inputs with CSS
• A Sliding Nightmare: Understanding the Range Input
• 使用圆锥渐变和CSS自定义属性创建一个Range Input控制的环形图

details 和 summary 实现无JavaScript的交互效果

在Web中很多交互效果都会依赖于JavaScript来实现，比如手风琴（Accordion）、下拉菜单（Dropdown Menu）、提示框（Tooltips）、Tabs等。有了<details>和<summary>元素之后，这些效果我们都可以通过他们来实现，比如下面这个效果：

有关于<details>和<summary>详细的介绍可以阅读《借助HTML5 details,summary无JS实现各种交互效果》一文。在Codepen上有很多相关的示例。

datalist实现下拉选择框

对于<select>效果对于Web前端开发同学而言并不陌生，很多时候为了个性化的效果，会通过div配合JavaScript来模拟一个下拉选择框的效果。在HTML5中，有一个新的元素<datalist>，配合带有list的<input>元素，也可以实现一个类似下拉选择框的效果：

<label>Select your preferred code editor:</label>
<input type="text" id="txt_ide" list="ide" />
<datalist id="ide">
    <option value="Brackets" />
    <option value="Coda" />
    <option value="Dreamweaver" />
    <option value="Espresso" />
    <option value="jEdit" />
    <option value="Komodo Edit" />
    <option value="Notepad++" />
    <option value="Sublime Text 2" />
    <option value="Taco HTML Edit" />
    <option value="Textmate" />
    <option value="Text Pad" />
    <option value="TextWrangler" />
    <option value="Visual Studio" />
    <option value="VIM" />
    <option value="XCode" />
</datalist>

<datalist>中包含多个<option>元素（类似于<select>），它使用list属性添加或附加到<input type="text">元素上。其实除了，type="text"之外，datalist还可以运用于type="url"、type="tel"和type="color"等input上。来看一个<datalist>的案例：

有关于<datalist>更详细的介绍可以阅读@Muhammad Ahmad Zafar 在2012年写的一篇教程《Introducing the HTML5 datalist Element》。

小结

这一期主要围绕着HTML中<input>的元素来展开，HTML5中给该元素提供了一些新属性，特别是type的类型，在设计表单时，可以借助type的值给表单提供较好的用户体验，另外新增加的inputmode可以类似于type值，同样给用户提供不同的键盘类型。除此之外，还有一些属性可以提高用户体验和表单验证，而且一些伪元素还可以帮助我们更好的美化表单的UI风格。最后简单的向大家介绍了几个HTML5新元素，比如progress和metre实现进度条效果，type="range"和output实现滑块效果，details 和 summary实现手风琴（Accordion）、下拉菜单（Dropdown Menu）、提示框（Tooltips）、Tabs等效果，datalist实现类似下拉选择框效果。

希望今天这篇文章有助于大家提高对表单更深的认识，如果大家对这方面有更好的建议和经验，欢迎在下面的评论中与我们一起共享。