Web技巧(07)

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

input的现状

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

`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。

3m6Zbu3.png!web

uiIjIrM.png!web

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

`input` 给用户体验带来的变化

JzQnqy2.png!web

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

mUvyUbY.png!web

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

IzAramn.png!web

上面说的是 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 对应的伪元素可以查阅《伪元素控制表单样式》一文。

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

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

上面仅仅是表单体验中的一小部分而以，如果您对用户体验优化方面的内容感兴趣的话，不仿花点时间阅读 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系统下看到的效果大致如下：

mIBfyay.png!web

来个简单的例子：

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

HTML中其他有意思的元素

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

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

QJrq2mR.png!web

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

NbMzuqV.png!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> 更进一步的介绍，可以阅读下面几篇文章：

`meter` 实现进度条的效果

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

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

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

fiENfaI.png!web

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

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

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

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

6F3uuya.png!web

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

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

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

input的现状

`input` 的 `type` 属性

`input` 的属性（ `attributes` ）

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

`input` 给用户体验带来的变化

`input` 的 `inputmode` 属性

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

HTML中其他有意思的元素

`progress` 实现进度条的效果

`meter` 实现进度条的效果

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

`datalist` 实现下拉选择框

小结

Recommend

深层对比：跨链明星Cosmos、Polkadot究竟有何不同？

Four patterns for global state with React hooks: Context or Redux

Best 4 Ways to Make Your Mobile App Hack Proof

Android 开发技术周报 Issue#230

深入iOS系统底层之程序中的汇编代码

深度学习框架PyTorch为何值得学

MalConfScan：从已知的恶意软件家族中提取配置信息

Pattern Matching Proposal

Use A Google Sheet To Send Reminder Emails To Your Team For Free

Typora 完全使用详解

About Joyk

Web技巧(07)

input的现状

input 的 type 属性

input 的属性（ attributes ）

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

input 给用户体验带来的变化

input 的 inputmode 属性

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

HTML中其他有意思的元素

progress 实现进度条的效果

meter 实现进度条的效果

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

datalist 实现下拉选择框

小结

Recommend

About Joyk

`input` 的 `type` 属性

`input` 的属性（ `attributes` ）

`input` 给用户体验带来的变化

`input` 的 `inputmode` 属性

`progress` 实现进度条的效果

`meter` 实现进度条的效果

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

`datalist` 实现下拉选择框