html5中關於input用法的改變

測試環境:Firefox 10.0、Safari 5.1、Opera 11.61, Chrome 14.0.835.202

自己測試的時候都有寫在form表單裏,有提交按鈕驗證。因爲對博客使用還不是很熟練,發博文的時候只有捨棄submit驗證。大家在本地練習的時候可以寫上submit驗證,看各個瀏覽器的對這些新增的類型驗證的區別。

一、新增的屬性和屬性值

在HTML5中,大幅度地增加與改良了input屬性的種類,可以簡單的使用這些屬性來實現之前需要使用JavaScript才能實現的。對於html5中新增的input屬性支持得最多、最全面的是Opera瀏覽器。

  • 1. type屬性

    html5中input的type屬性增的可取值新增幾種,對於不支持這幾種新增值的瀏覽器會統一解析爲text類型。

    url, email, date, time, datetime, month, week, number, range, search, tel, color
    • ① url類型

      url類型的input元素是一種專門用來輸入url地址的文本框。提交時如果該文本框中的內容不是url地址格式的文字,則不允許提交。

      非url提交時Firefox、Chrome 提示錯誤,Opera自動將url框中值轉化爲url格式,ie9和safari不支持,正常提交

    • ② email類型

      email類型的input元素是一種專門用來輸入email的文本框。提交時如果該文本框中的內容不是email地址格式的文字則不允許提交,但是它並不檢查email地址是否存在,提交時該文本框可以爲空,除非加上了 required 屬性。
      email類型的文本框具有一個 multiple 屬性——它允許在該文本框中輸入一串以逗號分割的email地址。當然並不強制要求用戶輸入該email地址列表。

      Firefox、Chrome、Opera 非email提交時提示錯誤,支持required,ie9和safari不支持,正常提交

    • ③ date類型

      date類型的input元素是深受開發者喜愛的一種元素我們也經常看到網頁中要求我們輸入的各種各樣的日期,例如生日、購買日期、訂票日期等。date類型的input元素以日曆的形式方便用戶輸入。當該文本框獲取焦點時,顯示日曆,可以在日曆總選擇日期進行輸入。

      Opera點擊彈出一個日曆下拉框,但不允許手動輸入。Chrome、Safari表現一致,但Safari在提交時沒有驗證,在輸入框右側有上下兩個按鈕,點擊加減天,Firefox、ie9不支持

    • ④ time類型

      time類型的input元素是一種專門用來輸入時間的文本框,並且在提交時會對輸入時間的有效性進行檢查。它的外觀取決於瀏覽器。

      Opera類似系統的時間設置框。Chrome、Safari表現一致,但Safari在提交時沒有驗證,在輸入框右側有上下兩個按鈕,點擊加減分鐘,Firefox、ie9不支持

    • ⑤ datetime類型

      datetime類型的input元素是一種專門用來輸入UTC日期和時間的文本框,並且在提交時會對輸入的日期和時間進行有效性檢查。

      Opera支持的最好,很類似date和time的組合。Chrome、Safari表現一致,但Safari在提交時沒有驗證,在輸入框右側有上下兩個按鈕,點擊加減分鐘,Firefox、ie9不支持

    • ⑥ datetime-local類型

      datetime-local類型的input元素是一種專門用來輸入本地日期和時間的文本框,並且在提交時會對輸入的日期和時間進行有效檢查。

      Opera中和datetime表現上的區別就是末尾少了個UTC。Chrome、Safari表現一致,但Safari在提交時沒有驗證,Firefox、ie9不支持

    • ⑦ month類型

      month類型的input元素是一種專門用來輸年月份的文本框,並且在提交時會對輸入的月份進行有效檢查。

      Opera中和date類似,只是只能選擇到月份。Chrome、Safari表現一致,但Safari在提交時沒有驗證,Firefox、ie9不支持

    • ⑧ week類型

      week類型的input元素是一種專門用來輸周號的文本框,並且在提交時會對輸入的周號進行有效檢查。

      Opera提供下拉選擇,不允許手動輸入。Chrome、Safari表現一致,但Safari在提交時沒有驗證,Firefox、ie9不支持

    • ⑨ number類型

      number類型的input元素是一種專門用來輸數字的文本框,並且在提交時會對輸入的內容是否爲數字。它們具有 minmax 與 step 屬性。 帶有數值控制按鈕,以控制其數值,使之不超過最大值於最小值,同時在點擊該數值控制按鈕時,其中的數值會按step屬性進行增減,當然也可以直接在其中輸入數字。

      Opera、Chrome、Safari表現一致,但Safari在提交時沒有驗證,Firefox、ie9不支持

    • ⑩ range類型

      range類型的input元素是一種只允許輸入一段範圍內數值的文本框,它具有min屬性與max屬性,可以設定最小值與最大值(默認爲0與100),它還具有step屬性,可以制定每次拖動的維度,用滑動條的方式進行值的制定。

      Opera中滑條帶刻度、Chrome、Safari不帶,Firefox、ie9不支持

    • ⑾ search類型

      search類型的input元素是一種專門用來輸入搜索關鍵詞的文本框的文本框。search類型與text類型僅僅在外觀上有卻別。在Safari瀏覽器中,它的外觀爲操作系統默認的圓角矩形文本框,但這個外觀可以用css央視表進行改寫。在其他瀏覽器中,TA的外觀暫與text類型的文本框外觀相同,但可以用css樣式表進行改寫。(-webkit-appearance:textfield)

       

      Safari和Chrome在輸入框有內容時會默認在輸入框右邊出現一個×

    • ⑿ tel類型

      tel類型的input元素被設計爲用來輸入電話號碼的專用文本框。它沒有特殊的校驗規則,不強制輸入數字(因爲許多電話號碼通常帶有其他文字),譬如86-010-86670831.但是開發者可以通過 pattern屬性來制定對於輸入的電話號碼格式的驗證。

      Safari和ie不支持

    • ⒀ tel類型

      color類型的input元素用來選取顏色,它提供了一個顏色選取器。目前它只在Opear瀏覽器與BlackBerry瀏覽器中被支持。

      Safari和ie不支持

  • 2、require

    定義輸入字段的值是否是必需的,可取值true 和 false 。當使用下列類型時無法使用:hidden, image, button, submit, reset

    Safari和ie9 不支持

  • 3、list

    引用 datalist 元素。如果定義,則一個下拉列表可用於向輸入字段插入值。

     

    僅Opera支持

  • 4、autocomplete

    autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。

    註釋:autocomplete 適用於 form 標籤,以及以下類型的 input 標籤:text, search, url, telephone, email, password, datepickers, range 以及 color。

    當用戶在自動完成域中開始輸入時,瀏覽器應該在該域中顯示填寫的選項:

    First name: 
    Last name: 
    E-mail: 
  • 5、autofocus

    可取值:true 和 false

    當頁面加載時,使輸入字段獲得焦點。註釋:type="hidden" 時,無法使用。

    除了ie9 都支持

  • 6、multiple

    multiple 屬性規定輸入域中可選擇多個值。適用於以下類型的 input 標籤:email 和 file。

  • 7、pattern

    pattern 屬性規定用於驗證 input 域的模式(pattern)。模式(pattern) 是正則表達式。適用於以下類型的 input 標籤:text, search, url, telephone, email 以及 password。

    Safari、ie9不支持

  • 8、palceholder

    placeholder 屬性提供一種提示(hint),描述輸入域所期待的值。適用於text, search, url, telephone, email 以及 password。

    ie9 不支持

  • 9、height 和 width 屬性

    height 和 width 屬性規定用於 image 類型的 input 標籤的圖像高度和寬度。只適用於image類型的input

    全支持

順便提一下、output

在HTML5中,追加了新的元素output。output元素定義不同類型的輸出,比如計算結果或腳本的輸出。output元素必須從屬於某個表單,也就是說,必須將它書寫在表單內部,或者對它添加form屬性。

請輸入兩個數字 *  = 0

關於form元素上oninput中的text1.value以及text2.value,換成ID.value的形式也可以正常工作,即Text1.value和Text2.value。 output既然具有name屬性,不過卻不是表單控件,並不能被提交到服務器。

如果你的瀏覽器是Chrome、Safari、Opera、Firefox在兩個輸入框中輸入數值後就會看到結果

html5中input不再支持align、size屬性。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章