html5 input 屬性 表單屬性

html5 的input增加了 type為 email  url  tel number  date pickers   range  input等。

  type類型為 email url number  等 這些在實際使用中並沒有多少不一樣 主要是在手機端 包括安卓和ios 對這些類型有一定的封裝， 比如說number   手機端就會彈出來只有數字的鍵盤

 date pickers 則有更大的不同 不僅是手機端還是pc端，看起來都比較高大上，下面就舉例說明一下吧

為了美觀點， 引入了 layui

 date

 <div class="layui-form-item">
        <label class="layui-form-label">date</label>
        <div class="layui-input-block">
            <input type="date" name="title" required  lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
        </div>
    </div>

效果如下 pc和手機端

 

 

 

 

 

 

 

                   

MONTH

 <div class="layui-form-item">
        <label class="layui-form-label">MONTH</label>
        <div class="layui-input-block">
            <input type="month" name="title" required  lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
        </div>
    </div>

效果如下 pc和手機端  效果同上， 

week

  <div class="layui-form-item">
        <label class="layui-form-label">MONTH</label>
        <div class="layui-input-block">
            <input type="week" name="title" required  lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">
        </div>
    </div>

 

效果如下   pc和手機端  手機端選完日期 會自動計算第幾周 

 

 

 

 

 

 

 time 和 datetime   還有datetime-loacl  基本類似 不再一一贅述

需要注意的是  datetime 屬性好像已經要被拋棄了，測試了一下，瀏覽器不兼容，用datetime-loacl 沒有問題

接下來  

range  input 類型

 <div class="layui-form-item">
        <label class="layui-form-label">MONTH</label>
        <div class="layui-input-block">
            <input type="range" name="title" min="1" max="100"  required  lay-verify="required" placeholder="請輸入標題" autocomplete="off" >
        </div>
    </div>

   效果如下 

 

 

 

 

Search inout 類型 

 

 

 

 

Color input  類型 

  

 

 

 

 

表單屬性：

1. autocomplete屬性

<form class="layui-form" autocomplete="on" action="">

 主要作用就是自動填充， 如果在當前頁面提交過，下次如果再填寫的話， 會在輸入框下方顯示上次提交的內容

 如果不需要， 只需要在對應的單獨input框 加入即可

注釋：autocomplete 屬性適用於 <form>，以及下面的 <input> 類型：text, search, url, telephone, email, password, datepickers, range 以及 color。

2.autofouse屬性

            <input type="text" name="title" autofocus="autofocus" required  lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">

適用於所有的input標簽   自動聚焦input框的輸入，不需要鼠標點點擊，默認打開輸入框 

3. multiple 屬性 

規定輸入域中可選擇多個值  適用於<input> 標簽的 email和file 

            <input type="file" name="title" multiple="multiple"  required  lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">

 

 注意 ： 當使用在郵件上時 每個郵件屬性需要用英文逗號隔開

4.palceholder  屬性 

 提示框   功能很好 適用於，  text  search  password  url  email  telephone  

            <input type="text" name="title" multiple="multiple"  required  lay-verify="required" placeholder="請輸入標題" autocomplete="off" class="layui-input">

  

 

 5. require 屬性 

 

 

 

  這個layui做的比較好   還包括對其類型的篩選，比如只能填寫number  string等   

link 可以引入 標題欄圖標

<link  rel="icon"  href="icon.gif"    type="image/gif"  sizes="16*16">