網頁藝術思考 - CSS 網頁設計藝術

友善的填表介面

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 的子項 option 的 value 值；如果沒有 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>

說明

• 瀏覽器會停止驗證，同 novalidate ，差別是此為 submit 送交鈕的專用屬性 。
• 輸入項不是在 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 結構及動態內容更具彈性。