H5新增表单属性form属性（type属性）

最新推荐文章于 2023-06-16 16:11:40 发布

BANK HYUN ！

最新推荐文章于 2023-06-16 16:11:40 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43675509/article/details/101307145

本文详细介绍了H5新增的input类型及其属性，包括email、number、range、color等，探讨了它们如何改善用户体验和数据验证。同时，文章深入讲解了placeholder、autofocus、autocomplete等新属性的作用，以及如何利用这些特性提升表单的设计与功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5新增的input类型

<form>
        邮箱：<input type="email"><br/>
        数量：<input type="number" value="20" max="25" min="18"><br/>
        电话：<input type="tel"><br/>
        网址：<input type="url"><br/>
        范围：<input type="range" max="100" min="0"><br/>
        颜色：<input type="color"><br/>
        时间:<input type="time"><br/>
        日期：<input type="date"><br/>
        日期时间：<input type="datetime-local"><br/>
        月份：<input type="month"><br/>
        星期：<input type="week"><br/>
        提交：<input type="submit">
    </form>

其中的属性及意义为：
email帮我们自动校验了格式。
tel由于全球号码格式不一样，格式不太好校验不过帮我们在移动端点击该输入框会切换到数字键盘。
url帮我们校验了格式不过需要注意的是网址前面需要加上：http://。
number 类型用于应该包含数值的输入域。还能设置输入数字的范围
range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。还能够设定数字的限定：
效果图：

在这里插入图片描述
表单其他新增属性及意义：
placeholder:占位符，提示文本
autofocus:自动获取焦点
autocomplete:自动完成，on打开,off关闭 1.必须成功提交过 2.必须有name属性
required:必须输入，如果没有输入会阻止提交
pattern:正则表达式的验证
multiple:允许选择多个文件,在邮箱中允许输入多个邮箱地址，用,分割

<form action="">
        <!--placeholder占位符，提示文本 -->
        <!-- autofocus自动获取焦点-->
        <!--autocomplete自动完成，on打开,off关闭  1.必须成功提交过 2.必须有name属性-->
        用户名：<input type="text" name="userName" placeholder="请输入用户名" autofocus autocomplete="on"><br/>
        <!-- tel并不会进行验证，只是会在移动端打开数字键盘-->
        <!-- required必须输入，如果没有输入会阻止提交-->
        <!-- pattern正则表达式的验证-->
        手机号:<input type="tel" required pattern="^(\+86)?1\d{10}$"><br/>
        <!-- multiple允许选择多个文件,在邮箱中允许输入多个邮箱地址，用,分割-->
        文件：<input type="file" name="photo" multiple><br/>
        邮箱：<input type="email" multiple name="email">
        <input type="submit">
    </form>

效果图：
在这里插入图片描述
required必须输入，如果没有输入会阻止提交

在这里插入图片描述

<datalist id="searchList">
        <option label="top1">鹿晗送祝福</option>
        <option label="top2">李荣浩结婚</option>
        <option label="top3">向佐郭碧婷</option>
    </datalist>
    <input type="text" placeholder="请输入搜索内容" list="searchList">

在这里插入图片描述

  <select>
        <optgroup label="国漫">
            <option>哪吒</option>
            <option>葫芦娃</option>
        </optgroup>
        <optgroup label="日漫">
            <option>奥特曼</option>
            <option>海贼王</option>
        </optgroup>
    </select>

在这里插入图片描述
小案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="format-detection" content="telephone=no"/>
		<style type="text/css">
			form{
				width: 600px;
				height: auto;
			}
			label{
				display: block;
				margin: 10px 10px;
			}
		</style>
	</head>
	<body>
		<form autocomplete="on">
			<fieldset>
				<legend>学生档案</legend>
				姓名: 
				<label>
					<input type="text" required placeholder="请输入姓名"/>
				</label>
				手机号码:
				<label>
					<input type="tel"
						required 
						pattern="^1(3|4|5|6|7|8|9)\d{9}$"/>
				</label>
				邮箱:
				<label>
					<input type="email"
						required
						pattern="^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$"/>
				</label>
				学院:
				<label>
					<datalist id="searchList">
				        <option>电器与电子工程学院</option>
				        <option>经济与管理学院</option>
				        <option>外国语学院</option>
				        <option>艺术与传媒学院</option>
				    </datalist>
    				<input type="text" placeholder="请输入搜索内容" list="searchList">
				</label>
				入学成绩:
				<label>
					<input type="number" value="0" id="b" required  max="100"  step="0.1"/>
				</label>
				基础水平:<br />
				<meter max="100" value="0" step="0.1" min="0" id="a" style="width: 185px;"></meter><br />
				入学时期:
				<label>
					<input type="date" required/>
				</label>
				毕业时期:
				<label>
					<input type="date" required/>
				</label>
					<input type="submit" value="提交" />
			</fieldset>
		</form>
		<script type="text/javascript">
			var one = document.getElementById("a");
			var two = document.getElementById("b");
			two.onclick = function(){
				one.value = two.value
			}
		</script>
	</body>
</html>

在这里插入图片描述