0
点赞
收藏
分享

微信扫一扫

HTML 5 对表单新增的功能

忍禁 2022-01-31 阅读 30

HTML 5 对表单新增的功能

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

1.1 字段输入提示

textpassword 类型的表单添加 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
模糊输入
20211231
注意:

  1. 下拉列表效果在 HBuild 里的浏览窗口不会出现,需要使用浏览器才会显示;
  2. 表单域 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>

20211231

举报

相关推荐

0 条评论