html5 表单元素示例

2015/07/29 41799

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5中的表单</title>
  
<script type="text/javascript">
  
  var flag = true;
   function checkMail(){
       var url = document.getElementById("url");
       if (url.value==""){
           //表单提交时 自定义验证信息
             
           url.setCustomValidity("请输入url地址");
             
          // alert("url地址不能不空");
           flag=false;
       }
       //显式调用 checkValidity()方法 ，验证通过返回true
       else if (!url.checkValidity()){
           alert("请输入合法的url地址");
           flag= false;
       }
       else {
           alert("恭喜您输入的url地址合法");
       }
       return flag;
   }
   
</script>
</head>
<body>
     
   <!--
   novalidate="novalidate" 忽略表单的验证
     -->
  <form id="sub" method="post"    >
      <!-- placeholder属性设置文本域未输入信息的提示信息 -->
      <!-- autofocus自动获取焦点  -->
      <!-- tabindex当设置值时1,2，3...
      按tab键切换时会按照指定的值，依次切换 ..
       -->
    用户名: <input name="username" placeholder="请输入用户名" autofocus="autofocus" formmethod="get" tabindex="1">
       
     <!-- list属性引用指定的datalist的id -->
     <!-- formmethod指定该元素表单提交的方式post或者get -->
     <!-- autocompleter:自动补全内容 -->
       
   爱好: <input name="fav" autocomplete="off" list="data"  tabindex="3" formmethod="post" >
       
       
     颜色选取:<input name="color" type="color">
       
     <!-- 显示验证url,
     应在表单提交时验证，此处方便测试就添加失去焦点事件
     -->
   url:  <input type="url" id="url" name="url" onblur="checkMail();">
     
     mail:<input name="email" type="email" required>
       
       <!-- date类型，火狐,ie9 中测试不支持，
       chrome 支持....,
       datetime类型:这三款浏览器都不支持，
       datetime-local:只有chrome支持,
       time:时间输入框,chrome支持,
       week:某一年的第几周,chrome支持,
       month:某一年的第几月,chrome支持,
        -->
     出生日期:<input name="date" type="month">
       
     <!-- number: min,max :最小值和最大值；step表示变化的幅度-->
     薪资:<input type="number" min="0" max="100" step="10">
          
      <!--
      添加pattern属性利用正则表达式限制属性的内容
       -->
     年龄:<input type="text" required="required" pattern="^[0-9]{0,3}$"/>
          
     <!-- html5中的type="submit",不指定value属性时默认显示提交查询
     formaction指定提交的路径,
      -->
        
      <!-- 取消表单验证: 1、 添加 formnovalidate="formnovalidate"
                    2. form元素中添加 novalidate="novalidate"
        
       -->
        
     <input type="submit"  formaction="sub.jsp" >
  </form>
     
   <!--
   form属性定义该元素指向的表单的id,
   required :表示该字段必填
    -->
  密码: <input  name="pwd" type="password" tabindex="2" required="required" form="sub">
   <!-- datalist是html5新增标签，类似于select -->
  <datalist id="data">
    <option value="java">java</option>
     <option value="c">C</option>
   <option value="c++">C++</option>
    <option value="python">python</option>
  </datalist>
  
</body>
</html>