《HTML and CSS Design and Build Websites》学习笔记之HTML5表单新增功能

HTML5中加入了不少表单验证的内容，将原本javaScript直接移交给了浏览器去处理完成。虽然目前仅仅Chrome和Opera对这些新增功能有着较好的支持，我们还是可以试着在我们的作品中加入这些新添的方便的功能。当然，那是在不影响我们用户的使用的前提下。

 

1.required属性

在所有的输入标签中，你都可以在其中加入该属性，使得浏览器在提交表单时自动检查该元素是否为空。若是空，则停止提交表单，提示用户输入信息。

<input type=“text” name=“username” required=“required” />

 

2.date输入

HTML5在input标签的type属性中加入了date这一种类型，允许用户方便地输入日期类的信息。

<input type=“date” name=“birthday” />

 

3.email、url输入

HTML5在input标签的type属性中还加入了email和url两种类型，当我们提交表单时，浏览器会自动地为我们验证输入是否合法，是否是email还有url类型。

<input type=“email” name=“email” />

<input type=“url” name=“url” />

 

4.search类型

input的type属性中还加入了search这一类型，主要应用于搜索框中。目前在Chrome中，它的表现形式与单纯的文本框相同，只不过是在输入文字后右边会出现一个小叉可以方便用户删除文本框里的全部内容。

<input type=“search” name=“searchText” />

 

5.placeholder属性

该属性允许我们在文本框中设置提示文字，当用户输入文字后，该提示文字会自动消失。

<input type=“text” name=“text” placeholder=“Please enter something.”/>

 

以下是完整示例的代码

注：请将以下代码复制到html文件中并在支持HTML5的浏览器中查看，推荐Chrome。

<form action="#" method="post">
    <input type="text" name="username" required="required" /><br />
    <input type="date" name="birthday" /><br />
    <input type="email" name="email" /><br />
    <input type="url" name="url" /><br />
    <input type="search" name="searchText" /><br />
    <input type="text" name="text" placeholder="Please enter something." /><br />
    <input type="submit" value="提交" />
</form>

转载于:https://www.cnblogs.com/RedHood/archive/2013/03/29/2989645.html