HTML5表單Input型態

原始HTML的表單Input欄位可以有許多種型態,包括文字(text)、按鈕(button)、核取方塊(checkbox)、密碼(password)……等等(請參考HTML表單篇)。在HTML5裡面增加了7種資料型態,而且這些資料型態不需要再透過JavaScript驗證使用者輸入的資料是否正確,對網頁製作者來說是很方便的功能。不過目前有很多瀏覽器尚未支援:

Input type IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 5.1
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 5.1
search No 4.0 11.0 10.0 No
color No No 11.0 12 No

表格出自於W3Schools

新的Input型態使用方式和原有的Input標籤語法相同,只是Type增加了上面 7 種型態。其中,日期選擇器(Date pickers)還包含了日期(date)、月份(month)、週次(week)、時間(time)、格林威治時間(datetime)與地方時間(datetime-local)六種型態。所以其實一共增加了 12 種類型。參考原始Input標籤屬性如下:

  • checked=“checked”:將資料預設為選取。只有當type等於checkbox或radio時有效。
  • class=“類別”:指定物件類別。
  • id=“物件ID”:指定物件所屬ID,在同一個頁面中ID不能重覆。
  • name=“名稱”:資料欄位名稱,建議與ID相同。
  • src=“圖片網址”:指定圖片按鈕的網址。
  • style=“樣式”:設定顯示樣式。
  • tabindex=“數字”:使用Tab時的瀏覽順序。
  • type=”text | button | checkbox | file | hidden | image | password | radio | reset | submit | email | url | number | range | search | color | date | month | week | time | datetime | datetime-local“:資料輸入型態。
  • value=“值”:輸入欄位的(預設)值。

Email、網址(url)、數值(number)、範圍(range)、搜尋(search)與顏色(color)的參考範例如下(可以嘗試輸入錯誤的數值)。Search型態和文字(text)是差不多的,瀏覽器並不會主動進行搜尋,必須用程式進行控制。

</fieldset>

日期選擇器(Date pickers)的參考範例如下:

</fieldset>

Input新增屬性 (2011.11.05 新增)

Input標籤除了新增了不同的型態,同時也增加了18種屬性。這些屬性對過去常用JavaScript實現的功能做了強化,讓我們可以不必寫複雜的JavaScript就能達到相同的效果。可惜目前瀏覽器支援並不完整。

Attribute IE Firefox Opera Chrome Safari
autocomplete 8.0 3.5 9.5 3.0 4.0
autofocus No 4.0 10.0 3.0 4.0
form No 4.0 9.5 10.0 No
form overrides No 4.0 10.5 10.0 No
height and width 8.0 3.5 9.5 3.0 4.0
list No 4.0 9.5 No No
min, max and step No No 9.5 3.0 No
multiple No 3.5 11.0 3.0 4.0
pattern No 4.0 9.5 3.0 No
placeholder No 4.0 11.0 3.0 3.0
required No 4.0 9.5 3.0 No

表格出自於W3Schools

  • autocomplete=”off | on”:是否提供自動完成(自動填入表單內容)的功能。當屬性放在form時,表示在該form下面的所有input欄位都套用此屬性。
  • autofocus=“autofocus”:在網頁載入時,自動獲得focus。
  • form=“表單ID”:指定歸屬的表單ID。
  • formaction:覆蓋表單的 action 屬性。只有在 type 是 submit 或 image 時有效。
  • formenctype:覆蓋表單的 enctype 屬性。只有在 type 是 submit 或 image 時有效。
  • formmethod:覆蓋表單的 method 屬性。只有在 type 是 submit 或 image 時有效。
  • formnovalidate:覆蓋表單的 novalidate 屬性。只有在 type 是 submit 或 image 時有效。
  • formtarget:覆蓋表單的 target 屬性。只有在 type 是 submit 或 image 時有效。
  • height:指定圖片的高度。只有在 type 是 image 時有效。
  • width:指定圖片的寬度。只有在 type 是 image 時有效。
  • list:list=“清單ID”:指定datalist的ID。
  • max=“最大值”:指定欄位的最大值。只有在 type 是 number、range 或 date pickers 時有效。type等於range時,若不指定則預設值為100。
  • min=“最小值”:指定欄位的最小值。只有在 type 是 number、range 或 date pickers 時有效。type等於range時,若不指定則預設值為0。
  • step=“數值間距”:指定欄位數值的間距。只有在 type 是 number、range 或 date pickers 時有效。
  • multiple=“multiple”:允許輸入多個值。只有在 type 是 email 或 file 時有效。
  • pattern=“regexp”:驗證欄位輸入的內容是否正確。使用JavaScript的驗證語法。只有在 type 是 text、search、url、email 或 password 時有效。

  • placeholder=“提示內容”:提示使用者此欄位應輸入的值。當欄位空白時顯示,且在獲得焦點時消失。只有在 type 是 text、search、url、email 或 password 時有效。
  • required=“required”:表示此欄位一定要填寫。
  • 關連文章:通用HTML(8)-【表單篇】