. 打開(kāi)一個(gè)頁(yè)面，通過(guò)效果圖來(lái)引入今天的內(nèi)容：從效果圖上看出，網(wǎng)頁(yè)右側(cè)有一個(gè)登錄區(qū)域，里面包含文本框，密碼框，下拉菜單、復(fù)選框、按鈕等，當(dāng)點(diǎn)擊按鈕時(shí)，該頁(yè)面會(huì)自動(dòng)將用戶輸入的內(nèi)容發(fā)送到服務(wù)器，這個(gè)時(shí)候就需要用到表單了

2. 什么是表單

(1) 通俗說(shuō)表單是一個(gè)將用戶輸入的信息組織起來(lái)的容器，需要將用戶輸入信息填寫到表單容器中，當(dāng)點(diǎn)擊按鈕時(shí)，表單會(huì)將數(shù)據(jù)統(tǒng)一發(fā)送到服務(wù)器

(2) 典型的應(yīng)用場(chǎng)景：登錄注冊(cè) 網(wǎng)上訂單 網(wǎng)上搜索 在網(wǎng)頁(yè)中應(yīng)用非常廣泛，例如申請(qǐng)郵箱，需要先填寫注冊(cè)信息，然后才能申請(qǐng)?zhí)峤唬瑫r(shí)如果希望登錄郵箱，也必須在登錄郵箱才能進(jìn)入到郵箱里，這就是表單典型應(yīng)用

(3) 為了方便操作，表單提供了多種表單元素：文本框 密碼框單選按鈕 復(fù)選框 下拉列表多行文本等等。在接下來(lái)的學(xué)習(xí)中，逐步掌握在網(wǎng)頁(yè)中創(chuàng)建表單的方法以及常用的表單元素

3. 表單怎么使用呢

(1) 在代碼視圖下，光標(biāo)移動(dòng)到需要放置表單的位置上，點(diǎn)擊--插入---表單----表單，可以在工作區(qū)插入一個(gè)表單。由于表單僅僅是一個(gè)容器，不會(huì)在瀏覽器顯示。

(2) 可以看到 表單使用<form></form>標(biāo)簽表示，在開(kāi)始和結(jié)束標(biāo)簽之間存放表單元素等內(nèi)容。

(3) 表單屬性

① 為了能夠?qū)崿F(xiàn)信息提交目的，還需要為表單指定要提交的頁(yè)面地址，并指定提交方式

② 光標(biāo)停留在表單任意位置，單擊屬性面板會(huì)自動(dòng)顯示表單相關(guān)的屬性

③ Id:設(shè)置表單的id。相當(dāng)于現(xiàn)實(shí)中身份證，處理表單，一般都要表單設(shè)置id id=””

④ 動(dòng)作：當(dāng)提交表單時(shí)，如何向發(fā)送表單數(shù)據(jù)，處理表單數(shù)據(jù)的目標(biāo)地址 action=””

⑤ 方法：規(guī)定提交方式 取值 get或者post method=””

⑥ 咱們前期學(xué)網(wǎng)頁(yè)的時(shí)候，先不考慮這些元素，簡(jiǎn)單了解就好，后期跟程序在進(jìn)行整合

(4) 表單屬性

① 最常用的輸入元素是單行文本框，提供給用戶輸入單行文本信息，比如用戶名的輸入。步驟如下，光標(biāo)停留到表單里 插入---表單---文本域

② 插入單行文本框之后，鼠標(biāo)單擊選中文本框

1) 元素名稱：對(duì)應(yīng)于屬性面板中name， 用來(lái)指定表單元素的名稱，提交的時(shí)候，填寫的數(shù)據(jù)是隨著表單名稱一起提交的

2) 字符寬度:單行文本框的寬度 屬性面板中 size

3) 最多字符：允許用戶輸入的最多字符數(shù).超過(guò)該數(shù)值，將無(wú)法繼續(xù)輸入 屬性面板中 Max Length

4) 初始值：打開(kāi)網(wǎng)頁(yè)的時(shí)候，文本默認(rèn)的顯示文本.一般用于提示用戶輸入信息 屬性面板中 value

5) Type: 表單元素的類型 name:表單元素的名稱 size:表單元素的寬度 maxlength:允許輸入的最大字符 value文本框的初始值

③ 密碼框

1) 用戶登錄的表單，為了保障賬戶的安全，在需要密碼的地方使用*代替。防止密碼被竊取的風(fēng)險(xiǎn)，只不過(guò)是文本顯示輸入的文本，密碼框?qū)⒂脩糨斎胛谋緸?*來(lái)顯示。

2) 代碼顯示-- 除了type屬性值不一樣之外，其他屬性和單行文本框是一樣的

④ 單選按鈕

1) 也是網(wǎng)頁(yè)中應(yīng)用非常廣泛，主要作用是 來(lái)限制用戶選中一組數(shù)據(jù)中的其中一個(gè)，以確保數(shù)據(jù)的準(zhǔn)確性。 例如用戶的性別的時(shí)候，正確的是 男或者女，如果是單行文本，可以隨意填寫，往往提交的信息不準(zhǔn)確

2) 插入---表單----單選按鈕：插入一個(gè)單選按鈕，如果需要多個(gè)話，在重復(fù)上述步驟即可

3) 選中插入的單選按鈕，發(fā)現(xiàn)效果不是我們期待的，兩個(gè)單選按鈕可以同時(shí)選中。那咱們?nèi)绾文苓x中一個(gè)呢

4) 可以根據(jù)單選按鈕名稱進(jìn)行分組，相同名稱的一組按鈕才能相互排斥。只需要在多個(gè)單選框設(shè)置為相同的名稱就可以了， 被選中的單選按鈕連同該項(xiàng)的值會(huì)一起提交

5) 是否是默認(rèn)選中，checked:表示按鈕的默認(rèn)選中的狀態(tài)

⑤ 復(fù)選框

1) 在一些特殊情況下，并不強(qiáng)調(diào)要求用戶選擇其中的一項(xiàng)，例如選擇自己興趣愛(ài)好的，愛(ài)好可能會(huì)有多項(xiàng)，就需要用到復(fù)選框，允許用戶選擇其中多項(xiàng)內(nèi)容

2) 插入---表單---復(fù)選框，如果想添加多個(gè)，重復(fù)上述步驟

3) 同單選按鈕一樣，同一組的復(fù)選框應(yīng)當(dāng)設(shè)置統(tǒng)一名稱，便于提交數(shù)據(jù)，同時(shí)也可以為復(fù)選框設(shè)置默認(rèn)選中，可以設(shè)置多個(gè)默認(rèn)選中狀態(tài)

⑥ 下拉列表

1) 主要用在多個(gè)項(xiàng)目中選中其中一個(gè)場(chǎng)景，可以使用單選或者多選按鈕來(lái)定義，如果備選選項(xiàng)較多是，會(huì)占用較大空間， 用戶選擇自己所在的省份和城市變得不太現(xiàn)實(shí)，下拉列表能解決這一問(wèn)題而出現(xiàn)的。占用極少空間顯示較多內(nèi)容

2) 插入----表單---選擇,可以向表單中插入一個(gè)下拉列表，剛創(chuàng)建的列表的時(shí)候，是沒(méi)有內(nèi)容的，給列表添加 列表值

3) 單擊列表值，會(huì)彈出列表設(shè)置面板，設(shè)置下拉備選框

4) 下拉列表：select標(biāo)簽 列表項(xiàng)使用option標(biāo)簽

5) Select name:下拉列表的名稱，option是放入到select標(biāo)簽內(nèi)的，使用value屬性表示當(dāng)前項(xiàng)的值，selected 該選項(xiàng)默認(rèn)是選中的 option開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容是 顯示在用戶面前的文本

⑦ 按鈕

1) 是表單中是不可缺少的部分，寫好表單元素之后，需要添加按鈕，用來(lái)響應(yīng)用戶的操作。

2) 常見(jiàn)按鈕：提交、重置、普通、圖片

a. 提交按鈕：整個(gè)表單提交的內(nèi)容發(fā)送到服務(wù)器

b. 重置按鈕：整個(gè)表單還原初始狀態(tài)

c. 普通按鈕：沒(méi)有任何反應(yīng)，通常和javascript特效方面，后面課程繼續(xù)學(xué)習(xí)

d. 圖片：主要是為了彌補(bǔ)普通按鈕在外觀上不足，允許我們使用一張圖片來(lái)代替

3) 插入---表單---按鈕， 功能通過(guò)屬性面板中

4. 表單在實(shí)際項(xiàng)目中怎么使用，看一下綜合案例

(1) 制作 網(wǎng)易郵箱登錄頁(yè)面

(2) 演示內(nèi)容------只寫 表單 案例，其他內(nèi)容，寫好。

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

一、表單是什么

文本框、按鈕、單選框、復(fù)選框、下拉列表等的統(tǒng)稱

如圖：

二、表單標(biāo)簽

在HTML中，表單標(biāo)簽有5種：form、input、textarea、select和option。

從外觀上劃分，表單可以分以下8種：

（1）單行文本框

（2）密碼文本框

（3）單選框

（4）復(fù)選框

（5）按鈕

（6）文件上傳

（7）多行文本框

（8）下拉列表

三、form標(biāo)簽

input、textarea、select、option都是表單標(biāo)簽，一般要放在form標(biāo)簽內(nèi)部

語(yǔ)法：

<form>
    //各種表單標(biāo)簽
</form>

舉例：

<form>
	<input type="text" value="單號(hào)文本框" /><br />
	<textarea>多行文本框</textarea><br />
	<select>
		<option>下拉框選項(xiàng)1</option>
		<option>下拉框選項(xiàng)2</option>
		<option>下拉框選項(xiàng)3</option>
	</select>
</form>

效果：

3.1form標(biāo)簽屬性：

1）name 表單名稱

舉例：<form name="表單1"></form

2）method 提交方式

在form標(biāo)簽中，method屬性用于指定表單數(shù)據(jù)使用哪一種http提交方法。method屬性取值有兩個(gè)：一個(gè)是“get”，另外一個(gè)是“post”。

get的安全性較差，而post的安全性較好。所以在實(shí)際開(kāi)發(fā)中，使用post比較多。

舉例：

<form method="post"></form

3）action 提交地址

在form標(biāo)簽中，action屬性用于指定表單數(shù)據(jù)提交到哪一個(gè)地址進(jìn)行處理。

舉例：

<form action="index.php"></form

4）target 打開(kāi)方式

form標(biāo)簽的target屬性跟a標(biāo)簽的target屬性是一樣的，都是用來(lái)指定窗口的打開(kāi)方式。一般情況下，我們只會(huì)用到“_blank”這一個(gè)屬性值

<form target="_blank"></form

5)enctype 編碼方式

在form標(biāo)簽中，enctype屬性用于指定表單數(shù)據(jù)提交的編碼方式。一般情況下，我們不需要設(shè)置，除非你用到上傳文件功能.

單的作用：用來(lái)收集用戶的信息。

提示信息： 說(shuō)明性的文字，用于提示用戶進(jìn)行填寫和操作。

表單控件：包含了具體的表單功能項(xiàng)，如文本框、密碼框、單選框、復(fù)選框、提交按鈕、重置按鈕等。

表單域：相當(dāng)于一個(gè)容器，用來(lái)容納所有的表單控件和提示信息，可以通過(guò)它定義處理表單數(shù)據(jù)提交的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器。

input 控件(重點(diǎn))

<input />標(biāo)簽為單標(biāo)簽，type屬性為input標(biāo)簽最基本的屬性，取值有多種，用于指定不同的標(biāo)簽類型。除了type屬性之外，<input />標(biāo)簽還可以定義很多其他的屬性：

文本框 <input type="text" value="默認(rèn)值"/>
密碼框 <input type="password" />

單選按鈕組 
	<input type=“radio” name=“ral” />男 
	<input type=“radio” name=“ral” checked=“checked”/>(默認(rèn)選中)女
<!--*disabled="disabled" (禁用) *  checked="checked"   (默認(rèn)選中)-->

復(fù)選框組 
<input type="checkbox" name="" /> 
<input type="checkbox" name="" disabled="disabled" />

按鈕組：
空按鈕 <input type="button" value="按鈕內(nèi)容" />
提交按鈕 <input type="submit" value="按鈕內(nèi)容" />
重置按鈕 <input type="reset" value="按鈕內(nèi)容" />
圖片按鈕 <input type="image" src='bg.png' />
文件按鈕 <input type="file" />

lable 標(biāo)簽

label 標(biāo)簽為 input 元素定義標(biāo)注。

• 作用
• 用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素會(huì)獲得焦點(diǎn)。
• for 屬性規(guī)定 label 與哪個(gè)表單元素綁定。
• 方法 1：label包裹

<label>

<input type="text" value="">

</label>

• 方法 2：for 指定

<label for="name">姓名</label>

<input type="text" id="name" value="">

textarea（文本域）

如果需要輸入大量的信息，則需要用到<textarea></textarea>標(biāo)簽。textarea控件可以創(chuàng)建多行文本輸入框，語(yǔ)法：

<textarea cols="每行中顯示的字符數(shù)" rows="顯示的行數(shù)">
  文本信息
</textarea>

下拉菜單

<select>
  <option>選項(xiàng)1</option>
  <option selected>選項(xiàng)2</option>
  <option>選項(xiàng)3</option>
  ...
</select>

• 注意
• (1) <select></select>中至少應(yīng)包含一對(duì)<option></option>。
• (2) 在option 中定義selected=" selected "時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。
• 示例

表單域

關(guān)于表單的第一節(jié)課，我們講過(guò)表單由三部分組成：表單控件（input控件，select、textarea、button）、提示信息、表單域。

在HTML中，form標(biāo)簽用于定義表單域，即創(chuàng)建一個(gè)表單，用來(lái)收集和傳遞用戶的輸入信息，指定提交到的服務(wù)器，以及提交方式。

• 語(yǔ)法
• <form action="url地址" method="提交方法" name="表單名稱"> 用戶名：<input type="text" /><br /> 密碼：<input type="password" maxlength="6" /><br /> <input type="submit" /> <input type="reset" /> </form>
• 說(shuō)明
• （1）Action：用于指定接收并處理表單數(shù)據(jù)的服務(wù)器的url地址
• （2）method：用于設(shè)置表單數(shù)據(jù)的提交方式，get或post
• （3）name：指定表單的名稱，用于區(qū)分同一個(gè)頁(yè)面中的其他表單
• 注意
• 每個(gè)表單都應(yīng)該有自己表單域