HTML5中表单新增的type属性和其他属性

本文详细介绍了HTML5表单中新增的type属性,包括文本、密码、邮箱、电话、网址、数量、搜索、范围、颜色、时间、日期等多种输入类型,以及placeholder、autofocus、autocomplete等其他增强用户体验的属性。

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

一、表单新增的type属性
1.文本:输入框内容为文本格式
用户名:<input type="text" name="userName">
2.密码:输入框内容为密码格式
用户名:<input type="password" name="password">
3.邮箱:提交时会提示验证
邮箱:<input type="email" name="email">
4.电话:tel它并不是来实现验证,它的本质目的是为了能够在移动端打开数字键盘
电话:<input type="tel" name="tel">
5.网址:验证只能输入合法的网址,必须包含http://
网址:<input type="url" name="url">
6.数量:只能输入数字(包含小数点)不能输入其他的字符
// max:最大值  min:最小值  value:当前值
数量:<input type="number" name="number" max="100" min="50" value="60">
7.搜索:可以提供更人性化的输入体验 输入值时文本框内会出现清除键
搜索:<input type="search" name="search">
8.范围:可以选择范围
// max:最大值  min:最小值  value:当前值
范围:<input type="range" name="range" max="100" min="50" value="60">
9.颜色:可以选择颜色
颜色:<input type="color" name="color">
10.时间:可以选择时间 时分秒
时间:<input type="time" name="time">
11.日期:可以选择日期 年月日
日期:<input type="date" name="date">
12.日期时间:可以选择日期时间 日期和时间
// datetime大多数浏览器不支持,只能在苹果下面的Safari支持
日期时间:<input type="datetime" name="datetime">
13.日期时间:可以选择日期时间 日期和时间
日期时间:<input type="datetime-local" name="datetime-local">
14.月份:
月份:<input type="month" name="month">
15.星期:
星期:<input type="week" name="week">
二、表单新增的其他属性
1.placeholder:提示文文本 提示占位
用户名:<input type="text" name="userName" placeholder="请输入内容">
2.autofocus:自动获取焦点
用户名:<input type="text" name="userName" autofocus>
3.autocomplete:自动完成
// 使用自动完成必须同时满足两个条件:
// 1.必须成功提交过。2.当前添加autocomplete的元素必须有name属性
// autocomplete="on":打开;autocomplete="off":关闭
用户名:<input type="text" name="userName" autocomplete="on">
4.required:必须输入,如果没有输入则会阻止当前提交数据
// 使用自动完成必须同时满足两个条件:
// 1.必须成功提交过。2.当前添加autocomplete的元素必须有name属性
// autocomplete="on":打开;autocomplete="off":关闭
用户名:<input type="text" name="userName" required>
5.pattern:正则表达式验证
用户名:<input type="text" name="userName" pattern="/xxx/">
6.multiple:可以选择多个文件,在email中允许输入多个邮箱地址,中间以逗号分隔
上传文件:<input type="file" name="userName" multiple>
7.form:提交表单id,那么在将来指定id号的表单进行数据提交的时候,也会将当前表单元素的数据一起提交
<form action="" id="myForm">
  用户名:<input type="text" name="userName">
</form>
<input type="text" name="address" form="myForm">

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值