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>
