HTML 5 对表单新增的功能

最新推荐文章于 2024-07-05 20:20:47 发布

菇毒

最新推荐文章于 2024-07-05 20:20:47 发布

阅读量794

点赞数

分类专栏： web 前端学习文章标签： html javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_43960383/article/details/122756436

版权

web 前端学习专栏收录该内容

90 篇文章 4 订阅

订阅专栏

HTML 5 对表单新增的功能

1. HTML 5 对表单新增的功能

1. HTML 5 对表单新增的功能

1.1 字段输入提示

对 text 和 password 类型的表单添加 placeholder 属性，其属性值是字段输入时的提示文本，以浅灰色表示，并在用户输入任意一个字符后自动消失；
示例如下：

姓名：<input type = "text" placeholder = "请输入姓名，字符之间不能有空格！"/>

1.2 为文本域添加下拉列表选择输入

例子：为文本域添加下拉列表输入功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>为文本框增加列表输入</title>
		
	</head>
	<body>
		<form>
			名称：<input list="books" id="jcmn">
			<!-- 支持模糊输入，可分别输入 J、EE、C 和 j 进行测试 -->
			<datalist id="books">
				<option value="1"> Java SE 程序设计</option>
				<option value="2"> Java EE 程序设计</option>
				<option value="3"> C语言 程序设计</option>
				<option value="4"> Python 程序设计</option>
			</datalist>
			<input type="submit" value="提交" id="tj">
		</form>
	</body>
	<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
	<script>
		$("#tj").click(function(){
			var obj = $("#jcmn");
			var tjz=obj.val();
			alert(tjz);
		});
	</script>
</html>

20211231
模糊输入

注意：

下拉列表效果在 HBuild 里的浏览窗口不会出现，需要使用浏览器才会显示；
表单域 list 综合了表单域 text 和标签 <select> 的功能；表单域 list 还有模糊输入功能，用来实现快速地选择输入；

1.3 字段必填验证

对 text、password 和 file 等类型的表单域应用属性 required 后，在表单提交前，该表单域必须要输入值（不能为空）；
示例如下：

姓名：<input type="text" name="username" required/>

若没有输入必填字段的值而提交，会出现相应的警告信息并等待输入；

1.4 电子邮件格式验证

电子邮件地址必须包含 @ ，在表单里 E-mail 地址可用表单域 emali 验证；
示例如下：

电子邮件地址：<input type="email">

1.5 日期和时间输入

date 类型的表单域用来实现日期输入，
具体代码如下：

出生日期：<input type="date" name="user_date" id="birthday"/>

日期选择器效果如下所示：
20211231
若希望在输入日期的同时还能输入时间，需要使用 datetime-local 类型代替 date 类型；

20211231

1.6 range 类型

range 类型表单域用来输入一个在一定范围内的数字，显示为一个可滑动的控件；
示例代码如下所示：

范围：<input type="range" min="0" value="70" step="1">100

效果如下所示
20211231
例子：HTML 5 对表单新增的功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML 5 新增功能之一：表单字段验证</title>
	</head>
	<body>
		<form>
			姓名：<input type="text" required="required" id="memname" size="43" placeholder="在这输入姓名，字符之间不能有空格！" /><!-- 必填 -->
			<br />
			E-mail：<input type="email" id="email"/><!-- 验证电子邮件地址格式 -->
			<br/>
			<!-- 日期域时间选择器 -->
			出生日期：<input type="date" /><br>
			当前时间与日期：<input type="datetime-local" /><br>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>