1.占位符
此前，我们需要使用JavaScript来创建文本框的占位符。你可以初步设定值属性来看是否合适，但是只要用户删除了该文本，输入的内容就会再次变成空的。占位符属性有效地弥补了这一点。
<input name=”email” type=”email” placeholder=”doug@givethesepeopleair.com” /
2. IE和HTML5
IE理解新的HTML5元素需要费一定的神，为了确保新的HTML5元素能够以块级元素正确显示，有必要将它们用下面的代码定义风格：
header, footer, article, section, nav, menu, hgroup { display: block; }就算如此，IE还是不知道这些元素究竟是什么，因而会无视这些格式，还需要用到下面的代码来解决这个问题：
document.createElement(“article”);document.createElement(“footer”);document.createElement(“header”);document.createElement(“hgroup”);document.createElement(“nav”);document.createElement(“menu”);3.必要（Required）属性
表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性：
<input type=”text” name=”someInput” required>4. 自动对焦（Autofocus）属性
同样地，有了HTML5就不再需要用JavaScript方案来解决自动对焦的问题。如果某个输入应该被”选择“或被聚焦，我们现在可以使用HTML的自动对焦autofocus属性。
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofoucus />
5. 使你的内容可编辑
HTML5其中一个非常强大的功能就是“contenteditable”，顾名思义它将允许用户编辑元素（包括他的子元素）内包含的任何文本内容。它的用途非常广，如，简单的任务清单或是基于wiki的站点也非常实用，此外，它还有一个优势就是利用了本地的存储。
<ul contenteditable=”true”><li> Break mechanical cab driver. </li><li> Drive to abandoned factory<li> Watch video of self </li></ul>
6.Email输入(Inputs)
如果我们给表单输入框应用名为”email”的type属性，我们可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。没错，内置表单验证即将到来，由于一些显而易见的原因，我们还不能100%依赖内置验证，较旧的浏览器不认识这个”email”型，它们会简单地退回到普通文本框。
<form action="" method="get"> <label for="email">邮箱:</label><input id="email" name="email" type="email" /> <button type="submit">确定</button> </form>7.HTML5自定义新标签属性
转载于:https://www.cnblogs.com/-gap/archive/2012/06/07/2540315.html
相关资源：HTML5 CSS3 精美登陆界面源码