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

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

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

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

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

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

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

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

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

4.select和optionHTML語言支持具有選擇功能的標(biāo)記<select>。使用選擇功能方便了用戶在多個選項中進(jìn)行選擇，提高了窗口區(qū)域的利用率。通過對<select>標(biāo)記的屬性size的值的設(shè)置，可產(chǎn)生不同的列表形式：如下拉列表和滾動列表。對屬性multiple進(jìn)行設(shè)置，可以使同時選擇多個列表項。<select>標(biāo)記是定義一個列表結(jié)構(gòu)的標(biāo)記，列表中的列表項（或稱菜單項）是真正被選擇的對象，對它的定義要用<option>標(biāo)記。因此，設(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)記可以對選項進(jìn)行分組，通過<optgroup>標(biāo)記可以對選項進(jìn)行分類，并使用label屬性在下拉列表里顯示為一個不可選的縮進(jìn)標(biāo)題。語法如下： <optgrouplabel="組名">9.3表單布局標(biāo)記

1.fieldset和legend

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

2.

label

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