H5之语义化标签和表单新增标签及案例

1.常用的h5语义化标签
header: 定义了文档的头部区域
main：定义文档主体部分
footer：定义 section 或 document 的页脚。
nav：定义运行中的进度（进程）。
article：定义页面的侧边栏内容
aside：定义页面内容之外的内容。
section：定义文档中的节（section、区段）。
details：用于描述文档或文档某个部分的细节
summary：标签包含 details 元素的标题
figure：规定独立的流内容（图像、图表、照片、代码等等）。
figcaption：定义 figure 元素的标题
mark定义带有记号的文本，高亮显示文本。
meter：定义度量衡。仅用于已知最大和最小值的度量。
progress：定义任何类型的任务的进度。

具体可查阅W3C手册。

2.表单新增标签
placeholder 占位符
autofocus 获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成，用于表单元素，也可用于表单自身
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭验证，可用于form标签
required 验证条件，必填项
pattern 正则表达式验证表单
3.表单的新增type类型
a) email：输入email格式
b) tel：手机号码
c) url：只能输入url格式
d) number：只能输入数字
e) search：搜索框
f) range：范围，可以进行拖动，通过value进行取值
g) color ：拾色器，通过value进行取值
h) time ：时间
i) date：日期不是绝对的
j) datetime：时间日期
k) month：月份
l) week：星期
下面我们来一起做一个案例：

效果展示：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>h5表单相关元素练习</title>
	<style>
		form > fieldset {
			width: 600px;
			margin: 20px auto;
			padding: 10px;
		}
		form > fieldset > input,
		form > fieldset > meter{
			width: 100%;
			height: 30px;
			line-height: 30px;
			margin: 5px 0;
			border: 1px solid #ccc;
			border-radius: 3px;
			box-sizing:border-box;
		}
	</style>
</head>
<body>
	<form action="">
		<fieldset>
			<legend>学生档案：</legend>
			<label for="username">姓名：</label>
			<input type="text" placeholder="请输入用户名" id="username" name="username">
			<label for="usertel">邮箱地址：</label>
			<input type="tel" placeholder="请输入手机号码" id="usertel" name="usertel">
			<label for="useremail">手机号码：</label>
			<input type="email" id="useremail" name="useremail">
			<label for="schoolname">所属学院:</label>
			<input type="text" placeholder="请选择" id="schoolname" name="schoolname" list="formDatalist">
			<datalist id="formDatalist">
				<option value="前端" label="好极了"></option>
				<option value="java" label="最好的后端语言"></option>
				<option value="javascript" label="前端必学语言"></option>
				<option value="c++" label="表示学不懂"></option>
			</datalist>
			<label for="score">入门成绩</label>
			<input type="number" id="score" name="score" max="100" min="0" step="5" value="0">
			<label for="base">基础水平</label>
			<meter value="0" high="80" low="59" max="100" min="0" id="base">
			</meter>
			<label for="indate">入学日期：</label>
			<input type="date" id="indate" name="indate">
			<label for="leavedate">毕业日期：</label>
			<input type="date" id="leavedate" name="leavedate">
			<input type="submit" value="提交">
		</fieldset>
	</form>
</body>
<script>
	window.onload = function(){
		var score = document.getElementById('score');
		score.oninput = function(){
			var base = document.getElementById('base');
			base.value = score.value;
		}
	}

</script>
</html>

本文属个人学习整理记载

H5之语义化标签和表单新增标签及案例

猜你喜欢