|
form無(wú)論是在網(wǎng)站的制作中，還是在網(wǎng)站的重構(gòu)中，我們都會(huì)頻繁地“碰面”，當(dāng)“碰面”的次數(shù)多了，反而覺(jué)得他更讓人迷茫，有種熟悉的“陌生”，越來(lái)越把握不了他。
下面我們將帶大家走進(jìn)form的世界，一起來(lái)熟悉、探討、掌握他的“脾性”。
對(duì)于簡(jiǎn)單form的設(shè)計(jì)圖（如圖一，yahoo注冊(cè)頁(yè)面的一部分），我們?nèi)绾蝸?lái)做整體的布局呢？大體我們可以選用以下3種方式來(lái)做布局：
1、使用table來(lái)布局
這是大家最常用的方法，雖然現(xiàn)在到處都在談標(biāo)準(zhǔn)化，甚至更多的在說(shuō)div+css，但懌飛還是推薦大家使用table來(lái)布局form。對(duì)于標(biāo)準(zhǔn)，個(gè)人的另類理解“更符合邏輯，更效率快捷”。
為什么推薦大家使用呢？table本就是用來(lái)顯示二維數(shù)據(jù)，用table來(lái)布局form可以說(shuō)是他的“老本行”。另外重要的一點(diǎn)是，對(duì)于復(fù)雜的form，table能更有效的進(jìn)行布局和維護(hù)修改，體現(xiàn)了效率和易用。
在布局之前，先溫習(xí)一下table的部分標(biāo)簽：
- table：顯示二維數(shù)據(jù)
- summary：定義表格的用途
- caption：定義表格的標(biāo)題，在表格開(kāi)始的地方使用，僅一次
- tr：表格中的一行
- th：表頭單元格，定義一行或者一列的表頭信息
- td：數(shù)據(jù)單元格
下面我們具體來(lái)對(duì)圖一的設(shè)計(jì)圖進(jìn)行整體布局：
XHTML部分:
<form id="demoform" class="democss" action="">
<table summary="使用table來(lái)布局的演示" id="demo">
<caption>
Registration example form
</caption>
<tr>
<th><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></th>
<td><input type="text" id="fname" value="" /></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></th>
<td><input type="text" id="lname" value="" /></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></th>
<td>
<select name="content" id="content">
<option value="us" selected="selected">Yahoo! U.S.</option>
<option value="e1">Yahoo! U.S. in Spanish</option>
<option value="b5">Yahoo! U.S. in Chinese</option>
<option value="cn">Yahoo! China</option>
<option value="uk">Yahoo! United Kingdom</option>
<option value="ar">Yahoo! Argentina</option>
<option value="aa">Yahoo! Asia</option>
<option value="au">Yahoo! Australia</option>
<option value="br">Yahoo! Brazil</option>
<option value="ca">Yahoo! Canada in English</option>
<option value="cf">Yahoo! Canada in French</option>
<option value="fr">Yahoo! France</option>
<option value="de">Yahoo! Germany</option>
<option value="hk">Yahoo! Hong Kong</option>
<option value="in">Yahoo! India</option>
<option value="it">Yahoo! Italy</option>
<option value="kr">Yahoo! Korea</option>
<option value="mx">Yahoo! Mexico</option>
<option value="sg">Yahoo! Singapore</option>
<option value="es">Yahoo! Spain</option>
<option value="tw">Yahoo! Taiwan</option>
</select>
</td>
</tr>
<tr>
<th><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></th>
<td>
<select name="sex" id="sex">
<option value="">[Select] </option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</td>
</tr>
<tr>
<th><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></th>
<td><input type="text" value="" id="yid"> <span class="b">@yahoo.com</span><br />
<span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></td>
</tr>
<tr>
<th><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></th>
<td>
<input type="password" value="" id="pw" /><br />
<span class="explain">Six characters or more; capitalization matters!</span>
</td>
</tr>
<tr>
<th><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></th>
<td><input type="password" value="" id="pw2"/></td>
</tr>
<tr>
<th></th>
<td><input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/></td>
</tr>
</table>
</form>
CSS部分:
* {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
}
input,select {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
}
.required {
font:0.8em Verdana !important;
color:#f68622;
}
.explain {
color:#808080;
}
.b {
font-weight:bold;
font-size:12px;
}
.democss table{
font:11px/12px Arial, Helvetica, sans-serif;
color:#333;
width:420px;
}
.democss caption {
display:none;
}
.democss th {
font-weight:normal;
text-align:right;
vertical-align:top;
padding:4px;
padding-top:8px;
width:110px
}
.democss td {
text-align:left;
padding:4px;
width:294px;
}
.democss input {
width:180px;
}
.democss select#content {
width:185px;
}
.democss input.submit {
width:70px;
}
具體演示:
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
出處：藍(lán)色理想
責(zé)任編輯：blue
上一頁(yè) 下一頁(yè) 使用label布局
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) 使用table布局
第 2 頁(yè) 
