HTML5新增表单属性总结

最新推荐文章于 2022-03-18 15:18:21 发布

点燃火柴

最新推荐文章于 2022-03-18 15:18:21 发布

阅读量689

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/qw8704149/article/details/106308343

版权

HTML5新增表单属性总结

1.HTML5新增的表单元素

datalist:数据列表，配合option使用本身为不可见元素为普通的input提供输入建议

<!DOCTYPE html>
<html>
	<head>
	    <meta charset="UTF-8">
	    <title>datalistTest</title>
	</head>
	<body>
	    <h3>html5新表单元素datalist</h3>
	    <form>
	    	<datalist id="dishList" >
	            <option>蛋炒饭</option>
	            <option>白米饭</option>
	            <option>红薯粉</option>
	            <option>土豆丝</option>
	        </datalist>
	        <label>午餐:</label><input type="text" list="dishList" name="lunch"></br>
			<input type="submit">
		</form>
	 </body>
</html>

progress:进度条, 通过指定value来控制进度条

<!DOCTYPE html>
<html>
	<head>
	    <meta charset="UTF-8">
	    <title>progressTest</title>
	</head>
	<body>
	    <h3>html5新表单元素progress</h3>
	    <form>
	        <label>下载进度:</label><progress id="progressId" value="0.0"></progress></br>
		</form>
	 </body>
	 <script>
	    var timer = setInterval(function(){
	        progressId.value = parseFloat(progressId.value) + 0.05
	        if(progressId.value >= 1){
	            clearInterval(timer)
	        }
	    },100);
	</script>
</html>

meter:刻度尺用红黄绿三色表示一个值所处的范围;使用方法:<meter min="最小可能值" max="最大可能值" low="合理下限" high="合理上限" value="实际值" optimum="最优值"></meter>
说明:
1.最优值在合理下限/上限之间,刻度颜色变化:黄-绿-黄;
2.最优值在合理下限之下,刻度颜色变化:绿-黄-红;
3.最优值在合理上限之上,刻度颜色变化:红-黄-绿
output:输出，用于描述表单中的计算结果，语义标签样式与普通的span相同<output>xxx</output>

2.HTML5input标签新增的输入类型

email:用于email地址的验证在这里插入代码片 <input type="email" name="email">
url:用于url的验证 <input type="url" name="url">
number:用于数字的验证 <input type="number" name="number"> ；也可以与min、max、step属性一起搭配使用，满足实际需要 <input type="number" name="height" min="20" max="260" step="10">
range:范围选择控件，帮助用户在一定范围内选择一个数字，默认选择范围0~100 <input type="range" name="range" > ；可以通过min、max、step属性调整最小值、最小值、步幅 <input type="range" name="range" min="50" max="2000" step="50">
search:搜索输入域，在手机浏览器中右下角呈现搜索按键
tel:电话号码输入域，在手机浏览器中弹出数字输入键盘
color:用于获取拾色器
date:选取日、月、年 <input type="date" name="date">
month:选取月、年 <input type="month" name="month"
week:选取周、年 <input type="week" name="week">
time:选取小时、分钟 <input type="time" name="time">
datetime:选取时间、日、月、年（UTC时间）<input type="datetime" name="datetime">
datetime-local:选取时间、日、月、年（本地时间）<input type="datetime-local" name="datetime-local">

3.HTML5表单元素新增的属性

autocomplete:自动补全，是否自动记录之前提交的数据，用于下一次输入建议; 可选值:on/off,默认true,可以通过配置off来关闭 autocomplete=“off” <input autocomplete="off">
placeholder:占位符，用于在输入框中的提示性文字与value属性的不同之处是不能用于表单提交 <input placeholder="提示文字">
autofocus:打开页面时，自动获得输入焦点；不添加该属性时不自动获取焦点，需要时添加该属性即可 <input autofocus>
multiple:是否允许输入多个若声明了该属性允许在输入框用逗号分隔多个值进行输入不添加该属性时不允许输入多个值，若需要同时添加多个值添加该属性即可 <input type="email" multiple>
form:为一个元素指定form属性，值为某个表单的ID 则该表单输入可以放到form标签外部

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <h3>html5表单元input新属性form</h3>
    <form id="form-submit"></form>
    <input type="text" name="userName" form="form-submit" autofocus placeholder="请输入用户名"/></br>
    <input type="password" name="passwd" form="form-submit" placeholder="请输入密码"/></br>
    <input type="email" name="email" form="form-submit" placeholder="请输入所有邮箱"/></br>
    <input type="submit" form="form-submit"/>
 </body>
</html>

required:输入框是否必填，在表单提交时验证是否有输入，没有则弹出提示消息，不添加该属性时不验证，若要验证添加该属性即可 <input required>
maxlength:在有输入的情况下，限定输入框中最大字符数 <input maxlength="16"/>
minlength:在有输入的情况下，限定输入框中最小字符数，不是HTML5标准属性，仅支持部分浏览器(Chrome) <input minlength="8"/>
min:限定输入数字的最小值 <input type="number" min="100"/>
max:限定输入数字的最大值 <input type="number" max="100"/>
step:限定输入数字的步长，默认1，通常与min、max属性一起使用 <input type="number" step="2"/>
pattern:指定一个正则表达式，对输入内容进行验证 <input type="text" name="tel" pattern="^1[3456789]\d{9}$"/> 注意:上述表达式可以省略 ^和$，pattern属性默认会添加

点燃火柴

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增表单属性总结

HTML5新增表单属性总结HTML5 新增的表单元素HTML5 input标签新增的输入类型email:用于email地址的验证 <input type="email" name="email">url:用于url的验证<input type="url" name="user_url" /><input type="url" name="user_url" />HTML5 表单元素新增的属性...
复制链接

扫一扫