中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

組織有關(guān)聯(lián)的輸入框

在一個(gè)較長(zhǎng)的表單中,為了增加可用性,你可能會(huì)受到一些限制,但是將關(guān)聯(lián)的輸入框組織到一起,將表單分割并用可控的視覺化組件表現(xiàn)出來(lái),可以使表單不那么嚇人.這樣,表單可以讓人感覺更容易填寫,即使填寫它可能跟填寫沒有組織的表單花費(fèi)的時(shí)間一樣.

為了將關(guān)聯(lián)的表單組織起來(lái),使用<fieldset>和可選<legend>元素,正如下面的代碼一樣:

<form id="form" action="register.php" method="post">

 <fieldset>
  <legend>Basic Info</legend>
  <div>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  </div>
  <label for="password">Password:</label>
  <input type="text" name="password" id="password" />
  <div>
  <label for="password-confirm">Confirm Password:</label>
  <input type="text" name="password-confirm" id="password-confirm" />
  </div>
 </fieldset>

 <fieldset>
  <legend>Address</legend>
  <label for="address">Address:</label>
  <input type="text" name="address" id="address" />

  <label for="address2">Address (cont'd):</label>
  <input type="text" name="address2" id="address2" />

  <label for="zip">Zip/Postal:</label>
  <input type="text" name="zip" id="zip" />

  <label for="city">City:</label>
  <input type="text" name="city" id="city" />

  <label for="country">Country:</label>
  <input type="text" name="country" id="country" />

 </fieldset>

</form>

fieldset>默認(rèn)會(huì)帶邊框,不過(guò)可以修改,通常會(huì)通過(guò)CSS來(lái)去掉.下面是單獨(dú)表單一個(gè)例子,它使用<fieldset>和<legend>分割成兩個(gè)部分

Cosmicsoda Registration Form

不幸的是,<fieldset>的邊框在不同的瀏覽器中表現(xiàn)不一樣,所以一般最好的方法是通過(guò)css去掉邊框并且通過(guò)其他的方式建立自定義的邊框.不過(guò)這也會(huì)影響<legend>的效果,因此現(xiàn)在很少看見使用<fieldset>和<legend>和兩個(gè)HTML元素.但是<fieldset>仍然可以用來(lái)組織元素,同時(shí)通過(guò)自定義邊框和標(biāo)題來(lái)實(shí)現(xiàn)比較基礎(chǔ)的效果.<fieldset>和<legend>元素對(duì)表單的易用性還是有額外的幫助的.

出處：豬窩
責(zé)任編輯：bluehearts

上一頁(yè) 如何設(shè)計(jì)具可用性的網(wǎng)頁(yè)表單? [2] 下一頁(yè) 如何設(shè)計(jì)具可用性的網(wǎng)頁(yè)表單? [4]