html5表单应用实例

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单案例</title>
 6     <link rel="stylesheet" href="../css/formcss.css">
 7 </head>
 8 <body>
 9  <form action="">
10      <fieldset>
11          <legend>学生档案</legend>
12          <label for="userName">姓名：</label>
13          <input type="text" name="userName" placeholder="请输入用户名" id="userName">
14          <label for="userPhone">手机号码：</label>
15          <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$">
16          <label for="userEmail">邮箱地址：</label>
17          <input type="email" name="userEmail" id="userEmail" required >
18          <label for="col">所属学院：</label>
19          <input type="text" id="col" list="School" placeholder="请选择">
20          <datalist id="School">
21              <option value="前端学院"></option>
22              <option value="Java学院"></option>
23              <option value="C++学院"></option>
24              <option value="人工智能学院"></option>
25          </datalist>
26          <label for="score">入学成绩：</label>
27          <input type="number" max="100" min="0" id="score">
28          <label for="level">基础水平：</label>
29           <meter id="level" value="0" max="100" min="0" low="59" high="90"></meter>
30           <label for="inTime">入学日期：</label>
31          <input type="date" id="inTime">
32          <label for="leaveTime">毕业日期</label>
33          <input type="date" id="leaveTime">
34          <input type="submit">
35      </fieldset>
36  </form>
37 
38 <script>
39     document.getElementById("score").oninput = function () {
40         document.getElementById("level").value=this.value;
41 
42     }
43     document.getElementById("userPhone").oninvalid=function () {
44         this.setCustomValidity("请输入11位手机号！")
45     }
46 </script>
47 </body>
48 </html>
 1 *{
 2     padding:0px;
 3     margin: 0px;
 4 }
 5 form{
 6     width: 300px;
 7     margin: 0px auto;
 8 }
 9 form >fieldset{
10     padding:10px;
11 }
12 form > fieldset >meter,
13 form > fieldset >input{
14     width:100%;
15     height:30px ;
16     line-height: 30px;
17     margin:10px 0;
18     border: none;
19     border:1px solid #ccc;
20     border-radius: 4px;
21     box-sizing: border-box;
22     font-style: 16px;
23 }
24 form > fieldset >meter{
25     padding:0px;
26 }

 

posted @ 2018-10-17 09:59  小虾米程序员  阅读(4130)  评论(0)    收藏  举报