Form small case

1.html Code

 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</Phone number:
 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 = "select" /> 
12 is          < DataList ID = "CLIST" > 
13 is              < Option value = "Mobile Development Institute distal end" > </ Option > 
14              < Option value = "Java INSTITUTE" > </ Option > 
15              < Option value = "C ++ INSTITUTE" > </ Option > 
16          </ DataList > 
. 17          <label for = "Score" > Admission results:</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         <Entry dates:>= "INtime"forlabel</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. Article synchronization results show: script Code

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

3. The basic pattern: css Code

. 1  body, the 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  / * outer border * / 
10  form> the fieldset {
 . 11      padding : 10px ;
 12 is }
 13 is  / * all input boxes basic pattern * /
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 }

Fig 4. Effects

Guess you like