iT邦幫忙

DAY 8
0

HTML5 & CSS3系列 第 8

30天分享(10) - HTML5 <input> 標籤

<input> 是表單裡的空白欄位元素,
給使用者輸入資料使用,HTML5 新增了一些屬性,
提高使用者的良好體驗,讓我們看看有那些改變 :

<input type="email" name="email" autocomplete="off">
autocomplete 是當使用者在瀏覽器輸入過一次資料後,下次輸入瀏覽器會跳出提示選項方便快速輸入,
值有 on 跟 off ,目前我測試預設是 on ,所以只要用 HTML5 <input> 就會有自動提示效果。

<input type="text" name="fname" autofocus>
autofocus 不須輸入值,加上此屬性後欄位框會顯示為被使用者點選時的效果,
好處是能夠讓使用者直接輸入文字,不需要再點選欄位框。

<input type="text" name="lname" form="form1">
form 這個屬性可以將欄位指定給某個表單,只需要在值裡面輸入 <form> 的屬性 id 名稱即可。

<input type="submit" formtarget="_blank" value="submit">
formtarget 屬性裡的值有 _blank 、_self、_parent、_top 等,
跟連結屬性裡的 target 是一樣的,只是這個屬性是指表單送出後,
會以甚麼樣的形式連到新的頁面。

<input type="image" src="submit.jpg" alt="Submit" width="48" height="48">
width 、height 這屬性值只適用在 type="image" 的時候,可以設定顯示圖片的寬、高度。

<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input> 裡 list 屬性是用在下拉式選單,可以指定要對應哪個 <datalist>,
值必須與 <datalist> 的 id 相同。

<input type="number" name="quantity" min="1" max="5">
min、max 屬性使用在 type 是數字類別的狀態下,可以設定最大值跟最小值,
超過的數字不會顯示,是為了設定數字的上限與下限用。

<input type="file" name="img" multiple>
multiple 適用於 type="file" , 加上可以選取多個檔案,預設是只可選擇一個檔案。

<input type="text" name="country_code" pattern="[A-Za-z]{3}" >
pattern 是對輸入的文字進行核對,[A-Za-z] 這是限制只能輸入大小寫 A-Z,
{3} 是限制三個字元。

<input type="text" name="usrname" required>
required 表示必填,不可忽略。


上一篇
30天分享(9) - HTML5 <details> & <dialog> 標籤
下一篇
30天分享(11) - HTML5 <figcaption> 標籤
系列文
HTML5 & CSS328

1 則留言

0
jasper
iT邦新手 3 級 ‧ 2014-10-09 09:48:09

如果真的可以用這些 attribute 就可以省下一堆 javascript code 了哭

話說.. 你標題的 input 可以打字耶 XD,IT 幫竟然沒有 encode 文章標題汗

我要留言

立即登入留言