?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> ?6 ????<title>学生档案</title> ?7 ????<style> ?8 ????????body { ?9 ????????????margin: 0; 10 ????????????padding: 0; 11 ????????????background-color: #F7F7F7; 12 ????????????font-family: ‘汉仪大隶书繁‘; 13 ????????} 14 ?15 ????????form { 16 ????????????max-width: 640px; 17 ????????????width: 100%; 18 ????????????margin: 24px auto; 19 ????????????font-size: 28px; 20 ????????} 21 ?22 ????????label { 23 ????????????display: block; 24 ????????????margin: 10px 10px 15px; 25 ????????????font-size: 24px; 26 ????????} 27 ?28 ????????input { 29 ????????????display: block; 30 ????????????width: 100%; 31 ????????????height: 40px; 32 ????????????font-size: 22px; 33 ????????????margin-top: 10px; 34 ????????????padding: 6px 10px; 35 ????????????color: #333; 36 ????????????border: 1px solid #CCC; 37 ????????????box-sizing: border-box; 38 ????????} 39 ?40 ????????meter, progress { 41 ????????????display: block; 42 ????????????width: 100%; 43 ????????????margin-top: 10px; 44 ????????} 45 ?46 ????????.btn { 47 ????????????margin-top: 30px; 48 ????????} 49 ?50 ????????.btn input { 51 ????????????color: #FFF; 52 ????????????background-color: green; 53 ????????????border: 0 none; 54 ????????????outline: none; 55 ????????????cursor: pointer; 56 ????????} 57 ?58 ????</style> 59 </head> 60 <body> 61 ????<form action=""> 62 ????????<fieldset> 63 ????????????<legend>学生档案</legend> 64 ????????????<label for=""> 65 ????????????????姓名: <input type="text" required autofocus placeholder="请输入姓名"> 66 ????????????</label> 67 ????????????<label for=""> 68 ????????????????手机号码: <input type="tel" pattern="1\d{10}" placeholder="请输入手机号码"> 69 ????????????</label> 70 ????????????<label for=""> 71 ????????????????邮箱地址: <input type="email" placeholder="请输入邮箱地址"> 72 ????????????</label> 73 ????????????<label for=""> 74 ????????????????所属学院: <input type="text" list="course" placeholder="前端与移动开发学院"> 75 ????????????????<datalist id="course"> 76 ????????????????????<option value="前端与移动开发"></option> 77 ????????????????????<option value="PHP"></option> 78 ????????????????????<option value="JAVA"></option> 79 ????????????????????<option value="Android"></option> 80 ????????????????????<option value="IOS"></option> 81 ????????????????????<option value="UI设计"></option> 82 ????????????????????<option value="C++"></option> 83 ????????????????</datalist> 84 ????????????</label> 85 ????????????<label for=""> 86 ????????????????入学成绩: <input type="number" max="100" id="score" step="10" value="80"> 87 ????????????</label> 88 ????????????<label for=""> 89 ????????????????基础水平: <meter min="0" max="100" low="60" high="80" value="80" id="level"></meter> 90 ????????????</label> 91 ????????????<label for=""> 92 ????????????????入学日期: <input type="date" value="2016-01-01"> 93 ????????????</label> 94 ????????????<label for=""> 95 ????????????????毕业时间: <input type="date" value="2016-05-01"> 96 ????????????</label> 97 ????????????<label for=""> 98 ????????????????课程进度: <progress min="0" max="100" value="10"></progress> 99 ????????????</label>100 ????????????<label for="" class="btn">101 ????????????????<input type="submit" value="保存">102 ????????????</label>103 ????????</fieldset>104 ????</form>105 ????<script>106 ????????var score = document.getElementById(‘score‘);107 ????????var level = document.getElementById(‘level‘);108 109 ????????score.oninput = function () {110 ????????????level.value = this.value;111 ????????}112 ????</script>113 </body>114 </html>纯css制作学生入学表单
原文地址：http://www.cnblogs.com/fdxxiaobai/p/7642469.html