HTML5中表单验证有如下好处:
1、可判断用户是否已填写表单中的必填项目。
2、可判断用户输入的邮件地址是否合法。
3、可判断用户是否已输入合法的日期。
4、可判断用户是否在数据域(numeric field)中输入了文本。
表单验证通常采用策略模式的思想,把一个个验证规则封装成一个函数,比如非空规则、最大长度规则等,不同的输入框选择某一个或者某几个规则进行验证。
扩展资料:
HTML表单一直都是Web的核心技术之一,有了它才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API,方便做更复杂的应用,而不用借助其它Javascript框架。
表单有以下几个基本知识点:
1、表单仍是以<form>元素作为容器,可在其中设置基本的提交特性。
2、当用户提交页面时,表单仍然向服务器发送表单控件的值。
3、之前老版本中的表单控件,如text radio checkbox等等,都可以按原有方式使用,尽管增加了新的功能。
4、仍然可以使用javascript操作表单控件。
新增表单元素:用于表单的密钥对生成器字段
不同类型的输出,比如脚本的输出。
新增表单属性:
autocomplete 自动完成
novalidate不验证数据
formaction 用于描述表单提交的URL地址,会覆盖
元素中的action属性.
formenctype 表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)
formmethod 表单提交方式,会覆盖 的method 属性。
formnovalidate 表单提交无需被验证,会覆盖 元素的novalidate属性.
formtarget 表单提交数据接收后,怎么的展示。
list 表示input输入域的 datalist(datalist 是输入域的选项列表)
min max step ** 用来给input 类型为数字或日期的添加限定约束的
multiple 多种多样表示 元素中可选择多个值。
pattern 正则表达式用于验证 元素的值。
placeholder 占位提供一种提示(hint),描述输入域所期待的值。
required 被要求的,必须的, 规定必须在提交之前填写输入域(不能为空)。
step 步伐、一步、步长,规定输入域合法的数字间隔
1、form表单:网址与用户交互,把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
语法: <form method="传送方式" action="服务器文件">
<form>: 标签是成对出现的,以开始,以</form>结束。
action : 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
method : 数据传送的方式(get/post)。
2、文本输入框、密码输入框
语法:
<form>
<input type="text/password" name="名称" value="文本" />
</form>
type:
当type=" text "时,输入框为 文本 输入框
当type=" password "时, 输入框为 密码输入框。
name: 为文本框命名,以备后台程序ASP 、PHP使用。
value: 为文本输入框设置默认值。(一般起到提示作用)
3、占位符placeholder,属性,有时候需要提示用户输入框需要输入框的内容
4、input标签中的数字框number类型
<input type="number"/> :输入框中只能输入数字,输入其他字符无效,输入框右侧会有加减符号,可以调整输入数字的大小,浏览器不同表现不一致。
5、input标签中的网址框url类型
<input type="url"/>: 数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示
6、input标签中的邮箱框的email类型
<input type="email" />: 表示该输入框的类型为邮箱;数字框的值必须包含@;数字框的值@之后必须有内容,否则会报错误提示。
7、<textarea>标签创建文本域
语法: <textarea rows=" 行数" cols=" 列数" >文本</textarea>
8、label为input标签穿上衣服:如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)
语法:<label for="控件id名称">(标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。)
9、单选框、复选框
<input type="radio/checkbox" value="值"name="名称" checked="checked"/>
type: 当 type="radio" 时,控件为 单选框
当 type="checkbox" 时,控件为 复选框
value: 提交数据到服务器的值(后台程序PHP使用)
name: 为控件命名,以备后台程序 ASP、PHP 使用
checked: 当设置 checked="checked" 时,该选项被默认选中
注意: 同一组 的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。
10、使用select option创建下拉菜单 (select标签里面只能放option标签,表示下拉列表的选项)
设置selected="selected"属性,则该选项就被默认选中。
11、提交/重置 按钮
语法:<input type="submit"value="提交">
<input type="reset" value="重置">