HTML5简单入门系列（六）

前言

以前几篇已经将HTML5的主要新增元素和特性简单介绍完毕，LZ一直在犹豫还要不要把其余元素也写出来，由于其实没什么东西能够写，就是本身用到时看一下就行。不过为了入门系列的完整，犹豫再三，仍是决定简单写一下其余元素（看到其余深刻的HTML5，LZ就不写到这里了，由于LZ也没掌握，这里有篇深刻剖析HTML5，各位能够看看）。

HTML5 新增元素介绍

input类型

新增的输入类型元素有：

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

这些元素都是input标签的type属性的可选值，咱们简单对其作一下介绍。

email：

E-mail: <input type="email" name="user_email" />

通常状况，在form提交的时候，须要咱们写一个复杂的正则表达式对Email进行校验，不合法则不准提交。HTML5中该标签直接能够完成校验工做，省去咱们一些工做。

若是增长multiple属性的话，则容许咱们用','分割多个邮箱进行验证，有一个不合法则不容许提交。

同时支持multiple属性的类型是 file，容许咱们一次上传多个附件（不使用该属性，则只能一次上传一个附件）。

url

url和email基本同样，只是不支持multiple属性而已。

number

<input type="number" min="1" max="100" step="2" value="6">

type="number"，表示这是个数字类型的输入框。

min="1",表示输入的数字不能小于1

max="100"，表示输入的数字不能大于100

value="6"，表示默认值是6

step="2"，结合min的值，该输入框的值只能递增或递减2，默认值为1。

另外 step注明该输入框的精度（说精度或许不许确），默认值（1）状况和示例状况下，是不容许输入小数值的，若要容许输入小数，则能够将step改为0.1，0.01等，故LZ称其为精度。

将step改为0.2，效果以下

range

range 类型和number基本同样，只是显示效果为滑动条。

Date pickers（(date, month, week, time, datetime, datetime-local)）

实在没啥好说的~

Week: <input type="week" name="date" />

 search

search 输入类型用于搜索字段，好比站内搜索或谷歌搜索等。搜索字段的外观与常规的文本字段无异。

 color

color 输入类型用于规定颜色。该输入类型容许您从拾色器中选取颜色。

 

新的表单元素

新的表单元素包括：

• datalist
• keygen
• output

datalist

datalist 元素规定输入域的选项列表，经过 datalist 内的 option 元素建立。

它和select标签的区别在于，select是一个可见的元素，而datalist默认是不可见的，它须要绑定到某一个输入域才能够展现出来。省去了咱们本身动手用input+div实现下拉框效果的工做。

把datalist绑定到输入域时，将输入域的list属性引用 datalist 的 id：

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

注意，datalist option的value是必填项，若为空，则下拉框忽略选项。

keygen

keygen 元素是密钥对生成器（key-pair generator），目前，支持此元素的浏览器很少，LZ也没深刻去试验，略过吧。

Output

当output元素获取到焦点，触发onforminput事件（绑定一个js事件），自动运算。LZ本地测试均没有看到效果~~~略失望。

HTML5的新属性

新的 form 属性：

• autocomplete
• novalidate

新的 input 属性：

• autocomplete
• autofocus
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height 和 width
• list
• min, max 和 step
• multiple
• pattern (regexp)
• placeholder
• required

autocomplete

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。简单说就是记录用户的输入框记录，下次自动提醒。

<form autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
</form>

看到效果，就明白是什么状况了。form的autocomplete属性规定其包裹的标签元素均继承autocomplete属性，而元素特别指出不使用autocomplete属性的优先级高于继承来的属性，因此示例中的email是没有自动提醒的。

novalidate

novalidate 属性规定在提交表单时不该该验证 form 或 input 域。

在使用了novalidate属性的标签或form，其默认的校验行为失效，好比email类型的输入框不会进行校验

<form novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

autofocus

autofocus 属性规定在页面加载时，域自动地得到焦点。

form

form 属性规定输入域所属的一个或多个表单（使用空格分隔的列表）。

<form id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

即 lname输入框是表单user_form的一个元素，会一并被提交。

form overrides

表单重写属性（form override attributes）容许您重写 form 元素的某些属性设定。

表单重写属性有：

• formaction - 重写表单的 action 属性
• formenctype - 重写表单的 enctype 属性
• formmethod - 重写表单的 method 属性
• formnovalidate - 重写表单的 novalidate 属性
• formtarget - 重写表单的 target 属性

这些属性对于建立不一样的提交按钮颇有帮助。

之前咱们的作法是在不一样按钮提交前使用js替换form的对应属性，而HTML5经过该属性实现，省去了相应代码的编写。

height 和 width

这俩属性只适用于image类型的input标签，由于在HTML5中，image类型的input标签点击提交后会将图片的点击坐标一块儿传递到后台。

list

上边咱们在将datalist元素的时候使用的就是list属性，这里就很少说了。

min、max 和 step 

这三个属性，咱们在number类型的input标签中都有说到。略过。

multiple 

在email类型的input标签中说过，略过。同时其支持file类型的input标签。

pattern，placeholder ，required 

　　<form>
        Country code:
        <input type="text" name="country_code" pattern="[A-z]{3}" placeholder="Three letter country code"
            required="required" />
        <input type="submit" />
    </form>

定义了一个有默认提示的符合某个正则表达式的必填项，看运行效果以下

其余新增标签

Details & Summary

<details>
<summary>title</summary>
<p>
<input type="text" name="fn" value="test.doc" />
</p>
<p>
<label>
<input type="checkbox" name="v" checked />chkvalue
</label>
</p>
</details>

点击summary时detail内容会被展开，效果以下：

meter和progress

<p>显示度量值：</p>
<meter value="3" min="0" max="10" low="4">3/10</meter><br />
<meter value="0.8" high="0.6">80%</meter><br />
<meter value="0.5" high="0.8">50%</meter><br />

<progress value="40" max="100">40%</progress>

meter 标签订义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

例子：磁盘用量、查询结果的相关性，等等。

注释：meter标签不该用于指示进度（在进度条中）。若是标记进度条，请使用 progress 标签。

meter支持high/low属性，当当前值低于low或者高于high时，展现结果会颜色变化以表示警告。

小结

LZ看了其余人总结的一些内容，包括一些高级内容，若是有须要，请移步这里

到这里为止，HTML5的基础内容基本就结束了。目前的计划是，节后针对canvas作一些详细介绍。