整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
. 打開一個頁面，通過效果圖來引入今天的內容：從效果圖上看出，網頁右側有一個登錄區域，里面包含文本框，密碼框，下拉菜單、復選框、按鈕等，當點擊按鈕時，該頁面會自動將用戶輸入的內容發送到服務器，這個時候就需要用到表單了
2. 什么是表單
(1) 通俗說表單是一個將用戶輸入的信息組織起來的容器，需要將用戶輸入信息填寫到表單容器中，當點擊按鈕時，表單會將數據統一發送到服務器
(2) 典型的應用場景：登錄注冊 網上訂單 網上搜索 在網頁中應用非常廣泛，例如申請郵箱，需要先填寫注冊信息，然后才能申請提交，同時如果希望登錄郵箱，也必須在登錄郵箱才能進入到郵箱里，這就是表單典型應用
(3) 為了方便操作，表單提供了多種表單元素：文本框 密碼框單選按鈕 復選框 下拉列表多行文本等等。在接下來的學習中，逐步掌握在網頁中創建表單的方法以及常用的表單元素
3. 表單怎么使用呢
(1) 在代碼視圖下，光標移動到需要放置表單的位置上，點擊--插入---表單----表單，可以在工作區插入一個表單。由于表單僅僅是一個容器，不會在瀏覽器顯示。
(2) 可以看到 表單使用<form></form>標簽表示，在開始和結束標簽之間存放表單元素等內容。
(3) 表單屬性
① 為了能夠實現信息提交目的，還需要為表單指定要提交的頁面地址，并指定提交方式
② 光標停留在表單任意位置，單擊屬性面板會自動顯示表單相關的屬性
③ Id:設置表單的id。相當于現實中身份證，處理表單，一般都要表單設置id id=””
④ 動作：當提交表單時，如何向發送表單數據，處理表單數據的目標地址 action=””
⑤ 方法：規定提交方式 取值 get或者post method=””
⑥ 咱們前期學網頁的時候，先不考慮這些元素，簡單了解就好，后期跟程序在進行整合
(4) 表單屬性
① 最常用的輸入元素是單行文本框，提供給用戶輸入單行文本信息，比如用戶名的輸入。步驟如下，光標停留到表單里 插入---表單---文本域
② 插入單行文本框之后，鼠標單擊選中文本框
1) 元素名稱：對應于屬性面板中name， 用來指定表單元素的名稱，提交的時候，填寫的數據是隨著表單名稱一起提交的
2) 字符寬度:單行文本框的寬度 屬性面板中 size
3) 最多字符：允許用戶輸入的最多字符數.超過該數值，將無法繼續輸入 屬性面板中 Max Length
4) 初始值：打開網頁的時候，文本默認的顯示文本.一般用于提示用戶輸入信息 屬性面板中 value
5) Type: 表單元素的類型 name:表單元素的名稱 size:表單元素的寬度 maxlength:允許輸入的最大字符 value文本框的初始值
③ 密碼框
1) 用戶登錄的表單，為了保障賬戶的安全，在需要密碼的地方使用*代替。防止密碼被竊取的風險，只不過是文本顯示輸入的文本，密碼框將用戶輸入文本為 *來顯示。
2) 代碼顯示-- 除了type屬性值不一樣之外，其他屬性和單行文本框是一樣的
④ 單選按鈕
1) 也是網頁中應用非常廣泛，主要作用是 來限制用戶選中一組數據中的其中一個，以確保數據的準確性。 例如用戶的性別的時候，正確的是 男或者女，如果是單行文本，可以隨意填寫，往往提交的信息不準確
2) 插入---表單----單選按鈕：插入一個單選按鈕，如果需要多個話，在重復上述步驟即可
3) 選中插入的單選按鈕，發現效果不是我們期待的，兩個單選按鈕可以同時選中。那咱們如何能選中一個呢
4) 可以根據單選按鈕名稱進行分組，相同名稱的一組按鈕才能相互排斥。只需要在多個單選框設置為相同的名稱就可以了， 被選中的單選按鈕連同該項的值會一起提交
5) 是否是默認選中，checked:表示按鈕的默認選中的狀態
⑤ 復選框
1) 在一些特殊情況下，并不強調要求用戶選擇其中的一項，例如選擇自己興趣愛好的，愛好可能會有多項，就需要用到復選框，允許用戶選擇其中多項內容
2) 插入---表單---復選框，如果想添加多個，重復上述步驟
3) 同單選按鈕一樣，同一組的復選框應當設置統一名稱，便于提交數據，同時也可以為復選框設置默認選中，可以設置多個默認選中狀態
⑥ 下拉列表
1) 主要用在多個項目中選中其中一個場景，可以使用單選或者多選按鈕來定義，如果備選選項較多是，會占用較大空間， 用戶選擇自己所在的省份和城市變得不太現實，下拉列表能解決這一問題而出現的。占用極少空間顯示較多內容
2) 插入----表單---選擇,可以向表單中插入一個下拉列表，剛創建的列表的時候，是沒有內容的，給列表添加 列表值
3) 單擊列表值，會彈出列表設置面板，設置下拉備選框
4) 下拉列表：select標簽 列表項使用option標簽
5) Select name:下拉列表的名稱，option是放入到select標簽內的，使用value屬性表示當前項的值，selected 該選項默認是選中的 option開始標簽和結束標簽之間的內容是 顯示在用戶面前的文本
⑦ 按鈕
1) 是表單中是不可缺少的部分，寫好表單元素之后，需要添加按鈕，用來響應用戶的操作。
2) 常見按鈕：提交、重置、普通、圖片
a. 提交按鈕：整個表單提交的內容發送到服務器
b. 重置按鈕：整個表單還原初始狀態
c. 普通按鈕：沒有任何反應，通常和javascript特效方面，后面課程繼續學習
d. 圖片：主要是為了彌補普通按鈕在外觀上不足，允許我們使用一張圖片來代替
3) 插入---表單---按鈕， 功能通過屬性面板中
4. 表單在實際項目中怎么使用，看一下綜合案例
(1) 制作 網易郵箱登錄頁面
(2) 演示內容------只寫 表單 案例，其他內容，寫好。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
一、表單是什么
文本框、按鈕、單選框、復選框、下拉列表等的統稱
如圖：
二、表單標簽
在HTML中，表單標簽有5種：form、input、textarea、select和option。
從外觀上劃分，表單可以分以下8種：
（1）單行文本框
（2）密碼文本框
（3）單選框
（4）復選框
（5）按鈕
（6）文件上傳
（7）多行文本框
（8）下拉列表
三、form標簽
input、textarea、select、option都是表單標簽，一般要放在form標簽內部
語法：
<form>
//各種表單標簽
</form>舉例：
<form>
<input type="text" value="單號文本框" /><br />
<textarea>多行文本框</textarea><br />
<select>
<option>下拉框選項1</option>
<option>下拉框選項2</option>
<option>下拉框選項3</option>
</select>
</form>效果：
3.1form標簽屬性：
1）name 表單名稱
舉例：<form name="表單1"></form
2）method 提交方式
在form標簽中，method屬性用于指定表單數據使用哪一種http提交方法。method屬性取值有兩個：一個是“get”，另外一個是“post”。
get的安全性較差，而post的安全性較好。所以在實際開發中，使用post比較多。
舉例：
<form method="post"></form
3）action 提交地址
在form標簽中，action屬性用于指定表單數據提交到哪一個地址進行處理。
舉例：
<form action="index.php"></form
4）target 打開方式
form標簽的target屬性跟a標簽的target屬性是一樣的，都是用來指定窗口的打開方式。一般情況下，我們只會用到“_blank”這一個屬性值
<form target="_blank"></form
5)enctype 編碼方式
在form標簽中，enctype屬性用于指定表單數據提交的編碼方式。一般情況下，我們不需要設置，除非你用到上傳文件功能.
單的作用：用來收集用戶的信息。
提示信息： 說明性的文字，用于提示用戶進行填寫和操作。
表單控件：包含了具體的表單功能項，如文本框、密碼框、單選框、復選框、提交按鈕、重置按鈕等。
表單域：相當于一個容器，用來容納所有的表單控件和提示信息，可以通過它定義處理表單數據提交的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后臺服務器。
<input />標簽為單標簽，type屬性為input標簽最基本的屬性，取值有多種，用于指定不同的標簽類型。除了type屬性之外，<input />標簽還可以定義很多其他的屬性：
文本框 <input type="text" value="默認值"/>
密碼框 <input type="password" />
單選按鈕組
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral” checked=“checked”/>(默認選中)女
<!--*disabled="disabled" (禁用) * checked="checked" (默認選中)-->
復選框組
<input type="checkbox" name="" />
<input type="checkbox" name="" disabled="disabled" />
按鈕組：
空按鈕 <input type="button" value="按鈕內容" />
提交按鈕 <input type="submit" value="按鈕內容" />
重置按鈕 <input type="reset" value="按鈕內容" />
圖片按鈕 <input type="image" src='bg.png' />
文件按鈕 <input type="file" />
label 標簽為 input 元素定義標注。
<label>
<input type="text" value="">
</label>
<label for="name">姓名</label>
<input type="text" id="name" value="">
如果需要輸入大量的信息，則需要用到<textarea></textarea>標簽。textarea控件可以創建多行文本輸入框，語法：
<textarea cols="每行中顯示的字符數" rows="顯示的行數">
文本信息
</textarea>
<select>
<option>選項1</option>
<option selected>選項2</option>
<option>選項3</option>
...
</select>
關于表單的第一節課，我們講過表單由三部分組成：表單控件（input控件，select、textarea、button）、提示信息、表單域。
在HTML中，form標簽用于定義表單域，即創建一個表單，用來收集和傳遞用戶的輸入信息，指定提交到的服務器，以及提交方式。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
