HTML5新增了哪些input類型及其屬性？

新增類型：color、date、datetime、email、month、number、tel、time、url、week等；新增屬性：autofocus、form、max、min、pattern、step、list等。

（推薦教學：html教學）

HTML5中新增的input類型及其屬性

在

HTML4.01中，input的類型只有text、button、password、submit、radio、checkbox和hidden（隱藏域）。 H5中新增了一些類型，使用起來更加方便，包括：

• color

點擊時彈出顏色選擇器，可以選擇任意顏色

• number
  
  輸入範圍內的數字，可以手動輸入超出範圍的數字，但不能提交

• tel
  輸入電話號碼，只有safari支援

• #email
  自帶偵測功能，提交時會偵測是否包含@符，並且@符前後是否有字元

• range
  

• #url
  輸入的網址必須是http://開頭，且後面必須有字符，否則不能提交

• date
  可以手動選擇日期
  

• time
  可以手動選擇時間
  

• datetime
  選擇帶有時區的日期和時間，ie，firfox和chrome都不支援

• datetime-local
  
  選擇日期和時間，沒有時區

• month
  ## 和date類型一樣，只不過只能選擇到月份
  

• week

  
  只能選到第幾週，這種日期方式國內基本上很少用
  

• search
  定義用於輸入搜尋字串的文字欄位

  
  

#新增的一些常用屬性：

• autocomplete

  可選值on/off，表示基於先前使用者輸入的內容瀏覽器自動填入/不允許自動填入
  

• autofocus

  頁面載入時input自動取得焦點
  

• form

  規定form以外的input屬於一個或多個表單，form屬性指向歸屬表單的id值，如果屬於多個表單，id之間加空格
  

• list 

#list指向引用的datalist（功能和select一樣，但是不在網頁中顯示）預先定義的可選項，例如

<form><input list="mylist"/><datalist id="mylist">
    <option>张三</option>
    <option>李四</option>
    <option>王五</option></datalist></form>

而頁面中的表現則是（點擊右側展開時可選項才會展開）：

- formaction

規定當表單提交時處理輸入控制項的檔案的URL。 (只針對type="submit" 和type="image")

- formenctype

規定當表單資料提交到伺服器時如何編碼(只適合type="submit" 和type= "image")。

- formmethod

定義傳送表單資料到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image")

- formnovalidate

 formnovalidate 屬性覆寫

元素的 novalidate 屬性。

- formtarget

規定表示提交表單後在哪裡顯示接收到回應的名稱或關鍵字。 (只適合 type="submit" 和 type="image")

- height

規定 元素的高度。 (只針對type="image")

- min

規定輸入的最小值，適用於number、range、date、datetime、datetime-local、month、time 

#- max

規定輸入的最大值，同樣適用於number、range、date、datetime、datetime-local、month、time 

- multiple

允許多多個值，以「,」隔開

- required

必須填入項，即不能為空，不提交 

- pattern 

定義驗證相關的正規則，注意格式不需要加上「/ /」 

- placeholder
定義在使用者輸入前顯示在輸入方塊中的提示性內容，一般是淺灰色 

- step
定義數字變化的步長，即每次變動的單位，例如step=”5”,如果輸入不是5的整數倍則會在提交時提示格式不正確

- width

width 屬性規定 元素的寬度。 (只針對type="image")

更多程式相關知識，請造訪：程式設計學習！ ！

以上是HTML5新增了哪些input類型及其屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！