响应式Web设计：使用HTML5和CSS3实践 （13）
|
- UID
- 1066743
|
响应式Web设计：使用HTML5和CSS3实践 （13）
第8章 用HTML5和CSS3征服表单
8.1 HTML5表单
HTML5表单不仅包含了一些新的视觉元素，还具备了基本的客户端验证的功能，而过去这些一般都需要依赖JavaScript。如下列举了这些新的表单特性：
8.1.1 一个示例表单构建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 首先定义了一个id为redemption的表单 -->
<form id="redemption" method="post">
<!-- hgroup中的h1和h2用于显示标题和说明文字 -->
<hgroup>
<h1>Oscar Redemption</h1>
<h2>Here's your chance to set the record straight: tell us what
year the wrong film got nominated, and which film <b>should</b>
have received a nod...</h2>
</hgroup>
</form>
<fieldset>
<legend>About the offending film (part 1 of 3)</legend>
<div>
<label for="film">The film in question?</label>
<input id="film" name="film" type="text" placeholder="e.g. King 3
Kong" required aria-required="true" >
</div>
</fieldset>
</body>
</html>
因为书中的例子其实并没有提供连贯的例子，如下只贴出一些片段用于粘贴在上面的表单示例中方便查看效果。
8.1.2 placeholder
占位符是HTML5表单中非常频繁被使用的一个属性，输入框获取焦点后会自动消失。
8.1.3 required
为确保表单必须输入值，可以添加required属性，当输入不符合条件时候浏览器会给出提示，并且表单默认不会提交。注：aria-required是为了方便屏幕阅读器用户，第四章有介绍过WAI-ARIA。
8.1.4 autofocus
autofocus可以让表单加载完成时就有一个表单域被默认自动聚焦。
<fieldset>
<legend>autofocus example</legend>
<div>
<label for="search">Search the site...</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp"
autofocus>
</div>
</fieldset>
8.1.5 autocomplete
很多浏览器提供了自动完成功能来帮助用户完成输入，但是通常会关闭这个功能，因为它不仅能保护敏感数据（例如银行卡账户），还可以让用户用心填写表单而不是随便输入一个值（使用者可能通过自动完成来选择曾填写过的假的电话号码）。
下面的代码是一个禁止自动完成的表单项：
<fieldset>
<legend>autocomplete example</legend>
<div>
<label for="tel">Telephone (so we can berate you if you're wrong)</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required aria-required="true" >
</div>
</fieldset>
也可以给表单本身设置属性来禁止整个表单的自动完成功能：
<form id="redemption" method="post" autocomplete="off">
autofus可以让表单加载完成时就有一个表单被默认自动聚焦。
8.1.6 list及对应的detail元素
<fieldset>
<legend>list example</legend>
<div>
<label for="awardWon">Award Won</label>
<input id="awardWon" name="awardWon" type="text" list="awards">
<datalist id="awards">
<select>
<option value="Best Picture"></option>
<option value="Best Director"></option>
<option value="Best Adapted Screenplay"></option>
<option value="Best Original Screenplay"></option>
</select>
</datalist>
</div>
</fieldset>
使用了list属性的输入框看起来就是一个普通的文本输入框，list属性的值就是datalist元素的id，开始输入时会显示一个数据选择框。注：使用select包裹option是为了便于老版本浏览器的降级。
8.1.7 HTML5的新输入类型
邮箱地址 <input type="email" />
数字 <input type="number"/>
URL地址 <input type="url"/>
电话号码 < input type="tel"/>
搜索输入框 <inputtype="search"/>和普通文本框表现一样只是个别浏览器渲染上有细微差别
正则表达式 <input pattern="([a-zA-Z])"/>
颜色选择器 <input type="color"目前很少浏览器支持该特性（@13年）
滑动条 <input type="range" min="1" max = "10" />
8.1.8 日期和时间输入类型
如下多种的日期时间输入类型提供了不同的度量单位，输出结果值会略有不同：
date
month
week
time
datetime和datetime-local |
|
|
|
|
|
