1.id、name的關系
通常我們在寫HTML代碼時，會給控件指定一個id屬性，這個屬性只供JS和CSS使用，在表單提交時，它不起任何作用;
在HTML代碼中我們會指定不同的value為各個不同的控件做默認值，那么為那些控件指定相應的id屬性將會方便地找到它們;
name屬性的值是作為和服務器通信時使用的 key;
如果不需要用JS和CSS控制的控件，或許它們只是用來顯示一些數據(只讀)，那么就沒有必要指定id屬性，name屬性也可以不用給出(避免提交無意義的數據)。
2.<form> </form> 標簽：創建HTML表單
3.get,post ：表單提交方式
說明：
form用於為用戶輸入創建HTML表單
表單能夠包含 input 元素，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。
表單用於向服務器傳輸數據。
屬性：
action [URL]: 規定當提交表單時向何處發送表單數據。
method [get/post]: 規定用於發送 form-data 的 HTTP 方法。
get: from表單里所填的值，附加在action指定的URL后面，做為URL鏈接而傳遞。
post:from表單里所填的值，附加在HTML Headers上。
enctype [string]:規定在發送表單數據之前如何對其進行編碼。
enctype 屬性可能的值：
-
- application/x-www-form-urlencoded ：在發送前編碼所有字符（默認方式）（空格轉換為 "+" 加號，特殊符號轉換為 ASCII HEX 值）。
- multipart/form-data ：不對字符編碼，包含文件上傳控件的表單時，必須使用該值
- text/plain ：空格轉換為 "+" 加號，但不對特殊字符編碼。
title：設置網站訪問者的鼠標放在表單上的任意位置停留時，瀏覽器用小浮標顯示的文本。
name:表單的名稱。注意和id屬性的區別：name屬性是和服務器通信時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的。
表單元素
1.文本框
<html> <head> <meta charset='utf-8' /> <title>表單</title> </head> <body> <form action="https://www.sougou.com.web/" method="post" enctype="multipart/form-data"> <label for="username">用戶名：</label> <input type="text" id="username" name="username" value="用戶名"/><br/> <label for="passwd">密碼：</label> <input type="password" id="passwd" name="passwd"/> </form> </body> </html>
label:
<label> 標簽為 input 元素定義標注（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。
文本框屬性：
type 屬性取值:
text -- 文字輸入域(輸入型)
password -- 也是文字輸入域,但是輸入的文字以密碼符號'*'顯示(輸入型)
file -- 可以輸入一個文件路徑(輸入型)
checkbox -- 復選框.可以選擇零個或多個(選擇型)
radio -- 單選框.只可以選擇一個而且必須選擇一個(選擇型)
hidden -- 代表隱藏域,可以傳送一些隱藏的信息到服務器
button -- 按鈕(點擊型)
image -- 使用圖片來顯示按鈕,使用src屬性指定圖像的位置(就像img標簽的src屬性)(點擊型)
submit -- 提交按鈕,表單填寫完畢可以提交,把信息傳送到服務器.可以使用value屬性來顯示按鈕上的文字(點擊型)
reset -- 重置按鈕,可以把表單中的信息清空(點擊型)
name:向服務器提交表單時的 key 值
size：指定文本框的寬度，以字符個數為單位；在大多數瀏覽器中，文本框的缺省寬度是20個字符。
value：指定文本框的默認值，是在瀏覽器第一次顯示表單或者用戶單擊按鈕之后在文本框中顯示的值。
maxlength：指定用戶輸入的最大字符長度。
readonly：只讀屬性，當設置readonly屬性后，文本框可以獲得焦點，但用戶不能改變文本框中的value。
disabled：禁用，當文本框被禁用時，不能獲得焦點，當然，用戶也不能改變文本框的值。並且在提交表單時，瀏覽器不會將該文本框的值發送給服務器。
2.單選按鈕
<form action="https://www.sougou.com.web/" method="post" enctype="multipart/form-data"> <label for="male">男</label> <input type="radio" id="male" name="gender"/> <label for="felmale">女</label> <input type="radio" id="felmale" name="gender"/> </form>
兩個單選按鈕的name屬性必須相同才能關聯起來
3.復選框
<form> <label for="b">籃球</label> <input type="checkbox" name="sport" id="b"/> <label for="f">足球</label> <input type="checkbox" name="sport" id="f"/> <label for="c">棒球</label> <input type="checkbox" name="sport" id="c"/> <label for="d">兵乓球</label> <input type="checkbox" name="sport" id="d"/> </form>
4. 文件上傳
使用file，則form的enctype必須設置為multipart/form-data，method屬性為POST。
<form action="127.0.0.1" method="post" enctype="multipart/form-data"> <p>要上傳的文件１<input type="file" name="file"/></p> <p><input type="submit" value="提交" /></p> </form>
5. 下拉框
<select> 下拉選標簽屬性：
name:表單提交項的鍵.
size：選項個數
multiple：multiple
<option> 下拉選中的每一項 屬性：value:表單提交項的值. selected: selected下拉選默認被選中
<optgroup>為每一項加上分組
<form action="127.0.0.1" enctype="multipart/form-data" method="post" id="fname"> </form> <select name="carlist" form="fname"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </body>
select 寫在表單之外，但仍屬於表單的一部分（select的form屬性，form的id屬性）
<form action="127.0.0.1" enctype="multipart/form-data" method="post"> <select name="carlist"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </body> </form>
<form action="127.0.0.1" enctype="multipart/form-data" method="post"> <select name="carlist"> <optgroup label="car"></optgroup> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <optgroup label="fruit"></optgroup> <option value="orange">Orange</option> <option value="apple">Apple</option> </select> </body>
6.文本域
定義和用法
<textarea> 標簽定義多行的文本輸入控件。
文本區中可容納無限數量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）。
可以通過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。
注釋：在文本輸入區內的文本行間，用 "%OD%OA" （回車/換行）進行分隔。
<form action="127.0.0.1" enctype="multipart/form-data" method="post"> <textarea cols="20" rows="10" name="textarea">寫點啥呢</textarea> </form>
7.提交，重置
<form action="127.0.0.1" enctype="multipart/form-data" method="post"> <input type="submit" value="登陸"> <input type="reset" value="重置"> </form>