html5表格样式 h5表单样式

      伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。    

1.1新增表单类型

- email - 限定输入内容为邮箱地址，表单提交时会校验格式
- url - 限定输入内容为URL，表单提交时会校验格式
- number - 限定输入内容为数字，表单提交时会校验格式
- range - 数值范围选择器
- Date Pickers - 日期时间选择器
+ 样式不能修改，移动端用的比较多，因为移动端显示的是系统的时间或日期选择器
+ date - 选取日、月、年
+ month - 选取月、年
+ week - 选取周和年
+ time - 选取时间（小时和分钟）
+ datetime - 选取时间、日、月、年，浏览器兼容性不好，效果等同于datetime-local
+ datetime-local - 选取本地时间、日、月、年
- search - 搜索域，语义化，表示定义搜索框

代码：

<form action="">
        <fieldset>
            <legend>表单类型</legend>
            <label for="">
                email: <input type="email" name="email" required>
            </label>
            <label for="">
                color: <input type="color" name="color">
            </label>
            <label for="">
                url: <input type="url" name='url'>
            </label>
            <label for="">
                <!-- step 步数-->
                number: <input type="number" step="3" name="number">
            </label>
            <label for="">
                range: <input type="range" name="range" value="20">
            </label>
            <label for="">
                search: <input type="search" name="search">
            </label>
            <label for="">
                tel: <input type="tel" name="tel">
            </label>
            <label for="">
                time: <input type="time" name="time">
            </label>
            <label for="">
                date: <input type="date" name="date">
            </label>
            <label for="">
                datetime: <input type="datetime">
            </label>
            <label for="">
                week: <input type="week" name="week">
            </label>
            <label for="">
                month: <input type="month" name="month">
            </label>
            <label for="">
                datetime-local: <input type="datetime-local" name="datetime-local">
            </label>
            <input type="submit">
        </fieldset>
    </form>

 

其他常用旧表格类型：

<form action="">
    <input type="text"/>
    <input type="button"/>
    <input type="submit"/>
    <input type="checkbox"/>
    <input type="radio"/>
    <input type="password"/>
    <input type="file"/>
    <input type="image"/>
    <input type="reset"/>
</form>

1.2新增表单属性

- form
+ autocomplete 设置整个表单是否开启自动完成 on|off
+ novalidate 设置H5的表单校验是否工作 true 不工作 不加该属性代表校验

- input:
+ autocomplete 单独设置每个文本框的自动完成
+ autofocus 设置当前文本域页面加载完了过后自动得到焦点
+ form 属性是让表单外的表单元素也可以跟随表单一起提交
+ form overrides
* formaction 在submit上重写表单的特定属性，当点击当前submit时会以当前值使用
* formenctype,
* formmethod,
* formnovalidate,
* formtarget
+ list 作用就是指定当前文本框的自动完成列表的数据 datalist 在界面上是看不见的，只是用于定义数据列表的
+ min / max / step
* min max 限制值的范围，但是不会再输入时限制，提交时校验，
* step设置的是每次加减的增量
* 主要使用在number range datepicker上
+ multiple
* 文本域的多选
+ pattern
* 设置文本框的匹配格式（正则）
+ placeholder
* 文本框占位符
+ required
* 限制当前input为必须的

 

代码：

1 <form action="" autocomplete="on" id="form" >
 2         <fieldset>
 3             <legend>表单属性</legend>
 4             <label for="">
 5                 autofocus: <input type="text" autocomplete="on" name="autofocus" autofocus required>
 6             </label>
 7             <label for="">
 8                 placeholder: <input type="text" pattern="\D+" placeholder="这是一个占位符" novalidate>
 9             </label>
10             <label for="">
11                 multiple: <input type="file" multiple>
12             </label>
13             <input type="submit" value="提交">
14         </fieldset>
15     </form>
16     <label for="">
17         表单外的一个元素：
18         <input type="text" name="outer" form="form">
19     </label>

 

1.3表单事件

oninput 用户输入内容时触发，可用于移动端输入字数统计
oninvalid 验证不通过时触发 setCustomValidity 设置自定义提示

 

代码：

1     <form action="">
 2         <fieldset>
 3             <legend>表单事件</legend>
 4             <label for="">
 5                 oninput: <input type="email" id="input">
 6             </label>
 7             <input type="submit" value="提交">
 8         </fieldset>
 9     </form>
10     <script>
11         var input = document.getElementById('input');
12 
13         input.oninvalid = function () {
14 
15             this.setCustomValidity('请输入正确的邮箱地址')
16         }
17     </script>

1.4移动端虚拟键盘调用

1   <input type="text" name="txt_text" id="txt_text">
2     <input type="number" name="txt_number" id="txt_number">
3     <input type="email" name="txt_email" id="txt_email">
4     <input type="tel" name="txt_tel" id="txt_tel">
5     <input type="url" name="txt_url" id="txt_url">