html 5 使用者輸入元素 (ui elements) 新屬性

  • 說明: html 5 在填表相關元素 (form-associated elements) 增加了不少有用的屬性 (attributes) 。有的是強化使用者易用性,也使觸控裝置有了處理的原則。有的是在瀏覽器增加了驗證 (form validation) 功能,簡化了以往只能倚賴的複雜的 javascript 程序。
  • 適合:有 html 語法基礎概念者。
  • 難度:等級2
  • 更新:
  • 支援:詳細可參考 MDN 的整理。

友善的填表介面

placeholder

顯示預填內容
html 如:
<label for="fullname">姓名:</label>
<input type="text" id="fullname" name="fullname" maxlength="80" placeholder="薛洪度">
說明
  • 屬性值作為預先顯示該項的填寫範例或提示,非實際填入內容。
  • :placeholder-shown css level 4 pseudo-class 可指定有 placeholder 元素的設計樣式。

autofocus

游標自動跳入輸入項
html 如:
<label for="logger">登入者:</label>
<input type="text" id="logger" name="logger" maxlength="30" placeholder="OneIsNot1" autofocus>
說明
  • 當頁面開啟時,該元素會自動成為焦點 (游標已點入其中) 。
  • 理所當然,一個頁面只有一個 autofocus 有作用。

autocomplete

停用自動完填
html 如:
<label for="email">Email:</label>
<input type="email" id="email" name="email" maxlength="120" placeholder="thanks@lot.friends" autocomplete="off">
說明
  • 內定值為 autocomplete="on" ;瀏覽器會記錄該項使用者曾經輸入並送交的內容,日後輸入時會將記錄顯示成下拉選項,方便使用者直接挑選就可以完填,不需要再從頭到尾輸入。
  • autocomplete="off" ,則指定瀏覽器不要顯示下拉選項。

list

下拉選項自動完填
html 如:
<form method="POST">
 <fieldset>
  <legend>下拉選項自動完填</legend>
  <ol class="RegularList">
  <li><label for="fCity">台灣六都您最愛哪一都?</label><input type="text" id="fCity" name="fCity" maxlength="30" placeholder="台北市" autocomplete="off" list="cityTW"></li>
  <li><button type="reset">清除</button><button type="submit">送交</button></li>
  </ol>
 </fieldset>
</form>
<datalist id="cityTW">
 <option value="台北市">
 <option value="新北市">
 <option value="桃園市">
 <option value="台中市">
 <option value="台南市">
 <option value="高雄市">
</datalist>
說明
  • list 屬性值指定為 datalist 元素的 id 值,在輸入項上輸入時,瀏覽器會取得該 datalist 中可能的選項顯示成下拉選項。
  • 輸入項會取得 datalist 的子項 optionvalue 值;如果沒有 value 值,就取得 option 的內容作為值。
  • 大量資料透過 ajax 技術可動態變動 datalist 的選項內容。
  • datalist 元素本身不會顯出,不限制置於文件中任何元素下。
  • list 屬性無法限制輸入內容,使用者仍可輸入非選項中的內容。需要限制輸入,可使用 pattern 屬性
  • 與原有 select 元素不同,這個方式在觸控裝置不再是不易操作的下拉鈕。

驗證 (validation)

required

指定必填項目 (文字)
html 如:
<label for="user">用戶名稱:</label>
<input type="text" id="user" name="user" maxlength="30" placeholder="OneIsNot1" required>
指定必填項目 (單選)
html 如:
<label for="ageR2">年齡:</label>
<input type="radio" id="ageR2" name="ageRange" required><label for="ageR2">30歲未滿</label>
<input type="radio" id="ageR3" name="ageRange" required><label for="ageR3">30-39歲</label>
<input type="radio" id="ageR4" name="ageRange" required><label for="ageR4">40-49歲</label>
<input type="radio" id="ageR5" name="ageRange" required><label for="ageR5">50歲以上</label>
說明
  • 指定輸入項目為必填。
  • 如果沒填就按送交,則無法通過驗證 (invalid) ,瀏覽器會停止送交,並在項目上顯示必須填寫的提示。
  • :required css level 4 pseudo-class 可指定 required 元素的設計樣式。

pattern

輸入內容須符合預定模式 ㈠
html 如: (限定英文字母大小寫或數字 4~12 字)
<label for="account">使用者名稱:</label>
<input type="text" id="account" name="account" maxlength="12" placeholder="OneIsNot1" required pattern="[A-Za-z0-9]{4,12}">
輸入內容須符合預定模式 ㈡
html 如:
<label for="mp">手機 (<samp>+886</samp>):</label>
<input type="tel" id="mp" name="mp" maxlength="12" placeholder="0987 654 321" pattern="09[1-8][0-9]([\-|\s]?)[0-9]{3}\1[0-9]{3}">
說明
  • 指定 ECMAscript Pattern Regular Expression 作為 pattern 屬性值,可過濾輸入內容。
  • 如果不符合限定的模式,按送交則無法通過驗證 (invalid) ,瀏覽器會停止送交,並在項目上顯示不符合模式的提示。
  • 這裡不需在前後加 / 建構符號,與平常語法不同,因此也沒有 flags

title

輸入說明
html 如:
<label for="pwd">密碼:</label>
<input type="password" id="pwd" name="password" maxlength="12" size="14" placeholder="6~12英數字組合" required pattern="(?=^[A-Za-z0-9]{6,12}$)((?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]))^.*$" title="密碼:6~12英數字組合,至少有一個大寫、小寫英文字母及數字,如 A12Rd6">
說明
  • 驗證不過時,瀏覽器應顯示此屬性值,說明如何輸入要求的資料。
  • 當然,在輸入項鄰近增加輸入的說明仍是需要的。

min|max|step

限定最大、最小值
html 如:
<label for="qty">訂購量 (公斤) :</label>
<input type="number" id="qty" name="quantity" placeholder="2.5" required title="購買量,單次最多 6,最少  0.5,單位增減值為 0.5,如 0.5, 1, 1.5, 2,…" max="6" min="0.5" step="0.5">
說明
  • 限制可輸入的最大、最小值 (max, min) ,可以是數值或日期時間值; step 指定單位增減值 (每按一次鈕),接受小數值。
  • 輸入值如不在限定範圍內,或不符單位增減變動值時,驗證不會通過,瀏覽器會停止送交,並在項目上顯示可能的值的提示。

novalidate

停用驗證
html 如:
<form method="POST" novalidate>
 <fieldset>
  <legend>停用驗證</legend>
  <ol>
  <li><label for="user">用戶名稱:</label><input type="text" id="user" name="user" maxlength="12" placeholder="OneIsNot1" title="帳號,12字以內" autocomplete="off" required></li>
  <li><label for="email">Email:</label><input type="email" id="email" name="email" maxlength="120" placeholder="thanks@lot.friends" title="有效的電子信箱,如 thanks@lot.friends" autocomplete="off"></li>
  <li><button type="reset">清除</button><button type="submit">送交</button></li>
  </ol>
 </fieldset>
</form>
說明
  • 這是 form 的專用屬性,瀏覽器會停止驗證,但不會阻礙像是運用 Javascript 處理的驗證。
  • 需要測試 server-side 或是 Javascript 驗證時,當然就可以運用此屬性。
  • :invalid, :valid css level 4 pseudo-class 可指定 form 或其輸入項元素,驗證不過或通過的設計樣式。

formnovalidate

html 如:
<form method="POST">
 <fieldset>
  <legend>停用驗證</legend>
  <ol>
  <li><label for="user">用戶名稱:</label><input type="text" id="user" name="user" maxlength="12" placeholder="OneIsNot1" title="帳號,12字以內" autocomplete="off" required></li>
  <li><label for="email">Email:</label><input type="email" id="email" name="email" maxlength="120" placeholder="thanks@lot.friends" title="有效的電子信箱,如 thanks@lot.friends" autocomplete="off"></li>
  <li><button type="reset">清除</button><button type="submit" formnovalidate>送交</button></li>
  </ol>
 </fieldset>
</form>
說明

輸入項不必是 form 元素的下層

form

用戶資料
訂單
html 如:
<form method="POST" id="order">
 <fieldset>
  <legend>用戶資料</legend>
  <ol class="RegularList">
  <li><label for="account">使用者名稱:</label><input type="text" id="account" name="account" maxlength="12" placeholder="OneIsNot1" required pattern="[A-Za-z0-9]{4,12}"></li>
  </ol>
 </fieldset>
</form>
<fieldset>
 <legend>訂單</legend>
 <ol class="RegularList">
 <li><label for="qty">訂購量 (公斤) :</label><input type="number" id="qty" name="quantity" placeholder="2.5" required title="購買量,單次最多 6,最少  0.5,單位增減值為 0.5,如 0.5, 1, 1.5, 2,…" max="6" min="0.5" step="0.5" form="order"></li>
 <li><button type="reset" form="order">清除</button><button type="submit" form="order">送交</button></li>
 </ol>
</fieldset>
說明
  • 輸入項不是直接在 form 元素下層,以 form 屬性指定應屬的 form 元素的 id
  • 輸入項不局限須在 form 元素的下層,可讓 html 結構及動態內容更具彈性。
散佈、展示請參閱 Creative Commons 授權條文,禁止重混,引述請增加原文連結。
文章標籤

不老師 發表在 痞客邦 留言(0) 人氣()