css 表单校验

html-css021

css 表单校验,第1张

1、:valid 用于匹配输入值为合法的元素

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">