有关H5的第三章表单介绍

第三章

1.表单元素：
（1）文本框：用于输入用户的姓名、用户名和电子邮件等
（2）密码框：用于输入密码，显示为代替字符，如星号“*“
（3）单选按钮：在多个项中选择选一个
（4）复选框：在多个选项中选择一个或多个
（5）下拉列表：在多个下拉选项中选择一个
（6）按钮：用于执行表单信息的提交或取消
2.表单标签：< form > </ form >
提交方式：get(默认)，post ，get:有长度限制 ，post:没有长度限制
语法：
< form name=“表单名字” action=“提交地址” method=“get/post”>
表单元素
</ form >
3.输入框标签：< input />
文字在输入框内的标签：placeholder
语法：
< input name=“表单元素名称” type=“类型” value=“值"size=“显示宽度” maxlength=”能输入的最大字符数"checked=“是否选择”/>
< /input >
常用的表单控件：4.多行文本域标签：< textarea ></ textarea >,用于显示两行或输入两行以上的文本
语法：
< textarea name=“指定名称” cols=“列数” rows=“行数”>
文本域的内容
</ textarea >
5.按钮：
提交按钮：提交表单数据
语法：< input type=“submit” value=“提交按钮的显示值” name=“名称”/>
重置按钮：清空现有表单数据
语法：< input type=“reset” value=“重置按钮的显示值” name=“名称”/>
普通按钮：调用脚本
语法：< input type=“button” value=“普通按钮的显示值” name=“名称”/>
图片按钮：使用图片来代替按钮提交或重置表单功能
语法：< input type=“image” src=“图片路径” alt=“提交” name=“名称”/>
单选按钮：多个选项，选择一个
语法：< input type=“radio” value=“单选按钮的显示值” name=“名称” checked/>名称
复选框：多个选项，默认选择一个
下拉框按钮：select：显示可供用户选择的下拉列表 ，option:选择的值，selected:默认选择
语法：
< select name=“指定列表的名称” size=“行数”>
< option value=“可选择的值” selected=“selected”>显示项的内容< /option >
< option value=“可选择的值” >显示项的内容< /option >
…………
< /select >
6.必填验证：一定要填写，否者会提示用户在该元素中输入内容
语法：< input type=“reset” name=“名称” required=“required”/>
7类型匹配验证：
type属性常用值：控制字符数量：maxlength
8.自定义错误信息：setCustomValidity(” ")
例如：
年龄< input type=“number” max=“60” min="0"oninvalid="setCustomValidity(‘年龄必须在0至60之间！’)οninput="setCustomValidity(’’)"required >