h5 php表单验证,HTML5-表单输入验证详解（图文）

一、使用其他表单元素

1. 生成选项列表

select元素可以用来生成一个选项列表供用户选择。size属性用来设定要显示给用户的选项数目；

multiple属性，用户一次可以选择多个选项。

示例1：选择列表

Favorite Fruit:

苹果

橘子

梨

示例2：选择列表，支持同时选多个

Like Sport:

足球

篮球

乒乓球

羽毛球

游泳

示例3：建立结构

JavaScript

Html

CSS

Java

PHP

2. 输入多行文字

textarea元素生成多行文本框，用户可输入多行文字。属性说明rows行数

cols列数

wrap控制提交表单时文字中插入换行符的方式：hard时将会插入换行符；soft不会

示例：使用textarea元素

请输入一段文字:

请再次输入一段文字:

3. 表示计算结果

output表示计算的结果。

示例：计算结果

价格计算

x

=

二、使用输入验证

HTML5引入了对输入验证的支持。设计者可告知浏览器自己需要什么类型的数据，然后浏览器在提交表单之前会使用这些信息检查用户输入的数据是否有效。其好处是：用户可以立刻得到问题反馈。验证属性支持元素requiedtextarea、select、input(text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file)

min、maxinput(umber, range, date, datetime, datetime-local, month, time 以及 week)

patterninput(text, search, url, telephone, email 以及 password)

示例：验证

姓名:

邮箱:

年龄:

注意：pattern验证邮箱和URL，不输入内容时其不会触发验证，所以需要配合required使用！

禁止输入验证：可以设置form元素的novalidate属性，也可以设置用来提交表单的button或input元素的formnovalidate属性。