HTML5 表單元素

<input>

<input type="text" value="HTML5 ROCK!">
						

• 用於輸入資料
• 單標籤
• 使用type屬性決定輸入類型
• 可使用value屬性設定初始值與取得值
• 預設種類text為單純的文字輸入框
• 瀏覽器無法解析的種類會當作text
• 對，IE，我在說你

<button>

<button>點我點我點我</button>
						

點我點我點我

• 就是個按鈕
• 雙標籤，內容為顯示文字
• type屬性可指定按鈕功能

<label>

<label for="name1">請輸入姓名</label><input type="text" id="name1"><br>
<label for="name2">我忘了，再輸入一次</label><input type="text" id="name2">
						

請輸入姓名
我忘了，再輸入一次

• 輸入元素的說明標籤
• 雙標籤
• 使用for屬性指定元素的id
• 與指定元素連動
• 點擊標籤自動鎖定輸入元素

Try It!

<label for="name">姓名：</label>
<input type="text" id="name"><br>
<label for="nickname">暱稱：</label>
<input type="text" id="nickname"><br>
<button>送出</button>
						

參考以上範例，在網頁做出簡易的報名表單

<form>

<form>
	姓名：<input type="text">
</form>
						

• 代表一組表單
• 送出時只送出該表單內資料
• 使用action屬性設定目標頁面
• 常搭配後端API使用
• 在表單中按下Enter鍵可直接送出

<fieldset>

<form>
	<fieldset>
		姓名：<input type="text">
	</fieldset>
</form>
						

• 用於表示表單的區塊
• 雙標籤
• 未來可使用form屬性指定一到多個表單

<legend>

<form>
	<fieldset>
		<legend>基本資料</legend>
		姓名：<input type="text">
	</fieldset>
</form>
						

• League of Legends
• 表單區塊標題
• 雙標籤

Try It!

<form>
	<fieldset>
		<legend>基本資料</legend>
		<label for="name">姓名：</label>
		<input type="text" id="name"><br>
		<label for="nickname">暱稱：</label>
		<input type="text" id="nickname"><br>
		<button>送出</button>
	</fieldset>
</form>
						

參考以上範例，將表單完整的包裹

input:password

<input type="password">
						

• 用於輸入密碼
• 只能輸入英數
• 輸入內容以"*"屏蔽

input:checkbox

興趣：

<input type="checkbox">吃飯
<input type="checkbox" checked>睡覺
<input type="checkbox">打東東
						

興趣：
吃飯 睡覺 打東東

• 核取方塊
• 用於多選或是非
• 使用checked屬性預設勾選

input:radio

薛丁格的貓
<input type="radio" name="dead" checked>死了
<input type="radio" name="dead">沒死
						

薛丁格的貓 死了 沒死

• 選取按鈕
• 用於單選
• 一個name為一組單選
• 使用checked屬性預設勾選
• 多個checked則最後一個生效

input:hidden

隱藏欄位<input type="hidden" value="hohoho">
						

隱藏欄位

• 隱藏欄位
• 在value存放預設值
• 可透過JS更改

input:file

上傳附檔<input type="file" multiple>
						

上傳附檔

• 上傳檔案
• 使用multiple屬性上傳多個檔案
• IE10以下無法使用multiple屬性IE嘛

input:button

<input type="button" value="按我按我">
						

• 就是個按鈕
• 效果同<button type="button">
• 說明文字放於value屬性中

input:submit

<input type="submit" value="送出表單">
						

• 傳送按鈕
• 效果同<button type="submit">
• 說明文字放於value屬性中
• 送出整個表單內容

input:reset

<input type="reset" value="重新填寫">
						

• 回復按鈕
• 效果同<button type="reset">
• 說明文字放於value屬性中
• 將整個表單內容設為預設值

Try It!

<fieldset>
	<legend>帳號資料</legend>
	<label for="pwd">密碼：</label>
	<input type="password" id="pwd"><br>
	<label for="pic">大頭照：</label>
	<input type="file" id="pic"><br>
	<input type="checkbox" id="eat">
	<label for="eat">吃飯</label>
	<input type="checkbox" id="sleep" checked>
	<label for="sleep">睡覺</label>
	<input type="checkbox" id="hit">
	<label for="hit">打東東</label>
</fieldset>
<button type="submit">送出</button>
<button type="reset">重新填寫</button>
						

參考以上範例，加上報名表第二部分

input:number

年齡<input type="number" min="0" step="2">
						

年齡

• 數字
• 可輸入整數或實數
• 使用min與max屬性設定極限
• 使用step屬性設定間距
• IE10以下不支援IE不意外

input:range

音量<input type="range" min="0" max="1" step="0.05">
						

音量

• 滑桿
• 使用min與max屬性設定極限(預設0至100)
• 使用step屬性設定間距(預設1)
• value屬性設定或輸出數值
• IE10以下不支援又是IE

input:email

Email<input type="email">
						

• 電子郵件
• 送出前瀏覽器自動驗證
• IE10以下或電腦板Safari不支援IE...

input:url

網址<input type="url">
						

• 網址
• 送出前瀏覽器自動驗證
• IE10以下或電腦板Safari不支援還是IE

input:color

膚色<input type="color">
						

膚色

• 選擇顏色
• 傳回HEXRGB值(e.g.676af3)
• IE與Safari不支援又是你們

input:date

生日<input type="date">
						

生日

• 日期
• 不同瀏覽器格式可能不同
• IE與Firefox不支援火狐你也...

其他input

Try It!

<fieldset>
	<legend>其他資料</legend>
	<label for="email">電子郵件：</label>
	<input type="email" id="email"><br>
	<label for="url">個人網站：</label>
	<input type="url" id="url"><br>
	<label for="age">年齡：</label>
	<input type="number" id="age" min="0" step="1"><br>
	<label for="birth">生日：</label>
	<input type="date" id="birth"><br>
	<label for="color">膚色：</label>
	<input type="color" id="color"><br>
	<label for="voice">音量：</label>
	<input type="range" id="voice">
</fieldset>
						

參考以上範例，加上報名表第三部分

<textarea>

<textarea cols="50" rows="3"></textarea>
						

• 文字方塊
• 使用cols屬性設定寬多少個字
• 使用rows屬性設定高幾行
• IE不能手動調整大小好事還壞事呢..

<select>

選擇宵夜
<select>
	<option value="lu">滷味</option>
	<option value="gp">雞排</option>
	<option value="df">臭豆腐</option>
</select>
						

選擇宵夜 滷味 雞排 臭豆腐

• 下拉選單
• 雙標籤主體
• 使用size屬性設定單一頁顯示選項數量

<option>

選擇宵夜
<select>
	<option value="lu">滷味</option>
	<option value="gp">雞排</option>
	<option value="df">臭豆腐</option>
</select>
						

選擇宵夜 滷味 雞排 臭豆腐

• 選項
• 雙標籤，內容為顯示文字
• 使用value屬性設定值
• 使用selected屬性預設選取

<optgroup>

選擇宵夜
<select>
	<optgroup label="滷味">
		<option value="luking">王牌滷味</option>
		<option value="lubigtpi">大台北滷味</option>
		<option value="lulight">燈籠滷味</option>
	</optgroup>
	<option value="gp">雞排</option>
	<option value="df">臭豆腐</option>
</select>
						

選擇宵夜 王牌滷味 大台北滷味 燈籠滷味 雞排 臭豆腐

• 選項群組
• 雙標籤
• 使用label屬性設定群組名稱

<datalist>

滷味：<input type="text" list="food">
<datalist id="food">
	<option value="滷味">
	<option value="雞排">
	<option value="臭豆腐">
</datalist>
						

滷味：

• 提示清單
• 雙標籤
• 在input元素設定list屬性指定
• 使用單標籤的option元素

Try It!

<fieldset>
	<legend>附錄</legend>
	<label for="ps">備註：</label>
	<textarea cols="50" rows="3" id="ps"></textarea><br>
	<label for="food">宵夜：</label>
	<select id="food">
		<optgroup label="滷味">
			<option value="luking">王牌滷味</option>
			<option value="lubigtpi">大台北滷味</option>
			<option value="lulight">燈籠滷味</option>
		</optgroup>
		<option value="gp">雞排</option>
		<option value="df">臭豆腐</option>
	</select>
</fieldset>
						

參考以上範例，加上報名表第四部分

常用輸入通用屬性

• required
• readonly
• placeholder
• disabled
• maxlength
• autofocus
• autocomplete
• form
• 其他屬性

required

<input type="text" required>
						

• 必填欄位
• 瀏覽器在送出前檢查
• IE10以下和Safari不支援還是你們...

readonly

<input type="text" value="Change me if you can" readonly>
						

• 唯讀欄位
• 可透過JS修改值
• IE6以下不支援這就沒差了

placeholder

<input type="text" placeholder="輸入一種滷味">
						

• 輸入提示
• IE10以下不支援毫無反應，就是個IE

disabled

<input type="text" disabled>
						

• 這是禁止事項
• 禁止控制項
• 設定disabled屬性後該欄位不會送出

maxlength

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

• 設定字元最大長度
• 以unicode字元計算而非位元

autofocus

<input type="text" autofocus>
						

• 自動鎖定控制項
• IE10以下不支援嘛...

autocomplete

<input type="text" autocomplete="off">
						

• 開啟或關閉自動完成(on/off)
• 預設開啟
• 瀏覽器設定優先

form

<form id="form1"></form>
<input type="text" form="form1">
						

• 指定form元素的id
• 當該表單送出時一起送出
• IE不支援畢竟是IE嘛(笑)

Try It!

使報名表欄位設定更完整，包含必填欄位、欄位提示等

Output

• JS alert
• 任意元素
• <output>
• <meter>
• <progress>

<output>

<output></output>
						

• 一般文字顯示
• 與JS搭配使用
• 使用for屬性設定與其他控制項關連
• W3C School output tag

<meter>

<meter value="0.7"></meter>
<meter value="37" min="0" max="100"></meter>
<meter value="37" min="-30" max="50" low="0" high="30" optimum="-22"></meter>
						

• 表示測量數值(整數/小數)
• 使用value屬性設定值(預設0)
• 使用min/max設定最小/最大值(預設0/1)
• 使用low/high設定低/高分界(預設等於min/max)
• min/low/high/max區分出三個區塊
• 使用optimum設定理想數值區塊(值所在區塊)
• 值依照理想區塊距離呈現不同顏色(綠/黃/紅)
• IE不支援反正就是個IE

<progress>

<progress></progress>
<progress value="0.5" max="3.5"></progress>
						

• 進度條
• 使用value屬性設定進度(空值為0)
• 使用max屬性設定最大值(預設1)
• 常搭配JS進度使用
• 不設定value屬性時chrome與IE為執行中狀態
• 不設定value屬性時Firefox為max，Opera為0
• IE10以下不支援IE雷，雷IE

Try It!

<h3>測量結果</h3>
氣溫：
<meter value="14" min="0" max="100" low="15" high="25" optimum="20"></meter>
測量進度：
<progress value="2" max="7"></progress>
						

參考以上範例，在網頁中使用輸出元素