HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)課件第09章 創(chuàng)建表單

第九章創(chuàng)建表單

HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)本章要點(diǎn)常用表單標(biāo)記的意義及使用表單布局標(biāo)記的意義及使用第九章創(chuàng)建表單

HTML與CSS前臺(tái)頁(yè)面設(shè)計(jì)目錄：9.1表單的作用9.2表單標(biāo)記9.3表單布局標(biāo)記9.4綜合實(shí)例9.1表單的作用

HTML中的表單(form)是網(wǎng)頁(yè)中最常用的組件，是網(wǎng)站服務(wù)器端與客戶端之間溝通的橋梁。表單在網(wǎng)上隨處可見(jiàn)，它們被用于在登錄頁(yè)面輸入用戶名和密碼，對(duì)博客進(jìn)行評(píng)論等。9.2表單標(biāo)記

1.form可用<form>標(biāo)記來(lái)定義一個(gè)表單，當(dāng)一個(gè)表單被定義后就可在表單內(nèi)放置表單標(biāo)記。表單使用<form>作為開(kāi)始標(biāo)記，以</form>結(jié)尾。在一個(gè)HTML頁(yè)面中允許有多個(gè)表單，以表單的名字（name）和（id）作為它們之間的區(qū)分。表單格式的代碼如下：<form表單標(biāo)記的各種屬性設(shè)置>

設(shè)置各種表單標(biāo)記</form>9.2表單標(biāo)記

2.input最常用的表單控件是input，這一類的表單控件被稱為輸入類控件，通過(guò)<input>來(lái)標(biāo)記。輸入類控件有很多種類型，通過(guò)type屬性進(jìn)行設(shè)置。<input>標(biāo)記可以為表單提供單行文本輸入框、單選按鈕、復(fù)選按鈕、普通按鈕等。9.2表單標(biāo)記

3.textareaHTML語(yǔ)言提供了多行文本的輸入框，這是接收大量數(shù)據(jù)的文本區(qū)，它可以用于數(shù)據(jù)的輸入，又可用于數(shù)據(jù)的顯示區(qū)域。實(shí)現(xiàn)多行文本輸入?yún)^(qū)的標(biāo)記為<textarea>，其語(yǔ)法為：<textareaclass=“classname”id=“IDname”cols=“number”rows=“number”style=“styleinformation”readonly>在文本區(qū)中顯示內(nèi)容</textarea>9.2表單標(biāo)記

4.select和optionHTML語(yǔ)言支持具有選擇功能的標(biāo)記<select>。使用選擇功能方便了用戶在多個(gè)選項(xiàng)中進(jìn)行選擇，提高了窗口區(qū)域的利用率。通過(guò)對(duì)<select>標(biāo)記的屬性size的值的設(shè)置，可產(chǎn)生不同的列表形式：如下拉列表和滾動(dòng)列表。對(duì)屬性multiple進(jìn)行設(shè)置，可以使同時(shí)選擇多個(gè)列表項(xiàng)。<select>標(biāo)記是定義一個(gè)列表結(jié)構(gòu)的標(biāo)記，列表中的列表項(xiàng)（或稱菜單項(xiàng)）是真正被選擇的對(duì)象，對(duì)它的定義要用<option>標(biāo)記。因此，設(shè)置一個(gè)列表，要同時(shí)使用<select>和<option>標(biāo)記。<selectclass=“classname”id=“idname”name=“selectname”size=“number”multiple>option標(biāo)記</select>9.2表單標(biāo)記

5.optgroup<optgroup>標(biāo)記可以對(duì)選項(xiàng)進(jìn)行分組，通過(guò)<optgroup>標(biāo)記可以對(duì)選項(xiàng)進(jìn)行分類，并使用label屬性在下拉列表里顯示為一個(gè)不可選的縮進(jìn)標(biāo)題。語(yǔ)法如下： <optgrouplabel="組名">9.3表單布局標(biāo)記

1.fieldset和legend

<fieldset>標(biāo)記可將表單內(nèi)的相關(guān)標(biāo)記分組。當(dāng)一組表單控件放到<fieldset>標(biāo)記內(nèi)時(shí)，瀏覽器會(huì)以特殊方式來(lái)顯示它們，它們可能有特殊的邊界、3D效果，甚至可創(chuàng)建一個(gè)子表單來(lái)處理這些標(biāo)記。<legend>標(biāo)記為<fieldset>標(biāo)記定義標(biāo)題，<legend>且必須在<fieldse>標(biāo)記中使用。9.3表單布局標(biāo)記

2.

label

可以對(duì)form表單中的文本內(nèi)容關(guān)聯(lián)一個(gè)<label>標(biāo)記，并使用<label>標(biāo)記的for屬性使其與表單組件關(guān)聯(lián)起來(lái)，效果為單擊文本是，光標(biāo)顯示在相關(guān)聯(lián)的表單組件內(nèi)。使用時(shí)要將lable綁定到其它的控件，將<lable>標(biāo)記的for屬性設(shè)置為與該控件的id相同。將lable