HTML5表单验证

表单

<form method="提交方式" action="提交地址">

表单元素

</form>

 

表单元素的一般语法:

1. <input type="元素类型" name="元素名称" />

2. 特殊的

<select>

<option value="选项的值">选项的文本</option>

...

</select>

 

<textarea name="" rows="行数" cols="列数">值</textarea>
 

表单元素

1. 用来填的

text : 单行文本框

password : 密码框

textarea : 多行文本框

email : 邮件地址输入框

url : 网址输入框

number : 数字输入框

 

属性:

size可以控制宽度

maxlength可以控制最大输入的字符数
max(最大值), min(最小值)对number，range有效

 

2. 用来选的

checkbox : 复选框

radio : 单选框

select : 下拉列表框

 

属性:

checked用于默认选中radio和checkbox

selected用于默认选中select中的option选项

value用于设置元素的值

 

3. 用来点的

submit : 提交按钮

reset : 重置按钮

button : 一般按钮, 没有功能

image : 图片按钮, 功能上等同于submit

 

4. 其它的

file : 文件域, 用于文件上传

hidden : 隐藏域, 作用不明

range：滑块

设置表单要注意的地方

1. 一组radio应该设置相同的name, 这样才能"互斥"

2. 除按钮外, 其它表单元素都应该设置name属性

3. 用于选择的元素都应该设置value

表单元素的只读和禁用

readonly

disabled

使用label提高用户体验

label称为"标注", 可以扩大表单元素的可操作区域, 点击label就等价于点击了对应的表单元素.

方式一:

<label for="表单元素的id">文本</label>

方式二:

<label>

文本

<input />

</label>

使用HTML5内置的表单验证

1. 用户提示

<input placeholder="提示信息" />

 

2. 用required实现必填验证

<input required="required" />

 

3. 用pattern实现复杂的文本信息验证(正则表达式)

<input pattern="[a-zA-Z]{4,9}" /> //必须由4-9位字母组成

<input pattern="1[35][0-9]{9}" /> //必须是13xxxxxxxxx或15xxxxxxxxx

<input pattern="[\u4E00-\u9FA5]{5}" /> //必须由5位中文字符组成

 

注意: email, url等元素自带pattern验证规则