HTML5系列文章（二） – YouYaInsist

HTML5新增的表单控件

开文之前先备注一下我了解到的提高可访问性的两个小技巧：

为lable标签写上for属性，for属性用于引用与其相关联的表单元素的id,这种用法有助于屏幕阅读器识别页面上的表单域。

能用有序列表的时候尽量使用它替换div，因为它能以一种良好的展现形式来列出表单域还能够辅助标记出你所期望用户填写表单域的顺序。

HTML5控件的新类型：color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url

使用search类型创建搜索域

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

使用range类型创建滑块

<input type=”range” min=”0″ max=”10″ name=”myRange” value=”0″ id=”myRange” />

 

属性	值	描述
max	number	规定允许的最大值。
min	number	规定允许的最小值。
step	number	规定合法数字间隔（如果 step=”3″，则合法数字是 -3,0,3,6，以此类推）
value	number	规定默认值。

使用数值框处理数字

number 输入类型用于包含数字值的输入字段。您可以设置可接受数字的限制。

与range类型的滑块类似，可以设定最大值和最小值。但是直接输入的数字不受最小值和最大值的限制。控件增减的步长由step属性来指定，step属性可以是任意数字，其默认值为1.

属性	值	描述
max	number	规定允许的最大值。
min	number	规定允许的最小值。
step	number	规定合法数字间隔（如果 step=”3″，则合法的数字是 -3,0,3,6, 以此类推）
value	number	规定默认值。

Points: <input type=”number” name=”points” min=”1″ max=”10″ />

日期控件

HTML5 拥有多个供选择日期和时间的新的输入类型：

• date – 选择日、月、年
• month – 选择月、年
• week – 选择周、年
• time – 选择时间（时、分）
• datetime – 选择时间、日期、月、年（UTC 时间）
• datetime-local – 选择时间、日期、月、年（本地时间）

Date: <input type=”month” name=”user_month” />

Email类型

email 输入类型用于应该包含电邮地址的输入字段。当提交表单时，会自动地对 email 字段的值进行验证。iPhone 的 Safari 浏览器会识别 email 输入类型，然后改变触摸屏的键盘来适应它

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

URL类型

url 输入类型用于应该包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。iPhone 的 Safari 浏览器会识别 url 输入类型，然后改变触摸屏的键盘来适应它

Homepage: <input type=”url” name=”user_url” />

Color类型

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

Color: <input type=”color” name=”user_color” />

看一下用JavaScript怎么检测浏览器是否支持color类型的表单控件。

function hasColorSupport() {
var input = document.createElement(‘input’);
input.setAttribute(‘type’, ‘color’);
var hasColorType = (input.type != ‘text’);
if (hasColorType) {
var testString = ‘foo’;
input.validationMessage = testString;
hasColorType = (input.value != testString);
}
return (hasColorType);
}

HTML新增的全局属性

使用autofocus属性定位第一个表单域元素

autofocus属性稳定生效的前提是页面中设置了唯一的autofocus属性，如果设置了多个，浏览器会把用户光标定位到最后一个设置了autofocus属性的表单域上。

function hasAutofocus() {
var element = document.createElement(‘input’);
return ‘autofocus’ in element;
}

使用placeholder属性进行提示

function hasPlaceholderSupport() {
var element = document.createElement(‘input’);
return ‘placeholder’ in element;
}

使用autocomplete属性阻止自动完成

autocomplete属性用以通知浏览器不要为当前表单域自动填充数据。某些浏览器能够记录用户之前输入的数据，而在某些场合下，我们想告知浏览器我们不希望用户使用记录数据，这时候autocomplete属性就起作用啦。

基于contenteditable属性实现在线编辑

contenteditable属性可以自动完成数据输入部分的工作，为了保存编辑过的数据，还需要编写少量用于向服务器端发送数据的JavaScript代码。任何元素使用contenteditable属性的话，代表该元素是一个可编辑的区域。用户可以改变元素的内容以及操作标记。

<h3 contenteditable=”true”>这是一个可编辑的标题。请试着编辑该文本。</h3>

contenteditable属性有3种值可选：true, false和空字符，空字符代表true。

如果用js对框架页面设置contenteditable,可用：框架ID.document.designMode=”on” 。

spellcheck属性

spellcheck 属性规定是否对元素内容进行拼写检查

<p contenteditable=”true” spellcheck=”true”>这是可编辑的段落。您可以试试看您编辑的文本是否需要进行拼写检查</p>

role和aria-*属性

HTML5把WAI-ARIA当作是合法的语言增加，用来做辅助作用。使用role属性告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色，属于WAI-ARIA.

draggable和dropzone属性

draggable 和 dropzone 属性可以与新的拖放API一起使用，draggable为是否允许拖放，dropzone代表可以拖放到哪个区域。

<p draggable=”true” dropzone=”myHolder”>拖放测试</p>

本文链接：HTML5系列文章（二），转载请注明。