HTML5&CSS3笔记：用HTML5和CSS3征服表单

男娘i 2022-07-15 13:28 281阅读 0赞

## HTML5 表单 ##

**理解 HTML5 表单中的元素**

1、fieldset

<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 Kong" required aria-required="true" >
    </div>

fieldset 元素可将表单内的相关元素分组。  
fieldset>标签将表单内容的一部分打包，生成一组相关表单的字段。fieldset标签没有必需的或唯一的属性。  
当一组表单元素放到 fieldset 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。详见：[http://www.w3school.com.cn/html5/html5\_fieldset.asp][http_www.w3school.com.cn_html5_html5_fieldset.asp]

2、placeholder

只需在 input 元素中加入 placeholder 属性，其属性值就会默认显示为占位符文字，输入框获取焦点时该文字自动消失。当输入框失去焦点且没有任何输入值时，占位符文字则会再次显示。

3、required `required aria-required="true"`

在支持 HTML5 的浏览器中，在 input 元素中追加布尔类型的属性 required(也就是 说你可以选择追加或不追加该属性)，则表明该表单域为必填项。如果表单提交时该必填项没有任何信息，浏览器则会显示警告信息。

警告信息的显示方式(包括显示内容和样 式)取决于浏览器与输入框类型。除了 HTML5 的 required 属性，我们的例子中还追加了一个等价的 WAI-ARIA 属性:`aria-required="true"`。如果没有特殊原因，建议为输入框追加 WAI-ARIA 版的必填属性以方便屏幕阅读器用户。

4、autofocus

HTML5 的 autofocus 属性可以让表单在加载完成时就有一个表单域被默认聚焦(或选中)，以便于用户输入。

使用该属性时要小心。如果有多个表单域都被追加了 autofocus 属性，则会造成跨浏览器混乱。例如有多个表单域追加了 autofocus 属性，在 Chrome(v16)中会聚焦最后一 个使用autofocus属性的表单域，而Firefox(v9)恰恰相反，会聚焦第一个使用autofocus 的表单域。

还有一点需要注意，有些用户会使用空格键让网页内容向下滚动。如果网页的表单中含有带 autofocus 属性的表单域，则会阻止空格键的默认行为，这时敲击空格键会向已聚焦的输入框中输入空格。显然，这会让用户很懊恼。

5、autocomplete

很多浏览器默认提供自动完成功能以帮助用户输入。  
以往用户可以在浏览器设置中打开或关闭这项功能，现在我们还能告知浏览器我们不想在某个表单或表单域上使用自动完成功能。这不仅仅能保护敏感数据(例如银行账户)，还可以让你确保用户用心填写表单，手工输入一些值。

下面的代码演示了一 个禁用自动完成功能的表单项:

<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)设置属性来禁用整个表单的自动完成功能。示例代码如下:

6、list(及对应的 datalist 元素)

list 属性以及对应的 datalist 元素可以让用户在输入框中开始输入值的时候，显示一组备选值。下面是一个包含在 div 中的使用 list 属性及对应 datalist 元素的代码示例:

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

list 属性中的值(awards)同时也是 datalist 元素的 id。这样就可以让 datalist 与输入项关联起来。虽然将 option 包裹在 select 中不是必需的，但这样做便于为老版本浏览器提供降级方案。

list 输入框不会阻止用户输入自己想输入的内容，不过它为我们提供了一种便利的方式来添加输入提示功能，增强用户体验。

7、HTML5 的新输入类型

HTML5 新增了很多输入类型，它们最大的作用就是可以限制用户输入的数据，不需要引入额外的 JavaScript 代码。这些新的输入类型最赞的一点，就是在那些不支持新特性的浏览器中，它们会被降级显示为一个标准的文本输入框。此外还有很多很有用的腻子脚本可以让那些老版本浏览器也跟上时代。

email：`type="email"`——支持它的浏览器会期望用户的输入匹配电子邮箱的格式。当提交一个不符合格式的输入值时，浏览器会生成警告信息。

number：`type="number"`——支持该特性的浏览器期望输入一个数字。这种输入类型默认还提供控制按钮，允许用户简单地点击向上或向下来改变数值。  
还可以设置允许输入的最小值和 最大值范围，具体代码如下:

type="number" min="1929" max="2015"

url：`type="url"`——URL 输入类型用于输入 URL 地址。与 tel 和 email 输入 类型类似，它看起来和标准的文本输入框一样。不过有些浏览器会在提交不合法的 URL 时显示特定的警告信息。

tel：`type="tel"`是另一种用于收集联系人信息的输入类型。tel 表示表单域期望输入一个电话号码。

search：`type="search"`——和普通文本输入框的表现基本一样，仅在个别浏览器中渲染得有点细微差别。

pattern：`pattern="某正则表达式"`

学习正则表达式:[http://en.wikipedia.org/wiki/Regular\_expressions][http_en.wikipedia.org_wiki_Regular_expressions]。

color：`type="color"`——会在支持该特性的浏览器中生成一个颜色选择器，让用户可以选择十六进制的颜色值。

**日期和时间输入类型**

1、date

和 color 类型一样，目前对 date 提供原生支持的浏览器寥寥无几，大多数浏览器默认都将其渲染为标准的文本输入框。  
Opera 已经实现了这个功能。

2、month

选择器界面允许用户选择某个月，输入框中会被填充为年和月组成的值，如 2016-06。

3、week

使用 week 类型时，选择器允许用户选择一年中的某一周，输入框中会被填充格式如 2016-W7 这样的数据。

4、time

time 输入类型允许输入一个 24 小时制的时间值，如 23:50。  
在支持该特性的浏览器中，会显示出加减控制按钮，且仅允许输入时间值。

5、datetime 和 datetime-local

6、range

range 输入类型会生成一个滑动条。

默认的输入范围是 0 到 100。但上面的示例代码通过 min 和 max 将范围设定为 1 到 10。

range 输入类型最大的一个问题是它从来不给用户显示当前的输入值。虽然滑动条仅被设计用来选择模糊的数值，但我还是经常想看看它的当前值。使用 HTML5 目前无法解决这个问题，但是如果你确实需要显示滑动条的当前输入值，可以通过 JavaScript 来实现。

## 如何给不支持新特性的浏览器打补丁 ##

HTML5 表单很强大，但要想实际使用则还有两个非常麻烦的问题：一是支持表单新特性的浏览器在具体实现上有所不同；二是对完全不支持新特性的浏览器如何处理。万幸的是，Web 社区一如既往地拿出了解决办法：一个非常棒的 JavaScript 框架：Modernizr([http://www.modernizr.com][http_www.modernizr.com])，用于向缺少 HTML5/CSS3 特性支持的浏览器打补丁。

由 Alexander Farkas 编写的 “Webshims Lib”([http://afarkas.github.com/webshim/demos/][http_afarkas.github.com_webshim_demos])就是构建于 Moderniz 和 jQuery 之上的，它可用于插入表单补丁(也可以为其他 HTML5 特性打补丁)，从而使不支持新特性的浏览器可以处理 HTML5 表单。

## 使用 CSS3 美化 HTML5 表单 ##

**针对表单的 CSS3 伪类选择器**

input:required:选择必填表单域;
    input:focus:invalid:选择当前聚焦的且含有非法输入值的表单域;
    input:focus:valid:选择当前聚焦的且含有合法输入值的表单域。

使用这些新的 CSS3 伪类选择器可以制作出优美的、易于实现的增强效果（比如，当用户输入时，如果所输入的值不符合规定格式，则利用css3可以给当前的输入框加上一个红色叉号；如果输入值符合格式，则利用css3可以给其加上一个绿色对号。），可以大大提升用户填写表单的用户体验。

[http_www.w3school.com.cn_html5_html5_fieldset.asp]: http://www.w3school.com.cn/html5/html5_fieldset.asp
[http_en.wikipedia.org_wiki_Regular_expressions]: http://en.wikipedia.org/wiki/Regular_expressions
[http_www.modernizr.com]: http://www.modernizr.com
[http_afarkas.github.com_webshim_demos]: http://afarkas.github.com/webshim/demos/