. 打開(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 />標(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" />
label 標(biāo)簽為 input 元素定義標(biāo)注。
<label>
<input type="text" value="">
</label>
<label for="name">姓名</label>
<input type="text" id="name" value="">
如果需要輸入大量的信息,則需要用到<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>
關(guān)于表單的第一節(jié)課,我們講過(guò)表單由三部分組成:表單控件(input控件,select、textarea、button)、提示信息、表單域。
在HTML中,form標(biāo)簽用于定義表單域,即創(chuàng)建一個(gè)表單,用來(lái)收集和傳遞用戶的輸入信息,指定提交到的服務(wù)器,以及提交方式。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。