Web Standards Solutions 網頁設計標準規格


表單Forms


標記表單的方法
方法A:使用表格
  <form action="/path/to/script" method="post">
  <table>
   <tr>
   <th>Name:</th>
   <td><input type="text" name="name" /></td>
   </tr>
   <tr>
   <th>Email:</th>
   <td><input type="text" name="name" /></td>
   </tr>
   <tr>
   <th>&nbsp;</th>
   <td><input type="submit" value="submit" /></td>
   </tr>
  </table>
  </form>

方法B:不用表格,但擠一點
  <form action="/path/to/script" method="post">
   <p>
   Name:<input type="text" name="name" /><br />
   Email:<input type="text" name="name" /><br />
   <input type="submit" value="submit" />
   </p>
  </form>

方法C:樸素,更容易使用
  <form action="/path/to/script" id="thisform" method="post">
   <p><label for="name">Name:</label><br />
   <input type="text" id="name" name="name" /></p>
   <p><label for="email">Email:</label><br/>
   <input type="text" id="email" name="email" /></p>
   <p><input type="checkbox" id="remember" name="remember" />
   <label for="remember">Remember this info?</label></p>
   <p><input type="submit" value="submit" /></p>
  </form>

  #thisform p{
   margin: 6px 0;
  }
  儘管每個群組都放在<p>裡頭,但最後仍用<br />來換行,使用<br />之目的在於
  避免欄位無法對齊。
  <label>標籤:為每個元件說明意義,強化表單的結構

方法D:定義一個表單
  <form action="/path/to/script" id="thisform" method="post">
   <dl>
   <dt><label for="name">Name:</label><dt>
   <dd><input type="text" id="name" name="name" /></dd>
   <dt><label for="email">Email:</label></dt>
     <dd><input type="text" id="email" name="email" /></dd>
     <dt><label for="remember">Remember this info?</label></dt>
     <dd><input type="checkbox" id="remember" name="remember" /></dd>
   <dt><input type="submit" value="submit" /></dt>
   </dl>
  </form>
  
  form dd{
   margin: 0;
  }
  form dt{
   float: left;
   padding-right: 10px;
  }

更多技巧
傳說中的跳欄順序:tabindex
快速鍵:accesskey
  <form action="/path/to/script" id="thisform" method="post">
   <p><label for="name">Name:</label><br />
   <input type="text" id="name" name="name" tabindex="1" accesskey="9" /></p>
   <p><label for="email">Email:</label><br/>
   <input type="text" id="email" name="email" tabindex="2"  /></p>
   <p><input type="checkbox" id="remember" name="remember" tabindex="3"  />
   <label for="remember">Remember this info?</label></p>
   <p><input type="submit" value="submit" tabindex="4"  /></p>
  </form>
  
  #name, #email{
   width: 200px;
  }
  #thisform label{
   font-family: Verdana, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #660000;
  }

以<fieldset>製作表單元件群組
  <form action="/path/to/script" id="thisform" method="post">
   <fieldset>
   <legend>Sign In</legend>
     <p><label for="name">Name:</label><br />
     <input type="text" id="name" name="name" tabindex="1" accesskey="9" /></p>
     <p><label for="email">Email:</label><br/>
     <input type="text" id="email" name="email" tabindex="2"  /></p>
     <p><input type="checkbox" id="remember" name="remember" tabindex="3"  />
     <label for="remember">Remember this info?</label></p>
     <p><input type="submit" value="submit" tabindex="4"  /></p>
   </fieldset>
  </form>
  
  #name, #email{
   width: 200px;
  }
  #thisform{
   font-family: Georgia, serif;
   font-size: 12px;
   color: #999;
  }
  #thisform label{
   font-family: Verdana, sans-serif;
   font-weight: bold;
   color: #660000;
  }
  #thisform fieldset{
   border: 1px solid #ccc;
   padding: 0 20px;
  }
  #thisform legend{
   font-family: arial, sans-serif;
   font-weight: bold;
   font-size: 90%;
   color: #666;
   background: #eee;
   border: 1px solid #ccc;
   border-bottom-color: #999;
   border-right-color: #999;
   padding: 4px 8px;
  }

jck11 發表在 痞客邦 PIXNET 留言(0) 人氣()