<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*
{
padding: 0;
margin:0;
}
form
{
width: 600px;
margin: 20px auto;
}
form>fieldset
{
padding: 10px;
}
form>fieldset>meter,
form>fieldset>input
{
width: 100%;
height: 40px;
line-height: 40px;
margin: 10px 0;
border: none;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
padding-left: 5px;
box-sizing: border-box;
}
form>fieldset>meter
{
padding-left: 0px;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名">
<label for="userPhone">手机号码</label>
<input type="tel" name="userPhone" id="userPhone" placeholder="请输入手机号" pattern="^1\d{10}$">
<label for="">邮箱地址</label>
<input type="email" required name="email" id="email">
<label for="">所属学院</label>
<input type="text" name="collage" id="collage" list="clist" placeholder="请选择">
<datalist id="clist">
<option value="前端移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist><br>
<label for="">入学成绩</label>
<input type="number" max="100" min="0" value="0" id="score">
<label for="">基础水平</label>
<meter id="level" max="100" min="0" low="49" high="100"></meter>
<labe>入学日期</labe>
<input type="date" name="" id=""><br>
<label>毕业时间</label>
<input type="date"><br>
<input type="submit">
</fieldset>
</form>
<script>
document.getElementById("score").oninput=function()
{
document.getElementById("level").value=this.value;
}
</script>
</body>
</html>WEB-11-HTML5-表单总结案例
猜你喜欢
转载自blog.csdn.net/qq_31741481/article/details/86586910
今日推荐
周排行