前端ABC<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>表单小案例</title>
<style>
form {
width: 100%;
max-width: 600px;
margin: 20px auto;
font-family: "微软雅黑";
font-size: 18px;
}
input,meter,progress {
width: 100%;
height: 25px;
display: block;
padding-left: 5px;
}
</style>
</head>
<body>
<form action = "" >
<fieldset>
<legend>学生档案</legend>
<label for = "">
姓名：<input type = "text" placeholder = "请输入姓名" required>
</label>
<label for = "">
手机号码：<input type = "tel" required pattern = "^(\+86)?1[3,5,8](\d{9})$">
</label>
<label for = "">
邮箱地址：<input type = "emil">
</label>
<label for = "">
所属学院：<input type = "text" list = "crl">
<datalist id= "crl">
<option>安卓</option>
<option>ios</option>
<option>window phon</option>
</datalist>
</label>
<label for = "">
入学成绩：<input type = "number">
</label>
基础水平：<meter max = "100" value = "30"></meter>
<label for = "">
入学时间：<input type = "date">
</label>
<label for = "">
毕业时间：<input type = "month">
</label>
课程进度：<progress max = "100" min = "0" value = "30"></progress>
<input type = "submit">
</fieldset>
</form>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » HTML5表单验证案例