整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML表單基礎(chǔ)知識(shí)

          HTML表單基礎(chǔ)知識(shí)

          . 打開(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)該有自己表單域

          主站蜘蛛池模板: 一区二区三区高清| 色综合视频一区二区三区| 精品视频一区二区观看| 国产精品日本一区二区不卡视频| 日韩精品一区二区三区国语自制| 久久一区二区精品| 又硬又粗又大一区二区三区视频| 国产福利一区二区| 国产成人一区二区三区精品久久| 亚洲一区二区三区无码国产| 国产免费一区二区视频| 在线观看午夜亚洲一区| 国精品无码一区二区三区在线| 亚洲日本一区二区一本一道| 天天看高清无码一区二区三区| 国产精品亚洲综合一区在线观看| 国产麻豆精品一区二区三区| 成人毛片无码一区二区| 精品亚洲av无码一区二区柚蜜| 国产精品一区二区久久| 亚洲欧美日韩一区二区三区| AA区一区二区三无码精片| 一本一道波多野结衣AV一区| 无码少妇丰满熟妇一区二区| 成人精品一区二区电影| 动漫精品第一区二区三区| 一区二区在线视频观看| 亚洲国产激情一区二区三区 | 文中字幕一区二区三区视频播放| 国产内射999视频一区| 人体内射精一区二区三区| 91福利一区二区| 日本人的色道www免费一区| 精品无码成人片一区二区| 一区二区三区免费电影| 果冻传媒董小宛一区二区| 久久久精品人妻一区亚美研究所| 精品无码人妻一区二区三区品 | 国产精品亚洲综合一区在线观看| 日本美女一区二区三区| 成人区精品人妻一区二区不卡 |