表单小案例

1.html代码

 1 <form action="">
 2     <fieldset>
 3         <legend>学生档案</legend>
 4         <label for="userName">姓名：</label>
 5         <input type="text" name="userName" id="userName" placeholder="请输入用户名"/>
 6         <label for="userPhone">手机号码：</label>
 7         <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"/>
 8         <label for="email">邮箱地址：</label>
 9         <input type="email" required name="email" id="email"/>
10         <label for="collage">所属学院：</label>
11         <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"/>
12         <datalist id="cList">
13             <option value="前端与移动开发学院"></option>
14             <option value="java学院"></option>
15             <option value="c++学院"></option>
16         </datalist>
17         <label for="score">入学成绩：</label>
18         <input type="number" max="100" min="0" value="0" id="score"/>
19         <label for="level">基础水平：</label>
20         <meter id="level" max="100" min="0" low="59" high="90"></meter>
21         <label for="inTime">入学日期：</label>
22         <input type="date" id="inTime" name="inTime"/>
23         <label for="leaveTime">毕业日期：</label>
24         <input type="date" id="leaveTime" name="leaveTime"/>
25         <input type="submit"/>
26     </fieldset>
27 </form>

2.同步成绩显示条：script代码

1 <script>
2     document.getElementById("score").oninput=function(){
3         document.getElementById("level").value=this.value;
4     }
5 </script>

3.基本样式：css代码

 1 body,fieldset,legend,label,input,datalist,option,meter{
 2     padding: 0;
 3     margin: 0;
 4 }
 5 form{
 6     width: 600px;
 7     margin: 20px auto;
 8 }
 9 /*外边框*/
10 form > fieldset{
11     padding: 10px;
12 }
13 /*所有的输入框基本样式*/
14 form > fieldset > meter,
15 form > fieldset > input{
16     width: 100%;
17     height: 40px;
18     line-height: 40px;
19     margin: 10px 0;
20     border: none;
21     border: 1px solid #ccc;
22     /*圆角*/
23     border-radius: 4px;
24     font-size: 16px;
25     padding-left: 5px;
26     /*width=内容+padding+border
27         盒模型
28     */
29     -webkit-box-sizing: border-box;
30     -moz-box-sizing: border-box;
31     box-sizing: border-box;
32 }
33 form > fieldset > meter{
34     padding-left: 0px;
35 }

4.效果图