表單
HTML 表單用於搜集不同類型的用戶輸入。
㈠Form標簽
⑴form標簽簡介
在HTML中，如果創建一個表單，就把各種表單標簽放在<form></form>標簽內部。我們常說的表單，指的是文本框，按鈕，下拉列表等的統稱。
form一共有五個重要屬性，分別是name，action，method，enctype和target屬性。
語法：<form>表單各種標簽</form>
⑵表單名稱name屬性
一個頁面中，你的表單可能不止一個，為了區分這些表單，使用name屬性來給表單進行命名。這樣也是防止在表單提交之后，在后台程序中出現混亂。
語法：<form name="表單名稱">......</form>
表單名稱中不能包含特殊字符和空格。
⑶提交表單action屬性
在form標簽中，action屬性用於指定表單數據提交到哪個地址進行處理。
語法：<form action="表單的處理程序">......</form>
表單的處理程序是表單要提交的地址，這個程序地址用來處理從表單搜集的信息。這個地址可以是相對地址，絕對地址，也可以是一些其他形式的地址。
⑷傳送方法method屬性
①在form標簽中，methon屬性的作用是告訴瀏覽器，指定將表單中的數據使用哪一種HTP提交方法，取值為get或post。
②methon屬性取值：
屬性值 說明
get 默認值，表單數據被傳送到action屬性指定的URL，然后這個新的URL被送到處理程序上
post 表單數據被包含在表單主體中，然后被傳送到處理程序上
③這兩種方式的區別在於，get在安全性上較差，所有的表單域的值都直接顯示出來了。而post除了可見的腳本處理程序之外，其他信息都可以隱藏。所以在實際開發中，通常選擇post處理方式。
④語法：<form method="傳送方法">......</form>
⑸目標顯示方式target屬性
①在form標簽中，target屬性是用來指定目標窗口的打開方式。
②target屬性取值
屬性值 說明
_self 默認值，表示在當前的窗口打開頁面
_blank 表示在新的窗口打開頁面
_parent 表示在父級窗口打開頁面
_top 表示頁面載入到包含該鏈接的窗口，取代當前在窗口中的所有頁面
③語法：<form target="目標顯示方式">......</form>
⑹編碼方式enctype
①在form標簽中，enctype屬性用於設置表單信息提交的編碼方式。
② 屬性值 說明
application/x-www-form-urlencoded 默認的編碼方式
multipart/form-data MIME編碼，對於“上傳文件”這種表單必須選擇該值
㈡表單對象
①所謂表單對象，簡單來說，就是放在<form></form>標簽內部的各種標簽。表單對象有四種：input，textarea，select和option。
②要記住表單標簽只有四個：<input>,<textarea>,<select>,<option>。其中<select>和<option>是配合使用的。
㈢input 標簽
①input標簽是自閉合標簽，接下來介紹用到input標簽，在不同type屬性值的不同。
②語法：<input type="表單類型" />
⑴單行文本框 text
①文本框text共有以下幾個重要的屬性：
屬性 說明
value 定義文本框的默認值，也就是文本框內的文字
size 定義文本框的長度，以字符為單位
maxlength 設置文本框中最多可以輸入的字符數
②對於元素屬性的設置，是沒有先后順序的。input還有一個name屬性，不過一般情況下都使用ID屬性，很少使用name屬性。
③語法：<input type="text" value="默認文字" size="文本框長度" maxlength="最多輸入字符數" />
⑵密碼文本框 password
①密碼文本框在外觀上跟單行文本框相似，也擁有相同的屬性。兩者不同的是：單行文本框輸入的字符可見，而密碼文本框輸入的字符不可見。密碼文本框這個設置主要是防止用戶周圍的人看到用戶輸入密碼。
②語法：<input type="password" value="默認文字" size="文本框長度" maxlength="最多輸入字符數" />
⑶單選按鈕 radio
①在HTML中，單選按鈕radio只能從選項列表中選擇一項，選項與選項之間是互斥的。
②語法：<input type="radio" name="單選按鈕所在的組名" value="單選按鈕的取值" />
③name和value是單選按鈕必要的兩個屬性，必須要設置。value屬性示為了方便向服務器端傳遞數據。
④單選按鈕的忽略點：先看下面的代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>單選按鈕</title> 6 </head> 7 <body> 8 <form name="myForm" method="post" action="index.html"> 9 性別： 10 <input type="radio" name="question1" value="boy" />男 11 <input type="radio" name="question2" value="girl" />女 12 </form> 13 </body> 14 </html>
效果圖：
⑤我們把第二個單選按鈕的name屬性值改為“question2”,第一個單選按鈕的屬性值不變，為“question1”。你會看到，對於同一個問題，選兩個選項居然可以被同時選中了！
所以，對於同一個問題的不同選項，必須設置一個相同的name屬性值，這樣才能把這些選項歸為同一個問題。
⑷復選框 CheckBox
①語法：<input type="checkbox" value="復選框取值" checked="checked" />
②復選框可以從選項列表中選擇一項或者多項。Checked屬性表示該選項在默認情況下已經被選中。復選框不需要設置選項列表的name，因為復選框是可以多選的。
③HTML中的復選框是沒有文本的，需要加入label標簽，並且用label標簽的for屬性指向復選框的ID。
④示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>復選框</title> 6 </head> 7 <body> 8 <form name="form1" method="post" action="index.html">你喜歡的水果：<br /> 9 <input id="checkbox1" type="checkbox" checked="checked" /><label for="checkbox1">蘋果</label><br /> 10 <input id="checkbox2" type="checkbox" checked="checked" /><label for="checkbox2">香蕉</label><br /> 11 <input id="checkbox3" type="checkbox" checked="checked" /><label for="checkbox3">西瓜</label><br /> 12 <input id="checkbox4" type="checkbox" checked="checked" /><label for="checkbox4">提子</label> 13 </form> 14 </body> 15 </html>
效果圖：
⑸表單按鈕
①普通按鈕 button
在HTML中，普通按鈕一般情況下要配合JavaScript腳本來進行表單的實現。
語法：<input type="button" value="普通按鈕的取值" onclick="javascript腳本程序" />
value的取值就是顯示在按鈕上的文字，onclick是普通按鈕的事件。
②提交按鈕 submit
提交按鈕可以看成是一種具有特殊功能的普通按鈕，單擊提交按鈕可以實現將表單內容提交給服務器處理。
語法：<input type="submit" value="提交按鈕的取值" />
③重置按鈕 reset
重置按鈕也可以看成是一種具有特殊功能的普通按鈕，單擊重置按鈕可以清除用戶在頁面表單中輸入的信息。
語法：<input type="reset" value="提交按鈕的取值" />
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>重置按鈕</title> 6 </head> 7 <body> 8 <form name="form1" method="post" action="index.html"> 9 賬號：<input type="text" /><br /> 10 密碼：<input type="password" /><br /> 11 <input type="submit" value="提交" /> 12 <input type="reset" value="重置" /> 13 </form> 14 </body> 15 </html>
效果圖：
注意：重置按鈕只能清除“當前所在form標簽”內的表單元素內容，對當前所在form標簽之外的表單元素內容清除無效。
⑹圖片域 image
①語法：<input type="image" src="圖片路徑" />
②圖片域既有按鈕的特點，也擁有圖像的特點，因此需要設置圖片的路徑。
⑺隱藏域 hidden
①有時候我們想要從前台頁面向后端服務器傳送一些數據，但是又不想讓用戶看見。這個時候可以通過一個隱藏域來傳送數據。隱藏域包含那些要提交處理的數據，但這些數據並不顯示在瀏覽器中。
②語法：<input type="hidden" />
⑻文件域 file
①在HTML中，文件上傳使用input標簽。但我們在使用文件域file時，必須在form的標簽中說明編碼方式 enctype="multipart/form-data"。只有這樣服務器才能接收到正確的信息。
②語法：<input type="file" />
㈣多行文本框 textarea
①語法：<texearea rows="行數" col="列數">多行文本框內容</textarea>
②在該語法中，想要對多行文本框設置默認內容，可以在標簽內部添加。對於多行文本框的默認文字內容，你可以選擇設置與否。
③示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>多行文本框 </title> 6 </head> 7 <body> 8 <form name="form1" method="post" action="index.html"> 9 個人簡介：<br /> 10 <textarea rows="8" cols="40">請介紹一下自己</textarea> 11 </form> 12 </body> 13 </html>
效果圖：
㈤下拉列表 select
①下拉列表由select和option這兩個標簽配合使用。下拉列表是一種最節省頁面空間的選擇方式。因為在正常狀態下只顯示一個選項，單擊下拉菜單打開菜單后才會看到全部的選項。
②語法：<select>
<option>選項顯示的內容</option>
......
<option>選項顯示的內容</option>
</select>
⑴select標簽屬性
☆multiple屬性：可選屬性，只有一個屬性值“multiple”。默認情況下下拉列表只能選擇一項，當設置multiple="multiple"時，下拉列表可以選擇多項。
語法： <select multiple="multiple">
<option>選項顯示的內容</option>
......
<option>選項顯示的內容</option>
</select>
想要選取多項，使用"Ctrl+鼠標左鍵"即可。
☆size屬性：用來定義下拉列表展開之后可見選項的數目。
語法：<select multiple="multiple" size="可見列表項的數目">
<option>選項顯示的內容</option>
......
<option>選項顯示的內容</option>
</select>
⑵option標簽屬性
屬性 說明
value 選項值
select 是否選中
☆語法：<select multiple="multiple" size="可見列表項的數目">
<option value="選項值" selected="selected">選項顯示的內容</option>
......
<option value="選項值"> 選項顯示的內容 </option>
</select>
☆說明：這里為每個列表項添加value值，並且使用selected="selected"來設置某一個列表項默認情況下被選中。
value主要是用來給JavaScript調用，或者向服務器傳遞數據。
希望有所幫助！！！！！