網頁藝術思考 - <strong class="xtra"><i lang="en">CSS</i> 網頁設計藝術</strong>

友善的填表介面

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 如: (限定英文字母大小寫或數字 412 字)

<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="612英數字組合" required pattern="(?=[A-Za-z0-9]{6,12})((?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])).*" title="密碼:612英數字組合,至少有一個大寫、小寫英文字母及數字,如 A12Rd6">

說明

• 驗證不過時,瀏覽器應顯示此屬性值,說明如何輸入要求的資料。
• 當然,在輸入項鄰近增加輸入的說明仍是需要的。

minmaxstep

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 結構及動態內容更具彈性。