欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML標(biāo)記語(yǔ)言——表單

互聯(lián)網(wǎng)   發(fā)布時(shí)間：2008-10-17 18:55:15   作者：佚名   我要評(píng)論
點(diǎn)擊這里返回網(wǎng)頁(yè)教學(xué)網(wǎng)　HTML教程　欄目． 上文：標(biāo)記語(yǔ)言——引用 原文出處 chapter 5 表單 互動(dòng)性一直是互聯(lián)網(wǎng)的重點(diǎn),讓使用者與網(wǎng)站能夠交換信息,彼此溝通.表單使我們能夠有組織的,使用同一方式的從使用者那里收集資料,因此在設(shè)計(jì)網(wǎng)站時(shí)總是屬于&qu
方法D:定義一個(gè)表單

<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>

最后討論的表單排版方法,是以定義清單定義每一組說(shuō)明文字與輸入框.這是有點(diǎn)爭(zhēng)議的方法.我們?cè)诙x清單的原始設(shè)計(jì)目的的邊緣游走,不過(guò)這是在近期逐漸普及的方法,同時(shí)也只得本書(shū)一提.
本書(shū)稍后在第8章回深入討論定義清單.事實(shí)上,它們能應(yīng)用的范圍遠(yuǎn)超過(guò)大多是設(shè)計(jì)師的認(rèn)知:以<dl>排版表單就是個(gè)很棒的例子.
你應(yīng)該發(fā)現(xiàn)了這個(gè)范圍里面的每組表單說(shuō)明文字都放在定義名詞標(biāo)簽<dt>之內(nèi),隨后跟著放在定義描述標(biāo)簽<dd>中的表單元素.這么做能將說(shuō)明文字與表單元素對(duì)配起來(lái),并且在不使用任何樣式時(shí)以瀏覽器顯示的效果見(jiàn)圖5-6:

圖5-6.以清單定義排版表單的顯示效果
根據(jù)預(yù)設(shè)值,大多數(shù)可視化瀏覽器會(huì)把<dd>縮進(jìn)顯示在單獨(dú)一行之內(nèi).太棒了,因?yàn)檫@樣便不必使用任何多余的<p>或<br />標(biāo)簽了就能讓不支持CSS的瀏覽器顯示出容易使用的表單排版效果.
定義樣式
最簡(jiǎn)單的樣式修改,大概是去掉表單內(nèi)<dd>元素的預(yù)設(shè)縮進(jìn):

form dd{
margin:0;
}

前面這一小段css會(huì)使方法D范例顯示成圖5-7:

圖5-7. 去掉<dd>縮進(jìn)效果的定義清單式表單排版
方法A的表格效果,也能借著浮動(dòng)表單內(nèi)的<dt>元素達(dá)成:

form dd {
margin: 0;
}

form dt {
float: left;
padding-right: 10px;
}

在把<dt>元素浮動(dòng)到左邊之后,包含在<dd>之內(nèi)的表單元素就會(huì)排列到右側(cè),像是圖5-8這樣.你應(yīng)該已經(jīng)發(fā)現(xiàn)表單元素不會(huì)完美的對(duì)齊,但這至少說(shuō)明了使用<dl>標(biāo)簽排版表單時(shí),并不代表必須將每個(gè)元素都單獨(dú)顯示在一行里.

圖5-8.浮動(dòng)<dt>元件之后的表單排版
事實(shí)上,由于多了<dl><dt>和<dd>元素,再加上表單內(nèi)原本就具備的<label>與<input>元素,因此在設(shè)計(jì)CSS時(shí),你擁有更多可以指定樣式的對(duì)象,而發(fā)揮的空間也變大了.

相關(guān)文章

  • 詳解HTML5表單新增屬性

    本文主要對(duì)HTML5表單新增屬性進(jìn)行詳細(xì)介紹，并附上實(shí)例解析，簡(jiǎn)單易懂。需要的朋友一起來(lái)看下吧
    2016-12-21

  • HTML Form表單元素全面了解

    下面小編就為大家?guī)?lái)一篇HTML Form表單元素全面了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-09-26

  • html5表單及新增的改良元素詳解

    下面小編就為大家?guī)?lái)一篇html5表單及新增的改良元素詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-06-07

  • HTML5新增的表單元素和屬性實(shí)例解析

    這篇文章主要為大家介紹了HTML5新增的表單元素和屬性,具有一定的參考價(jià)值！需要的朋友可以參考下
    2014-07-07

  • HTML5 的新的表單元素(datalist/keygen/output)使用介紹

    HTML5 擁有若干涉及表單的元素和屬性，下面為大家介紹下新的表單元素datalist 元素、keygen 元素、output 元素以及它們的使用實(shí)例，感興趣的朋友可以參考下哈，希望對(duì)大家
    2013-07-19

  • HTML5之HTML元素?cái)U(kuò)展(下)—增強(qiáng)的Form表單元素值得關(guān)注

    在HTML5增強(qiáng)的元素中，最值得關(guān)注的就是表單元素;在HTML5中，表單已經(jīng)做了重大的修整，一些以前需要通過(guò)JavaScript編碼實(shí)現(xiàn)的功能現(xiàn)在無(wú)需編碼就可輕松實(shí)現(xiàn),感興趣的朋友可
    2013-01-31

  • HTML表單標(biāo)記教程(2):

    本教程介紹FORM表單標(biāo)記的各種屬性在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用. <FORM>標(biāo)記的NAME屬性 基本語(yǔ)法 01 <Form name="Form＿name"> 02 ……
    2008-10-17

  • HTML表單標(biāo)記教程(4):

    假設(shè)現(xiàn)在要在表單中添加這樣一項(xiàng)內(nèi)容：瀏覽所在的城市。這里不說(shuō)全國(guó)的城市，只說(shuō)省會(huì)以上的城市就有幾十個(gè)。如果以上面講過(guò)的單選按鈕的形式，將這些城市全部羅列在網(wǎng)頁(yè)上
    2008-10-17

  • 帶有圖片預(yù)覽功能的上傳表單的完整HTML

    帶有圖片預(yù)覽功能的上傳表單，完整的HTML代碼如下所示 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=
    2008-10-17

  • XHTML入門(mén)學(xué)習(xí)教程:表單標(biāo)簽

    表單是用戶(hù)提交信息的重要渠道。本節(jié)就將介紹表單的基礎(chǔ)知識(shí)。 表單標(biāo)簽<form> 表單以一個(gè)<form>標(biāo)簽開(kāi)始。用戶(hù)注冊(cè)網(wǎng)站會(huì)員，投票等等都需要表單來(lái)實(shí)現(xiàn)
    2008-10-17

最新評(píng)論