建站常識
簡單form標(biāo)準(zhǔn)化實例——整體布局
2007-02-01 10:29:00
form無論是在網(wǎng)站的制作中，還是在網(wǎng)站的重構(gòu)中，我們都會頻繁地“碰面”，當(dāng)“碰面”的次數(shù)多了，反而覺得他更讓人迷茫，有種熟悉的“陌生”，越來越把握不了他。
下面我們將帶大家走進form的世界，一起來熟悉、探討、掌握他的“脾性”。
對于簡單form的設(shè)計圖（如圖一，yahoo注冊頁面的一部分），我們?nèi)绾蝸碜稣w的布局呢？大體我們可以選用以下3種方式來做布局：
1、使用table來布局
這是大家最常用的方法，雖然現(xiàn)在到處都在談標(biāo)準(zhǔn)化，甚至更多的在說div+css，但懌飛還是推薦大家使用table來布局form。對于標(biāo)準(zhǔn)，個人的另類理解“更符合邏輯，更效率快捷”。
為什么推薦大家使用呢？table本就是用來顯示二維數(shù)據(jù)，用table來布局form可以說是他的“老本行”。另外重要的一點是，對于復(fù)雜的form，table能更有效的進行布局和維護修改，體現(xiàn)了效率和易用。
在布局之前，先溫習(xí)一下table的部分標(biāo)簽：
- table：顯示二維數(shù)據(jù)
- summary：定義表格的用途
- caption：定義表格的標(biāo)題，在表格開始的地方使用，僅一次
- tr：表格中的一行
- th：表頭單元格，定義一行或者一列的表頭信息
- td：數(shù)據(jù)單元格
下面我們具體來對圖一的設(shè)計圖進行整體布局：
XHTML部分:
<form id="demoform" class="democss" action="">
<table summary="使用table來布局的演示" 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;
}
具體演示:
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼]
2、使用label來布局
特點：對于簡單的form布局，此方法在語義表現(xiàn)上更為突出。
通常的解決方法為：
為label和input或其他的外圍添加一個div或p，把該div或p觸發(fā)layout（可以利用Holly Hack設(shè)置height: 1%），并清除左浮動clear:left;。將label設(shè)為float: left;浮動在input或其他的右邊。
讓label 對齊的是方法是：固定label的寬度，然后根據(jù)需要使用text-align向左或者向右對齊。
如果label右側(cè)有多行input或其他，我們可以對div或p設(shè)置padding-left：xpx，然后對label設(shè)置margin-left:-xpx，
設(shè)定寬度的一個小竅門，使用單位em根據(jù)標(biāo)記的最大字?jǐn)?shù)來定寬度，不必辛苦測試px。
當(dāng)然你也可以不用div或p，在每行結(jié)束使用<br />，并且個br設(shè)定清除浮動clear:left;
注意：使用次方法在IE下有個小BUG，那就是div或p里的第一行的input或其他有3px的IE的BUG，我們可以使用只有IE才識別的* html來定義屬性來消除3px的BUG。
下面我們具體來對圖一的設(shè)計圖進行整體布局：
XHTML部分:
<form id="demoform" class="democss" action="">
<p>
<label for="fname" accesskey="F"><span class="required">*</span> First name:</label>
<input type="text" id="fname" value="" />
</p>
<p>
<label for="lname" accesskey="L"><span class="required">*</span> Last name:</label>
<input type="text" id="lname" value="" />
</p>
<p>
<label for="content" accesskey="C"><span class="required">*</span> Preferred content:</label>
<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>
</p>
<p>
<label for="sex" accesskey="G"><span class="required">*</span> Gender:</label>
<select name="sex" id="sex">
<option value="">[Select] </option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</p>
<p>
<label for="yid" accesskey="Y"><span class="required">*</span> Yahoo! ID:</label>
<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>
</p>
<p>
<label for="pw" accesskey="P"><span class="required">*</span> Password:</label>
<input type="password" value="" id="pw" /><br />
<span class="explain">Six characters or more; capitalization matters!</span>
</p>
<p>
<label for="pw2" accesskey="R"><span class="required">*</span> Re-type password:</label>
<input type="password" value="" id="pw2"/>
</p>
<div id="submit">
<input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/>
</div>
</form>
CSS部分:
* {
margin:0;
padding:0;
}
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 {
font:11px/12px Arial, Helvetica, sans-serif;
color:#333;
}
.democss p {
width: 298px;
clear: left;
padding:4px;
padding-left: 122px;
text-align:left;
height: 1%;
}
.democss label {
float: left;
margin-left: -122px;
width: 110px;
padding:4px 4px 0;
text-align:right;
}
.democss input {
width:180px;
}
.democss select#content {
width:185px;
}
.democss input.submit {
width:70px;
}
div#submit {
width:298px;
text-align:left;
padding:4px;
padding-left:122px;
}
* html .democss input,* html .democss select{
margin-left: -3px;
}
* html div#submit input{
margin-left: 0px;
}
具體演示:
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼]
3、使用dl、dt、dd來布局
此屬于發(fā)揮，練習(xí)的方法，當(dāng)然圖一的設(shè)計圖還可以用其他更多的方法來布局，用dl、dt、dd來布局只為拋磚引玉。
- dl：代表HTML自定義列表
- dt：代表HTML自定義列表組
- dd：HTML自定義列表描述
雖然說dl、dt、dd在語義上并不能很好的表現(xiàn)圖一，但dl、dt、dd的布局特點依舊可以用來進行圖一的布局，而且效果還不錯，呵呵……
dt主要放label部分，dd主要放input或其他。
注意：和label布局一樣，有IE的3px BUG。
下面我們具體來對圖一的設(shè)計圖進行整體布局：
XHTML部分:
<form id="demoform" class="democss" action="">
<dl>
<dt><span class="required">*</span> <label for="fname" accesskey="F">First name:</label></dt>
<dd><input type="text" id="fname" value="" /></dd>
<dt><span class="required">*</span> <label for="lname" accesskey="L">Last name:</label></dt>
<dd><input type="text" id="lname" value="" /></dd>
<dt><span class="required">*</span> <label for="content" accesskey="C">Preferred content:</label></dt>
<dd><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>
</dd>
<dt><span class="required">*</span> <label for="sex" accesskey="G">Gender:</label></dt>
<dd><select name="sex" id="sex">
<option value="">[Select] </option>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</dd>
<dt><span class="required">*</span> <label for="yid" accesskey="Y">Yahoo! ID:</label></dt>
<dd><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></dd>
<dt><span class="required">*</span> <label for="pw" accesskey="P">Password:</label></dt>
<dd><input type="password" value="" id="pw" /><br />
<span class="explain">Six characters or more; capitalization matters!</span>
</dd>
<dt><span class="required">*</span> <label for="pw2" accesskey="R">Re-type password:</label></dt>
<dd><input type="password" value="" id="pw2"/></dd>
</dl>
<div id="submit">
<input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/>
</div>
</form>
CSS部分:
* {
margin:0;
padding:0;
}
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 {
font:11px/12px Arial, Helvetica, sans-serif;
color:#333;
}
.democss dl {
width:420px;
}
.democss dt {
width: 110px;
float: left;
padding:4px;
padding-top:8px;
text-align:right;
}
.democss dd{
margin:0 0 0 118px;
padding:4px;
text-align:left;
}
.democss input {
width:180px;
}
.democss select#content {
width:185px;
}
.democss input.submit {
width:70px;
}
div#submit {
width:298px;
text-align:left;
padding:4px;
padding-left:122px;
}
* html .democss input,* html .democss select{
margin-left: -3px;
}
* html div#submit input{
margin-left: 0px;
}
具體演示:
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼]
對于dl,dt,dd的布局好像有個小BUG，有興趣的朋友可以實驗一下。給dd添加他的寬度屬性，我們可以根據(jù)相關(guān)數(shù)據(jù)算出dd的寬度為294px，添加上這個寬度屬性按理論上是沒有問題的，在FF下實驗也沒有問題，但在IE6下，就慘不忍睹了！
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計的五大特點
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計應(yīng)該更看重框架搭建還是視覺觀感？
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站！
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容？
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊？
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計的好看，這個網(wǎng)站就成功了一大半！
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么？有什么作用？
- [2022-05-17 11:29:32] 作為消費者，應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇？
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計都有哪些新的趨勢？
延伸閱讀
- [2007-02-02 10:14:00] 簡單form標(biāo)準(zhǔn)化實例——語義結(jié)構(gòu)
- [2006-11-24 09:47:00] 淺議Web網(wǎng)頁Form表單設(shè)計技巧
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
青島黃島、紅島網(wǎng)站建設(shè)公司 青島IT資訊 SEO 企業(yè)建站 集團公司網(wǎng)站建設(shè) 手機網(wǎng)站建設(shè) 響應(yīng)式設(shè)計 英文網(wǎng)站建設(shè) 搜索引擎 青島高端網(wǎng)站建設(shè)公司哪家好 php程序 建站常識 集團官網(wǎng) 企業(yè)網(wǎng)站 微信小程序 網(wǎng)站的速度 官網(wǎng)網(wǎng)站建設(shè) 頁面設(shè)計 GOOGLE 蘋果系統(tǒng) 企業(yè)網(wǎng)站建設(shè) 青島網(wǎng)站建設(shè)基礎(chǔ)知識 青島網(wǎng)站案例 青島高端網(wǎng)站設(shè)計公司哪家好 手機網(wǎng)站 網(wǎng)站建設(shè)的步驟有哪些 官網(wǎng)建設(shè) 力圖數(shù)字科技 網(wǎng)站設(shè)計 青島網(wǎng)站建設(shè)
