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 类型：

input 的属性（ attributes ）

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

其中 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 实现类似下拉选择框效果。

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