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> </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;
}
全站熱搜
留言列表