HTML標記語言——表單
互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 18:55:15 作者：佚名 
我要評論
我要評論點擊這里返回網(wǎng)頁教學(xué)網(wǎng) HTML教程 欄目．
上文：標記語言——引用
原文出處
chapter 5 表單
互動性一直是互聯(lián)網(wǎng)的重點,讓使用者與網(wǎng)站能夠交換信息,彼此溝通.表單使我們能夠有組織的,使用同一方式的從使用者那里收集資料,因此在設(shè)計網(wǎng)站時總是屬于&qu
方法D:定義一個表單
最后討論的表單排版方法,是以定義清單定義每一組說明文字與輸入框.這是有點爭議的方法.我們在定義清單的原始設(shè)計目的的邊緣游走,不過這是在近期逐漸普及的方法,同時也只得本書一提.
本書稍后在第8章回深入討論定義清單.事實上,它們能應(yīng)用的范圍遠超過大多是設(shè)計師的認知:以<dl>排版表單就是個很棒的例子.
你應(yīng)該發(fā)現(xiàn)了這個范圍里面的每組表單說明文字都放在定義名詞標簽<dt>之內(nèi),隨后跟著放在定義描述標簽<dd>中的表單元素.這么做能將說明文字與表單元素對配起來,并且在不使用任何樣式時以瀏覽器顯示的效果見圖5-6:
圖5-6.以清單定義排版表單的顯示效果
根據(jù)預(yù)設(shè)值,大多數(shù)可視化瀏覽器會把<dd>縮進顯示在單獨一行之內(nèi).太棒了,因為這樣便不必使用任何多余的<p>或<br />標簽了就能讓不支持CSS的瀏覽器顯示出容易使用的表單排版效果.定義樣式
<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>
最后討論的表單排版方法,是以定義清單定義每一組說明文字與輸入框.這是有點爭議的方法.我們在定義清單的原始設(shè)計目的的邊緣游走,不過這是在近期逐漸普及的方法,同時也只得本書一提.
本書稍后在第8章回深入討論定義清單.事實上,它們能應(yīng)用的范圍遠超過大多是設(shè)計師的認知:以<dl>排版表單就是個很棒的例子.
你應(yīng)該發(fā)現(xiàn)了這個范圍里面的每組表單說明文字都放在定義名詞標簽<dt>之內(nèi),隨后跟著放在定義描述標簽<dd>中的表單元素.這么做能將說明文字與表單元素對配起來,并且在不使用任何樣式時以瀏覽器顯示的效果見圖5-6:
圖5-6.以清單定義排版表單的顯示效果
根據(jù)預(yù)設(shè)值,大多數(shù)可視化瀏覽器會把<dd>縮進顯示在單獨一行之內(nèi).太棒了,因為這樣便不必使用任何多余的<p>或<br />標簽了就能讓不支持CSS的瀏覽器顯示出容易使用的表單排版效果.
定義樣式
最簡單的樣式修改,大概是去掉表單內(nèi)<dd>元素的預(yù)設(shè)縮進:
form dd{
margin:0;
}
前面這一小段css會使方法D范例顯示成圖5-7:
圖5-7. 去掉<dd>縮進效果的定義清單式表單排版
方法A的表格效果,也能借著浮動表單內(nèi)的<dt>元素達成:
form dd {
margin: 0;
}
form dt {
float: left;
padding-right: 10px;
}
在把<dt>元素浮動到左邊之后,包含在<dd>之內(nèi)的表單元素就會排列到右側(cè),像是圖5-8這樣.你應(yīng)該已經(jīng)發(fā)現(xiàn)表單元素不會完美的對齊,但這至少說明了使用<dl>標簽排版表單時,并不代表必須將每個元素都單獨顯示在一行里.
圖5-8.浮動<dt>元件之后的表單排版
事實上,由于多了<dl><dt>和<dd>元素,再加上表單內(nèi)原本就具備的<label>與<input>元素,因此在設(shè)計CSS時,你擁有更多可以指定樣式的對象,而發(fā)揮的空間也變大了.
form dd{
margin:0;
}
form dd {
margin: 0;
}
form dt {
float: left;
padding-right: 10px;
}
相關(guān)文章
- 本文主要對HTML5表單新增屬性進行詳細介紹，并附上實例解析，簡單易懂。需要的朋友一起來看下吧2016-12-21
- 下面小編就為大家?guī)硪黄狧TML Form表單元素全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-26
- 下面小編就為大家?guī)硪黄猦tml5表單及新增的改良元素詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-07
- 這篇文章主要為大家介紹了HTML5新增的表單元素和屬性,具有一定的參考價值！需要的朋友可以參考下2014-07-07
HTML5 的新的表單元素(datalist/keygen/output)使用介紹
HTML5 擁有若干涉及表單的元素和屬性，下面為大家介紹下新的表單元素datalist 元素、keygen 元素、output 元素以及它們的使用實例，感興趣的朋友可以參考下哈，希望對大家2013-07-19HTML5之HTML元素擴展(下)—增強的Form表單元素值得關(guān)注
在HTML5增強的元素中，最值得關(guān)注的就是表單元素;在HTML5中，表單已經(jīng)做了重大的修整，一些以前需要通過JavaScript編碼實現(xiàn)的功能現(xiàn)在無需編碼就可輕松實現(xiàn),感興趣的朋友可2013-01-31- 本教程介紹FORM表單標記的各種屬性在網(wǎng)頁設(shè)計中的應(yīng)用. <FORM>標記的NAME屬性 基本語法 01 <Form name="Form＿name"> 02 ……2008-10-17
- 假設(shè)現(xiàn)在要在表單中添加這樣一項內(nèi)容：瀏覽所在的城市。這里不說全國的城市，只說省會以上的城市就有幾十個。如果以上面講過的單選按鈕的形式，將這些城市全部羅列在網(wǎng)頁上2008-10-17
- 帶有圖片預(yù)覽功能的上傳表單，完整的HTML代碼如下所示 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=2008-10-17
- 表單是用戶提交信息的重要渠道。本節(jié)就將介紹表單的基礎(chǔ)知識。 表單標簽<form> 表單以一個<form>標簽開始。用戶注冊網(wǎng)站會員，投票等等都需要表單來實現(xiàn)2008-10-17