Web技巧(07)

时间 2019-12-09

标签 web 技巧栏目 HTML 繁體版

原文原文链接

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

input的现状

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

`input`的`type`属性

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

`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元素支持。html5

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

内容属性（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。css3

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

`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等属性。api

上面说的是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系统下看到的效果大体以下：

来个简单的例子：

若是你想了解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>更进一步的介绍，能够阅读下面几篇文章：

`meter`实现进度条的效果

使用<meter>获得的效果和<progress>有点相似，均可以实现相似进度条的效果。并且其使用方式也很是的简单：

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

对于设置<meter>元素的样式也能够经过一些伪元素来完成，好比：

有关于<meter>更详细的介绍能够阅读：

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

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

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

有关于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实现相似下拉选择框效果。

但愿今天这篇文章有助于你们提升对表单更深的认识，若是你们对这方面有更好的建议和经验，欢迎在下面的评论中与咱们一块儿共享。

Web技巧(07)

input的现状

input的type属性

input的属性（attributes）

input给用户体验带来的变化

input的inputmode属性

HTML中其余有意思的元素

progress实现进度条的效果

meter实现进度条的效果

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

datalist实现下拉选择框

小结