HTML5表单元素新特新

最新推荐文章于 2022-05-05 11:04:16 发布

asyayw884660

最新推荐文章于 2022-05-05 11:04:16 发布

阅读量63

点赞数

原文链接：http://www.cnblogs.com/Liujunyan/p/4845585.html

版权

知识点总结：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

1、新表单元素
全部都是由input标签组成
1.1 email
1.2 url
注意：输入的内容必须以http://
1.3 search
1.4 range
范围
属性:
min : 最小值
max : 最大值
step : 步长
value : 值
1.5 number
属性:
min : 最小值
max : 最大值
step : 步长
value : 值
1.6 color
通过windows的调色板选取颜色

1.7 date
弹出日历控件，选择年月日
值:2015-06-01
1.8 month
2015-06
1.9 week
2015-W13
1.10 datetime
2015-06-01T01:15Z
1.11 datetime-local

2、新表单属性
2.1 required
必须的，非空验证
<input type="text" required="false" />
2.2 multiple
在一个表单元素中，允许录入多段类型相同的数据，但必须由","作为分隔符
2.3 pattern
根据用户指定的正则表达式，对数据进行验证
2.4 autofocus
自动获取焦点

代码：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         table{
  8             border: 1px solid #1e90ff;
  9             /*单边框设置*/
 10             border-collapse: collapse;
 11             margin: 0 auto;
 12         }
 13         th,td{
 14             border: 1px solid #1e90ff;
 15             padding: 5px;
 16         }
 17     </style>
 18 </head>
 19 <body>
 20     <form name="frm">
 21         <table>
 22             <tr>
 23                 <th style="width:80px;">名称</th>
 24                 <th>控件</th>
 25                 <th>说明</th>
 26             </tr>
 27             <tr>
 28                 <td>Email类型</td>
 29                 <td>
 30                     <input type="email" name="txtEmail" id="txtEmail" />
 31                 </td>
 32                 <td>要求用户输入Email类型数据,提交表单时会自动验证</td>
 33             </tr>
 34             <tr>
 35                 <td>Search类型</td>
 36                 <td>
 37                     <input type="search" name="txtSearch" id="txtSearch" />
 38                 </td>
 39                 <td>搜索文本框，与text类型输入框相似，但是可以快速删除输入的搜索关键字</td>
 40             </tr>
 41             <tr>
 42                 <td>URL类型</td>
 43                 <td>
 44                     <input type="url" name="txtURL" />
 45                 </td>
 46                 <td>对用户输入的数据进行URL检测，如果不符合规范就给出提示，阻止表单提交</td>
 47             </tr>
 48             <tr>
 49                 <td>tel类型</td>
 50                 <td>
 51                     <input type="tel" name="txtTel" />
 52                 </td>
 53                 <td>只对移动终端有效，会显示拨号键盘，通过该键盘接收用户录入的数据</td>
 54             </tr>
 55             <tr>
 56                 <td>数字类型</td>
 57                 <td>
 58                     <input type="number" min="18" max="80" step="1" name="txtNum" />
 59                 </td>
 60                 <td>只能接受数字，min表示接受数字的下线，max同，step表示步长</td>
 61             </tr>
 62             <tr>
 63                 <td>范围类型</td>
 64                 <td>
 65                     <input type="range" min="18" max="80" step="1" value ="18" name="txtRange" id="txtRange" onchange="txtRange_change()" />
 66                 </td>
 67                 <td>提供一个滑块工具以便取得指定范围内的数值</td>
 68             </tr>
 69             <tr>
 70                 <td>颜色类型</td>
 71                 <td>
 72                     <input type="color" name="txtColor" id="txtColor" />
 73                 </td>
 74                 <td>弹出一个调色板</td>
 75             </tr>
 76             <tr>
 77                 <td>日期类型</td>
 78                 <td>
 79                     <input type="date" name="txtDate" />
 80                 </td>
 81                 <td>弹出日历框，用户选择一天的时间</td>
 82             </tr>
 83             <tr>
 84                 <td>周类型</td>
 85                 <td>
 86                     <input type="week" name="txtWeek" />
 87                 </td>
 88                 <td>弹出日历框,用户选择一个星期的时间</td>
 89             </tr>
 90             <tr>
 91                 <td>月类型</td>
 92                 <td>
 93                     <input type="month" name="txtMonth" />
 94                 </td>
 95                 <td>弹出日历框,用户选择一个月的时间</td>
 96             </tr>
 97             <tr>
 98                 <td>日期与时间类型</td>
 99                 <td>
100                     <input type="datetime" name="txtDatetime" />
101                 </td>
102                 <td>通过箭头选取时间（Safari支持的比较好）</td>
103             </tr>
104             <tr>
105                 <td>本地日期与时间类型</td>
106                 <td>
107                     <input type="datetime-local" name="txtDatetimeLocal" />
108                 </td>
109                 <td>弹出日历框,允许用户选择年月日，通过按钮选取时间</td>
110             </tr>
111             <tr>
112                 <td>Placeholder</td>
113                 <td>
114                     <input type="text" name="txtUserName" placeholder="请输入用户名" />
115                 </td>
116                 <td>placeholder属性，默认显示一段提示文字在表单元素上</td>
117             </tr>
118             <tr>
119                 <td>Required</td>
120                 <td>
121                     <input type="text" name="txtUserName" required />
122                 </td>
123                 <td>required属性要求当前元素必须录入值，否则表单不允许提交</td>
124             </tr>
125             <tr>
126                 <td>Multiple</td>
127                 <td>
128                     <input type="email" name="txtNewEmail" multiple />
129                 </td>
130                 <td>允许用户输入多段数据，但必须使用逗号进行分割</td>
131             </tr>
132             <tr>
133                 <td>Autofocus</td>
134                 <td>
135                     <input type="text" name="txtFocus" autofocus />
136                 </td>
137                 <td>autofocus属性网页加载时，让此控件自动获取焦点</td>
138             </tr>
139             <tr>
140                 <td>Pattern</td>
141                 <td>
142                     <input type="text" name="txtPhone" pattern="13\d{9}" />
143                 </td>
144                 <td>pattern属性允许用户自定义正则表达式验证控件中的内容，不符合则不允许提交</td>
145             </tr>
146             <tr>
147                 <td colspan="3" align="center">
148                     <input type="submit" value="提交" />
149                     <input type="button" value="取值" onclick="getValue()" />
150                 </td>
151             </tr>
152 
153 
154 
155         </table>
156         <script>
157             function txtRange_change(){
158                 //document.form的name属性.表单内元素的name属性这样就可以定位到指定的表单中的元素（表单特有）
159                 var value=document.frm.txtRange.value;
160                 console.log("RangeValue:"+value);
161             }
162             function getValue(){
163                 var value=document.frm.txtColor.value;
164                 console.log("ColorValue:"+value);
165             }
166         </script>
167     </form>
168 </body>
169 </html>

Chrome显示效果：

转载于:https://www.cnblogs.com/Liujunyan/p/4845585.html

asyayw884660

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5表单元素新特新

知识点总结：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　1、新表单元素全部都是由input标签组成 1.1 email 1.2 url 注意：输入的内容必须以http:// 1.3 search 1.4 range 范围属性: ...
复制链接

扫一扫