这个<fieldset>的最后一项是Date域。在Opera浏览器中，date类型会提供一个用于日期选择的日历选择器，但在Google Chrome中则是创建一个微调器，如图3所示。图4显示了Date域的日期选择器在Opera浏览器中的显示效果。可以注意到，在Opera中，域设置框的边角不是圆角，即使使用了同样的在Chrome中使边角变圆的样式表也是如此。

　　图4. Date域

　　清单4给出了用来创建日期选择器的代码。

　　清单4. Date域

XML/HTML Code复制内容到剪贴板
<p>  
<label>Date: <input type="date">  
</label>  
</p>  
</fieldset>  
　　你可以使用任意日期格式，你甚至可以把日期分解到小时一级。下面这些是你可以创建的日期类型：

　　1. 日期（<input type="date">）：选择日、月和年
2. 月份（<input type="month">）：选择月和年
3. 星期（<input type="week">）：选择星期和年
4. 时间（<input type="time">）：选择时间（小时和分钟）
5. 日期时间（<input type="datetime">）：选择时间、日、月和年（UTC时间）
6. 当地日期时间（<input type="datetime-local">）：选择时间、日、月和年（当地时间）

　　第二个<fieldset>标签

　　第二个<fieldset>标签包含了一个带有list属性的<input>标签和一个<datalist>标签。list属性指明了输入域的<datalist>, <datalist>标签提供了一个输入域选项列表。list属性可用在这些<input>类型上：text、search、url、tel、email、date、number、range和color。

　　<datalist>以下拉列表的方式显示，如图5所示。这个截图是从Opera中获取的，在Chrome中，该列表只是显示成一个简单的文本框，没有把列表呈现给用户。

　　图5. Favorites域

　　清单5提供了创建Favorite Composer部分的域设置。

　　清单5. Favorite Composer域

XML/HTML Code复制内容到剪贴板
<fieldset>  
<legend> Favorite Composer </legend>  
<p>  
<label>  
<input type="text" name="favorites" list="composers">  
<datalist id="composers">  
<option value="Bach">  
<option value="Beethoven">  
<option value="Brahms">  
<option value="Chopin">  
<option value="Mendelssohn">  
</datalist>  
</label>  
</p>  
</fieldset>  
　　第三个<fieldset>标签

　　第三个<fieldset>标签显示了作曲家的一个列表，后面跟随着一个数字域，该域指明了每位列出的作曲家提供了多少作品。图6显示该部分内容。

　　图6. Composers域

　　例如，Bach有五个作品，Beethoven有十个作品。清单6给出了每个作曲家作品个数的最大值，在你提交表单时，数字域不会接受超过最大值的数值。在提交时，当你输入了不正确的、超出范围的值，它会提示你输入该域可接受的正确的数值。

　　number类型创建了一个输入的微调域，用到了min、max和step属性。默认的step值是1。min、max和step属性可用来对number、range和日期选择器的输入进行限制。max属性决定输入域所允许的最大值，min属性决定输入域所允许的最小值，step属性决定有效的递增值。

　　清单6. Composer域

XML/HTML Code复制内容到剪贴板
<fieldset>  
<legend>Composers< /legend>  
<p>  
<label>  
Bach: <input name="form_number" id="form_number"   
type="number" min="1" max="5" >  
</label>  
</p>  
<p>  
<label>  
Beethoven: <input name="form_number" id="form_number"   
type="number" min="1" max="10" >  
</label>  
</p>  
<p>  
<label>  
Brahms: <input name="form_number" id="form_number"   
type="number" min="1" max="7" >  
</label>  
</p>  
<p>  
<label>  
Chopin: <input name="form_number" id="form_number"   
type="number" min="1" max="10">  
</label>  
</p>  
<p>  
<label>  
Mendelssohn: <input name="form_number" id="form_number"   
type="number" min="1" max="4">  
</label>  
</p>  
</fieldset>  
　　第四个<fieldset>标签

　　第四个<fieldset>标签包含了一个file类型的<input>并用到了属性multiple，如图7所示。multiple属性表明输入域可以从数据列表或是文件列表中选择多个值，用户可以选择多个上传的文件。

　　图7. Upload域

　　file类型和multiple属性的代码如清单7所示。

　　清单7. Upload域

XML/HTML Code复制内容到剪贴板
<fieldset>  
<legend> Upload file(s) </legend>  
<p>Upload one of your orchestras file(s) for inclusion in our library</p>  
<p><label>  
<input type="file" multiple="multiple" />  
</label>  
</p>  
</fieldset>  
　　提交按钮

　　Submit按钮用到了height和width属性，如清单8所示。通过这两个属性可以设置image输入类型的高和宽。通过预设宽度与高度尺寸限定图片显示区域，可以增强页面渲染效果，从而让页面加载更加顺畅。

　　清单8. Submit按钮

XML/HTML Code复制内容到剪贴板
<input type="image" src="submitbutton.png" alt="Submit"   
width="100" height="45" />  
</form>  
　　JavaScript和CSS3

　　没CSS3的话，HTML5的渲染就无法完成。而且，尽管HTML5已经取消了对一些JavaScript编码的需要，但JavaScript依然是一个很有用的工具。下面是用来创建上述示例表单的JavaScript代码和CSS3文件。

　　这段JavaScript代码是一个显示三个必填项的警告框，如清单9所示。尽管这里用到的JavaScript代码只有一行，但它被放置在一个单独的JavaScript文件中，遵循使用JavaScript的最佳实践。

　　清单9. JavaScript代码的例子

JavaScript Code复制内容到剪贴板
function alertValues()  
{  
     alert("Customer information: " + "  " + fullname.value + "  "  
+ tel.value + "  " + email.value);  
}  
　　清单10展示了用来格式化示例表单的CSS3代码，这里不包括<header>和<footer>的信息。

　　清单10. 例子表单的CSS3

CSS Code复制内容到剪贴板
form {  
width: 550px;  
margin: 0 0 0 0 ;  
padding: 50px 60px;  
background-color: #2d2d2d;  
border-radius: 20px;  
}  
  
fieldset {  
padding: 0 20px 20px;  
margin: 0 0 30px ;  
border: 2px solid #ffffff;  
background: #B8B8B8 ;  
border-radius: 10px;  
}  
  
legend {  
color: #ffffff;  
background: #990033;  
font-size: 0.9em;  
font-weight: bold;  
text-align: left;  
padding: 5px;  
margin: 0;  
width: 10em;  
border: 2px solid #660033;  
border-radius: 5px;  
}  
  
label {  
display: block;  
float: left;  
clear: left;  
text-align: left;  
width: 100%;  
padding: .4em 0 0 0;  
margin: .15em 0 0 0;  
}  
　　结论

　　真正能让个人和组织成功的关键是沟通。表单控件和网页构建指南对这个过程来说很重要。HTML5为此提供了功能非常强大的工具。那些为将来做准备的人 —— 现在已经是时候了 —— 你将会从中受益；而那些没有做准备的人将会受到世界Web化（one-Web-world）、网络化（netcentric）、全球化（global society）的步伐和需求带来的严重冲击（Those who are prepared for the future—which is here now—will benefit; those who are not will be severely buffeted by the pace and demands of the one-Web-world, netcentric, global society.）。

　　下载

名称　　　　　　　　大小　　　　　　　　下载地址

HTML5Forms.zip 　10KB 　　　　　　　 HTTP

关于下载方法的说明

　　学习资料

　　1. Create modern Web sites using HTML5 and CSS3（developerWorks，March 2010）是一篇有着多节内容的HTML5和CSS3文章。

　　2. 在New elements in HTML 5（developerWorks，August 2007）这一文章中，你会找到HTML5中的几个新元素的一些资料。

　　3. 5doctor 网站提供了一种关于HTML5当前趋势的非常棒的看法。

　　4. W3Schools.com HTML5 Tag Reference 提供了一个无所不包的HTML5标签、定义和例子的清单。

　　5. WHATWG网站 提供了HTML5规范的详尽内容。

　　6. W3Schools.com CSS3 Reference 提供了CSS版本3的详尽内容。

　　7. Web development zone 特定于涵盖了各种基于Web的解决方案的文章。

　　8. 随时关注developerWorks的technical events and webcasts。

　　9. developerWorks on-demand demos：观看各种演示，范围从为初学者提供的产品安装和设置到为有经验的开发者提供的高阶功能都有。

　　10. 关注developerWorks on Twitter。

　　讨论

　　1. 现在就创建你的developerWorks个人资料，并设置一个关于HTML的观看列表。与developerWorks社区建立联系并保持联系。

　　2. 找到其他在web开发方面感兴趣的developerWorks成员。

　　3. 分享你的知识：加入一个关注web专题的developerWorks组。

　　4. Roland Barcia在他的博客中谈论Web 2.0和中间件。

　　5. 关注developerWork成员的shared bookmarks on web topics。

　　6. 快速获得答案：访问Web 2.0 Apps论坛。

　　7. 快速获得答案：访问Ajax论坛。

　　关于作者

　　Grace Walker是位于伊利诺斯州的芝加哥的Walker Automated Services公司的合伙人，她是一位有着多重背景和丰富经验的IT顾问。她在IT行业担任过经理、管理员、程序员、讲师、业务分析师、技术分析师、系统分析师和Web开发者，工作的背景环境也各不相同，其中包括了电信、教育、金融服务和软件等。
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com