第 10 章 表單元素[中]

學習要點： 

1.type 屬性總彙

 2.type 屬性解析

 

主講教師：李炎恢

 

本章主要探討 HTML5 中表單中 input 元素的 type 屬性，根據不同的值來顯示不同的輸入框。

 

一．type 屬性總彙

input 元素可以用來生成一個供使用者輸入資料的簡單文字框。在預設的情況下，什麼樣的資料均可以輸入。而通過不同的屬性值，可以限制輸入的內容。

屬性名稱	說明
text	一個單行文字框，預設行為
password	隱藏字元的密碼框
search	搜尋框，在某些瀏覽器鍵入內容會出現叉標記取消
submit、reset、button	生成一個提交按鈕、重置按鈕、普通按鈕
number、range	只能輸入數值的框；只能輸入在一個數值範圍的框
checkbox、radio	核取方塊，使用者勾選框；單選框，只能在幾個中選一個
image、color	生成一個圖片按鈕，顏色程式碼按鈕
email、tel、url	生成一個檢測電子郵件、號碼、網址的文字框
date、month、time、week、datetime、datetime-local	獲取日期和時間
hidden	生成一個隱藏控制元件
file	生成一個上傳控制元件

 

 二．input 元素解析

1.type 為 text 值時

<input type="text">

解釋：當 type 值為 text 時，呈現的就是一個可以輸入任意字元的文字框，這也是預設行為。並且，還提供了一些額外的屬性。

屬性名稱	說明
list	指定為文字框提供建議值的 datalist 元素，其值為datalist 元素的 id 值
maxlength	設定文字框最大字元長度
pattern	用於輸入驗證的正規表示式
placeholder	輸入字元的提示
readonly	文字框處於只讀狀態
disabled	文字框處於禁用狀態
size	設定文字框寬度
value	設定文字框初始值
required	表明使用者必須輸入一個值，否則無法通過輸入驗證

 

//設定文字框長度

<input type="text" size="50">

 

//設定文字框輸入字元長度

<input type="text" maxlength="10">

 

//設定文字框的初始值

<input type="text" value="初始值">

 

//設定文字框輸入提示

<input type="text" placeholder="請輸入內容">

 

//設定文字提供的建議值

<input list="footlist">
<datalist id="footlist">
    <option value="蘋果">蘋果</option>
    <option value="桔子">桔子</option>
    <option value="香蕉" label="香蕉">
    <option value="梨子">
</datalist>

 

//設定文字框內容為只讀，可以提交資料

<input type="text" readonly>

 

//設定文字框內容不可用，不可以提交資料

<input type="text" disabled>

 

2.type 為 password 值時

<input type="password">

解釋：當 type 值為 password 時，一般用於密碼框的輸入，所有的字元都會顯示星號。密碼框也有一些額外屬性。

屬性名稱	說明
maxlength	設定密碼框最大字元長度
pattern	用於輸入驗證的正規表示式
placeholder	輸入密碼的提示
readonly	密碼框處於只讀狀態
disabled	文字框處於禁用狀態
size	設定密碼框寬度
value	設定密碼框初始值
required	表明使用者必須輸入同一個值

 

這裡除了正則和驗證需要放在下一節，其餘和文字框一致。

 

3.type 為 search 時

<input type="search">

解釋：和文字框一致，在除 Firefox 瀏覽器的其他現代瀏覽器，會顯示一個叉來取消搜尋內容。額外屬性也和 text 一致。

 

4.type 為 number、range 時

<input type="number">
<input type="range">

解釋：只限輸入數字的文字框，不同瀏覽器可能顯示方式不同。生成一個數值範圍文字框，只是樣式是拖動式。額外屬性如下：

屬性名稱	說明
list	指定為文字框提供建議值的 datalist 元素，其值為datalist 元素的 id 值
min	設定可接受的最小值
max	設定可接受的最大值
readonly	設定文字框內容只讀
required	表明使用者必須輸入一個值，否則無法通過輸入驗證
step	指定上下調節值的步長
value	指定初始值

 

//範圍和步長

<input type="number" step="2" min="10" max="100">

 

5.type 為 date 系列時

<input type="date">
<input type="month">
<input type="time">
<input type="week">
<input type="datetime">
<input type="datetime-local">

解釋：實現文字框可以獲取日期和時間的值，但支援的瀏覽器不完整。我們測試 Chrome 和 Opera 支援，其他瀏覽器尚未支援。所以，在獲取日期和時間，目前還是推薦使用 jQuery 等前端庫來實現日曆功能。額外屬性和 number 一致。

 

6.type 為 color 時

<input type="color">

解釋：實現文字框獲取顏色的功能，最新的現代瀏覽器測試後 IE 不支援，其餘的都能顯示一個顏色對話方塊提供選擇。

 

7.type 為 checkbox、radio 時

音樂<input type="checkbox">

體育<input type="checkbox">

<input type="radio" name="sex" value="男">
男
<input type="radio" name="sex" value="女">
女

 

解釋：生成一個獲取布林值的核取方塊或固定選項的單選框。額外屬性如下：

屬性名稱	說明
checked	設定核取方塊、單選框是否為勾選狀態
required	表示使用者必須勾選，否則無法通過驗證
value	設定核取方塊、單選框勾選狀態時提交的資料。預設為 on

 

//預設勾選，預設值為 1

<input type="checkbox" name="music" checked value="1">

 

8.type 為 submit、reset 和 button 時

<input type="submit">

解釋：生成一個按鈕，三種模式：提交、重置和一般按鈕，和<button>元素相同。

值名稱	說明
submit	生成一個提交按鈕
reset	生成一個重置按鈕
button	生成一個普通按鈕

 

如果是 submit 時，還提供了和<button>元素一樣的額外屬性：formaction、formenctype、formmethod、formtarget 和 formnovalidate。

 

9.type 為 image 時

<input type="image" src="img.png">

解釋：生成一個圖片按鈕，點選圖片就實現提交功能，並且傳送了分割槽響應資料。圖片按鈕也提供了一些額外屬性。

屬性名稱	說明
src	指定要顯示影象的 URL
alt	提供圖片的文字說明
width	影象的長度
height	影象的高度
提交額外屬性	formaction、formenctype、formmethod、formtarget和 formnovalidate。

 

10.type 為 email、tel、url 時

<input type="email">
<input type="tel">
<input type="url"> 

解釋：email 為電子郵件格式、tel 為電話格式、url 為網址格式。額外屬性和 text 一致。但對於這幾種型別，瀏覽器支援是不同的。email 支援比較好，現在瀏覽器都支援格式驗證；tel 基本不支援；url 支援一般，部分瀏覽器只要檢測到 http://就能通過。

 

11.type 為 hidden 時

<input type="hidden">

解釋：生成一個隱藏控制元件，一般用於表單提交時關聯主鍵 ID 提交，而這個資料作為隱藏存在。

 

12.type 為 file 時

<input type="file">

解釋：生成一個檔案上傳控制元件，用於檔案的上傳。額外提供了一些屬性：

屬性名稱	說明
accept	指定接受的 MIME 型別
required	表明使用者必須提供一個值，否則無法通過驗證

 

accept="image/gif, image/jpeg, image/png"