2.7 HTML 5新增的属性与元素

HTML 5为表单控件新增的属性

　　HTML 5为表单控件新增了大量属性，这些属性都是一些非常实用的功能，这些功能可以实现原来需要使用JavaScript才能实现的效果。

form属性

　　在HTML 5以前，所有的表单控件都必须放在元素内部，表明该表单控件属于该表单；但HTML 5为表单控件新增了form属性，用于定义该表单控件所属的表单，该属性的值应该是它所属表单的id。
　　通过为表单控件指定form属性，可以让表单控件定义在元素之外，从而提高灵活性。

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> form属性 </title>
</head>  
<body>  
<form id="addForm" action="add">  
    物品名：<input type="text" name="name"/>
    <input type="submit" value="添加"/>
</form>  
物品描述：<textarea name="desc" form="addForm"></textarea>
</body>  
</html>

formaction属性

　　这是一个十分实用的属性，相信绝大部分开发者以前都会遇到这样一个场景：页面中有一个表单，该表单内包含了两个以上的提交按钮，但程序需要不同的按钮提交到不同的action。
　　例如，页面中有一个填写用户信息的表单，这个表单内包含了“注册”、“登录”两个按钮，程序需要这两个按钮提交给不同的处理逻辑。在HTML 5规范以前，我们只能通过JavaScript来实现：当浏览者单击不同按钮时，通过JavaScript控制动态地修改<form.../>元素的action属性。
　　HTML 5的formaction属性专门用于处理上面场景：对于<input type="submit" .../>、<input type="image" .../>、<button type="submit" .../>元素，都可以指定formaction，该属性即可动态地让表单提交到不同的URL。

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> formaction属性 </title>
</head>  
<body>  
<form method="post">  
    用户名：<input type="text" name="name"/><br/>
    密码：<input type="password" name="name"/><br/>
    <input type="submit" value="注册" formaction="regist"/>
    <input type="submit" value="修改" formaction="login"/>
</form>  
</body>  
</html>

formxxx属性

　　formxxx属性是一些与formaction极为相似的属性，对于<input type="submit" .../>、<input type="image" .../>、<button type="submit" .../>元素，都可以指定formenctype、formmethod、formtarget等属性，其中：
　　➢　formenctype，通过该属性可以让按钮动态地改变表单的enctype属性。
　　➢　formmethod，通过该属性可以让按钮动态地设置表单以POST或GET方式提交。
　　➢　formtarget，通过该属性可以让按钮动态地改变表单的target属性。

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> formmethod属性 </title>
</head>  
<body>  
<form method="post" action="pro">  
    用户名：<input type="text" name="name"/><br/>
    密码：<input type="password" name="name"/><br/>
    <input type="submit" value="GET提交" formmethod="get"/>
    <input type="submit" value="POST提交" formmethod="post"/>
</form>  
</body>  
</html>

autofocus属性

　　这也是一个非常常用的属性。当为某个表单控件增加该属性后，浏览器打开该页面时该组件就会自动获得焦点。
　　由于打开页面时只能有一个控件获得焦点，因此整个页面上最多只能有一个表单控件可设置该属性。

placeholder属性

　　这个属性也非常实用。在一些用户界面足够人性化的页面里，当用户还未在单行文本框、多行文本域中输入内容时，单行文本框、多行文本域内就显示了对用户的提示信息。一旦用户开始输入，单行文本框、多行文本域内的提示信息就会自动消失。
　　在HTML 5规范以前，为了实现上面介绍的效果，只能通过JavaScript脚本来实现。HTML 5规范为实现这种效果提供了placeholder属性，该属性的值就是单行文本框、多行文本域显示的提示信息。

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> placeholder属性 </title>
</head>  
<body>  
<form method="post">  
    用户名：<input type="text" name="name" placeholder="请输入用户名"/><br/>
    密码：<input type="password" name="name" placeholder="请输入密码"/><br/>
    <input type="submit" value="注册" formaction="regist"/>
    <input type="submit" value="修改" formaction="login"/>
</form>  
</body>  
</html>

功能丰富的input元素

　　前面介绍<input.../>元素时已经讲解了可以通过type属性让该元素生成文本框、单选按钮、多选按钮、提交按钮、重设按钮等多种表单控件，而HTML 5则进一步丰富了type属性的类型，从而允许通过<input.../>元素来生成各种不同的表单控件。HTML 5为<input.../>元素的type属性新增了如下几种可能的类型。
　　➢　color：让<input.../>元素生成一个颜色选择器。当用户在颜色选择器中选中指定颜色后，该文本框内自动显示用户选中的颜色，该文本框的value为该颜色的值，形如#xxxxxx的颜色值。
　　➢　date：让<input.../>元素生成一个日期选择器。
　　➢　time：让<input.../>元素生成一个时间选择器。
　　➢　datetime：让<input.../>元素生成一个UTC日期、时间选择器。
　　➢　datetime-local：让<input.../>元素生成一个本地日期、时间选择器。
　　➢　week：让<input.../>元素生成一个供用户选择第几周的文本框。
　　➢　month：让<input.../>元素生成一个月份选择器。
　　➢　email：让<input.../>元素生成一个E-mail输入框。浏览器将会自动检查该文本框的value，如果用户在该文本框内输入的内容不符合E-mail格式，浏览器将会不允许提交表单，并自动生成提示。当指定type="email"时，<input.../>元素可指定如下属性。
　　□　multiple：该属性的值可以是multiple或省略属性值。如果指定了该属性值，则表明该文本框内允许输入多个E-mail地址。
　　➢　tel：让<input.../>元素生成一个只能输入电话号码的文本框。但这种类型的文本框并没有提供额外的要求，也就是用户完全可以向type="tel"的文本框内输入任意字符串。浏览器并不会执行太多额外的检查。
　　➢　url：让<input.../>元素生成一个URL输入框。浏览器将会自动检查该文本框的value，如果用户在该文本框内输入的内容不符合URL格式，浏览器将会不允许提交表单，并自动生成提示。
　　➢　number：让<input.../>元素生成一个只能输入数字的文本框。
　　➢　range：让<input.../>元素生成一个拖动条，通过拖动条使得用户只能输入指定范围、指定步长的值。当指定文本框的type="range"时，该文本框还可指定如下3个属性。
　　□　min：指定该拖动条的最小值。
　　□　max：指定该拖动条的最大值。
　　□　step：指定该拖动条的步长。

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 功能丰富的input元素 </title>
</head>  
<body>  
<form action="do">  
type="color"的文本框:<br/><input name="color" type="color"/><p>  
type="date"的文本框:<br/><input name="date" type="date"/><p>  
type="time"的文本框:<br/><input name="time" type="time"/><p>  
type="datetime"的文本框:<br/><input name="datetime" type="datetime"/><p>  
type="datetime-local"的文本框:<br/><input name="datetime-local" type="datetime-local"/><p>  
type="month"的文本框:<br/><input name="month" type="month"/><p>  
type="time"的文本框:<br/><input name="time" type="time"/><p>  
type="week"的文本框:<br/><input name="week" type="week"/><p>  
type="email"的文本框:<br/><input name="email" type="email" multiple/><p>  
type="tel"的文本框:<br/><input name="tel" type="tel"/><p>  
type="url"的文本框:<br/><input name="url" type="url"/><p>  
type="number"的文本框:<br/><input name="number" type="number"/><p>  
type="range"的文本框:<br/><input name="range" type="range" min="0" max="100" step="5"/><p>  
type="search"的文本框:<br/><input name="search" type="search"/><p>  
<input value="提交" type="submit"/>  
</form>  
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。