2、:invalid用于匹配输入值为非法的元素
3、required 属性规定必需在提交之前填写输入字段
4、pattern 属性规定用于验证输入字段的正则表达式
:valid/:invalid 选择器用于在表单元素中的值是合法/非法时设置指定样式。
注意： :valid/:invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max属性，及正确的 email 字段, 合法的数字字段等。
required 属性适用于以下 <input>类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。当然textarea也可以。
预览地址：
这时候点击提交，就好自动校验了，而且HTML5会直接添加Tips提示用户，请看下列示例（虽然样式不是很美观）：
并非是CSS制作的，而是HTML的表单当中的下拉菜单标签
比如
<select><option>HTML5学堂</option>
<option>原创技术文章分享</option>
</select>
如果你不希望使用系统自定义的下拉菜单，那么，你需要使用各种元素（比如div），进行定位等处理，实现想要的样式，再之后，需要使用JS进行控制
感觉没必要用onclick方法，H5中文本框有个新属性“placeholder”即placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
语法：
<input placeholder="text">
