HTML5表单
2018-05-16 本文已影响0人
二十三岁的梦
新增的input输入类型
- Email类型
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.php" method="get">
请输入您的E-mail地址:<input type="email" name="user_email"/><br/>
<input type="submit"/>
</body>
</html>
其中demo_form.php表示提交给服务器端的处理文件。
-
更多类型
typename 作用(属性) email 电子邮箱 url 网址链接 number max-规定允许的最大值
min-规定允许的最小值
step-规定合法的数字间隔(如果step='4'，则合法的数字是-4,0,4,8等)
value-规定默认值range max-规定允许的最大值
min-规定允许的最小值
step-规定合法的数字间隔(如果step='4'，则合法的数字是-4,0,4,8等)
value-规定默认值date 选取日，月，年 month 选取月，年 week 选取周和年 time 选取时间（小时和分钟） datetime 选取时间，日，月，年（UTC时间） datetime-local 选取时间，日，月，年（本地时间） search 搜索关键字 tel 电话号码 color 调用系统拾色器
新增的input属性
- autocomplete属性
新增的autocomplete属性可以帮助用户在input类型的输入框中实现自动完成内容输入，这些input类型包括：text，search，url，telephone，email，password，datepickers，range，color。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<h2>HTML5自动完成功能示例</h2>
输入你最喜欢的城市名称<br><br>
<form autocomplete="on">
<input type="text" id="city" list="cityList" title="cityList">
<datalist id="cityList" style="display:none;">
<option value="BeiJing">BeiJing</option>
<option value="QingDao">QingDao</option>
<option value="QingZhou">QingZhou</option>
<option value="QingHai">QingHai</option>
</datalist>
</form>
</body>
</html>
- autofocus属性
它是一个布尔值，可以使得在页面加载时，某表单空间自动获得焦点。这些控件可以使文本框，复选框，单选按钮和普通按钮等所有<input>标签的类型
<input type="text" name="user_name" autofocus="autofocus">
合理应用autofocus属性示例
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2312">
<title>autofocus属性应用示例</title>
</head>
<body>
<form>
<p>请仔细阅读许可协议</p>
<p>
<label for="textarea1"></label>
<textarea name="textarea1" id="textarea1" cols="45" rows="5">许可协议许可协议许可协议许可协议许可协议许可协议许可协议许可协议许可协议许可协议许可协议</textarea>
<br/>
</p>
<p>
<input type="submit" value="同意" id="s" autofocus>
<script>
if(!("autofocus" in document.createElement("input"))){
document.getElementById("s").focus();
}
</script>
<input type="submit" value="拒绝">
</p>
</form>
</body>
</html>
- form属性
有了form属性，便可以把表单内的从属元素写在页面的任意位置，然后只需要为这个元素指定form属性并设置属性值为该表单的id。
<!DOCTYPE html>
<html>
<body>
<form action="" method="get" id="form1">
请输入姓名：<input type="text" name="name1" autofocus/>
<input type="submit" value="提交"/>
</form>
<p>下面的输入框在form元素之外，但因为指定的form属性，并且值为表单的id，所以该输入框仍然是表单的一部分。</p>
请输入住址：<input type="text" name="address1" form="form1">
</body>
</html>
一个form属性引用两个或两个以上的表单，需要使用空格将表单的id分隔开。
<input type="text" name="address1" form=""form1 form2 form3/>
- 表单重写属性
formaction:用于重写表单的action属性
formenctype:用于重写表单的enctype属性
formmethod:用于重写表单的method属性
formnovalidate:用于重写表单的novalidate属性
formtarget:用于重写表单的target属性
应该注意的是，表单重写属性并不适用于所有的input输入类型，而是只适用于submit和image输入类型。
使用formaction属性，重写表单的action属性，实现将表单提交到不同的页面中去。
<!DOCTYPE html>
<html>
<body>
<form action="1.asp" id="testform">
请输入电子邮件地址：<input type="email" name="userid"/><br/>
<input type="submit" value="提交到页面1" formaction="1.asp"/>
<input type="submit" value="提交到页面2" formaction="2.asp"/>
<input type="submit" value="提交到页面3" formaction="3.asp"/>
</form>
</body>
</html>
- height与width属性
height和width属性规定用于image类型的input标签的图像高度和宽度，这两个属性只适用于image类型的<input>标签。
<!DOCTYPE html>
<html>
<body>
<form action="testform.asp" method="get">
请输入用户名：<input type="text" name="user_name"/><br/>
<input type="image" src="submit.jpg" width="50" height="50"/>
</form>
</body>
</html>
- list属性
list属性用于指定输入框所绑定的datalist元素，其值是某个datalist的id。
<!DOCTYPE html>
<html>
<body>
<form action="testform.asp" method="get">
请输入网址：<input type="url" list="url_list" name="weblink"/>
<datalist id="url_list">
<option label="新浪" value="http://www.sina.com.cn"/>
<option label="搜狐" value="http://www.sohu.com"/>
<option label="网易" value="http://www.163.com"/>
</datalist>
<input type="submit" value="提交"/>
</form>
</body>
</html>
- min,max,step属性
min,max,step属性用于为包含数字或日期的input输入类型规定限值。date,pickers,number,range - multiple属性
multiple属性支持一次性选择多个文件，并且该属性同样支持新增的email类型。
<!DOCTYPE html>
<html>
<body>
<form action="testform.asp" method="get">
请选择要上传的多个文件：<input type="file" multiple="multiple" name="img"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
- pattern属性
用于验证input类型输入框中用户输入的内容是否与自定义的正则表达式相匹配，适用于如下标签：text，search，url，telephone，email，password。
<!DOCTYPE html>
<html>
<body>
<form action="testform.asp" method="get">
请输入邮政编码：<input type="text" pattern="[0-9]{6}" name="zip_code" title="请输入6位数的邮政编码"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
- placeholder属性
可以为input类型的输入框提供一种提示(hint)，适用于：text，search，url，telephone，email和password。
<!DOCTYPE html>
<html>
<body>
<form action="testform.asp" method="get">
请输入邮政编码：<input type="text" pattern="[0-9]{6}" name="zip_code" placeholder="请输入6位数的邮政编码"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
- required属性
规定输入框填写的内容不能为空，否则不允许提交表单。适用于：text，search，url，telephone，email，password，date pickers，number，checkbox，radio，file。
<!DOCTYPE html>
<html>
<body>
<form action="testform.asp" method="get">
请输入邮政编码：<input type="text" pattern="[0-9]{6}" name="zip_code" placeholder="请输入6位数的邮政编码" required="required"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
新增的form元素
- datalist元素
- keygen元素
keygen是秘钥对生成器（key-pair generator）
<!DOCTYPE html>
<html>
<body>
<form action="testform.asp" method="get">
请输入用户名：<input type="text" name="user_name"/><br>
请选择加密强度：<keygen name="security"/><br>
<input type="submit" value="提交"/>
</form>
</body>
</html>
- output元素
用于在浏览器中显示计算结果或脚本输出，包含完整的开始和结束标签。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function multi(){
a=parseInt(prompt("请输入第1个数字。",0));
b=parseInt(prompt("请输入第2个数字。",0));
document.forms["form"]["result"].value=a*b;
}
</script>
</head>
<body onload="multi()">
<form action="testform.asp" method="get" name="form">
两数的乘积为：<output name="result"></output>
</form>
</body>
</html>
新增的form属性
- autocomplete属性
- novalidate属性
用于在提交表单时取消整个表单的验证，即关闭对表单内所有元素的有效性校验。
<!DOCTYPE html>
<html>
<body onload="multi()">
<form action="testform.asp" method="get" novalidate="true">
请输入电子邮件地址：<input type="email" name="user_email"/>
<input type="submit" value="提交">
</form>
</body>
</html>
