H5新增表单属性form属性(type属性)

本文详细介绍了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>

在这里插入图片描述

### HTML5 中新增的 Input 类型及属性 HTML5 的推出极大地扩展了 `<input>` 元素的功能,增加了多种新类型的输入控件以及一些实用的新属性。这些改进使得开发者能够更方便地处理各种数据类型并提升用户体验。 #### 新增的 Input 类型 以下是 HTML5 中新增的一些重要 `type` 属性值: 1. **email** - 用于指定电子邮件地址的输入框。 - 浏览器会验证该字段的内容是否符合标准的电子邮件格式[^1]。 2. **url** - 提供了一个专门用来输入 URL 地址的文本框。 - 输入的数据会被自动校验以确保其是一个合法的网址。 3. **number** - 创建一个允许用户输入数值的控件。 - 支持上下箭头调整数字大小,并可以设置最小值 (`min`) 和最大值 (`max`) 范围。 4. **range** - 表现为滑动条形式的一个数值选择器。 - 用户可以通过拖拽滑块来选取某个范围内的整数或浮点数值。 5. **date**, **time**, **datetime-local**, **month**, **week** - 这些类型分别提供了不同的日期时间选择功能。 - `date`: 让用户挑选具体某一天。 - `time`: 设置特定时刻。 - `datetime-local`: 结合日期和本地时间为单一单元格。 - `month`: 如同名称所示仅限于月份的选择[^3]。 6. **color** - 打开颜色拾取对话框让用户选定一种色彩作为返回值。 7. **search** - 定义搜索引擎查询字符串使用的特殊文本区域。 - 外观上可能稍有不同以便提示这是搜索栏而非普通文字录入区[^2]。 8. **tel** - 预留给电话号码用途的输入方式。 - 不做任何内置格式化检查但由于设备特性可能会触发拨号键盘布局优化。 9. **file** (增强) - 原本就存在但在新版中有更多选支持多文件上传等功能。 #### 新增的重要属性 除了上述提到的各种新型态之外还有一些通用或者针对某些种类特别设计出来的附加参数可供配置: 1. **placeholder** - 显示灰色占位符告诉访问者预期填入什么样的资料直到他们实际动手为止就会消失不见. 2. **required** - 强迫使用者必须填写此目才能继续下一步骤操作比如提交表单之类的情况发生时才会生效. 3. **pattern** - 接受正则表达式的模式匹配机制从而实现自定义规则下的有效性和错误反馈消息定制服务. 4. **autofocus** - 页面加载完成后立即聚焦到设定好的那个元素上面去无需额外动作即可获得焦点状态. 5. **readonly** - 将当前对象设为只读模式意味着虽然可见却无法修改内容除非另有说明解除限制才行. 6. **disabled** - 把组件暂时禁用掉既不可见也不能交互直至重新启用为止. 7. **autocomplete** - 控制网页上的个人历史记录能否被利用起来辅助快速完成常见重复性的任务像登录名密码之类的敏感信息安全保护措施之一就是将其关闭即 `"off"` 模式下运行[^4]. 下面给出一段综合运用以上特性的示范代码片段如下所示: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HTML5 Form Example</title> </head> <body> <form action="#" method="post" autocomplete="on"> <!-- Email Field --> <label for="email">电子邮箱:</label><br/> <input type="email" id="email" name="user_email" placeholder="请输入您的邮件..." required/><br/> <!-- Number Field with Range Constraints --> <label for="age">年龄:</label><br/> <input type="number" id="age" name="user_age" min="18" max="100"/><br/> <!-- Date Picker --> <label for="dob">出生日期:</label><br/> <input type="date" id="dob" name="user_dob"/><br/> <!-- Color Selector --> <label for="fav_color">最喜欢的颜色:</label><br/> <input type="color" id="fav_color" name="favorite_color"/> <!-- Submit Button --> <button type="submit">注册账户</button> </form> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值