6-1 使用表單標簽，與用戶交互 - 使用<form>創建表單
網站怎樣與用戶進行交互？答案是使用HTML表單(form)。
表單是可以把瀏覽者輸入的數據傳送到服務器耑，這樣服務器耑程序就可以處理表單傳過來的數據。
語法：<form method="傳送方式" action="服務器文档">
1.<form> ：<form>標簽是成對出現的，以<form>開始，以</form>結束。
2.action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
3.method ：數據傳送的方式（get/post）。
<form method="post" action="save.php"> <label for="username">用戶名:</label> <input type="text" name="username" /> <label for="pass">密碼:</label> <input type="password" name="pass" /> </form>
注意:
1、所有表單控件（文本框、文本域、按鈕、單選框、複選框等）都必須放在 <form></form> 標簽之間
（否則用戶輸入的信息提交不到服務器上！）。
2、method : post/get 的區別這一部分内容屬於後耑程序員考慮的問題。
6-2 文本輸入框、密碼輸入框
當用戶要在表單中鍵入字母、數字等内容時，就會用到文本輸入框。文本框也可以轉化爲密碼輸入框。
語法：
<form> <input type="text/password" name="名稱" value="文本" /> </form>
1、type：
當type="text"時，輸入框爲文本輸入框;
當type="password"時, 輸入框爲密碼輸入框。
2、name：爲文本框命名，以備後台程序ASP、PHP使用。
3、value：爲文本輸入框設置默認值。(一般起到提示作用)
舉例：
<form> 姓名： <input type="text" name="myName"> <br/> 密碼： <input type="password" name="pass"> </form>
在瀏覽器中顯示的結果：
6-3 placeholder屬性的使用
input標簽中佔位符placeholder,屬性，有時候需要提示用戶輸入框需要輸入框的内容，那麽就會用到我們的佔位符，比如下面的效果：
想要實現這樣的效果,我們只需要輸入以下代碼：
技術點的解釋：
1、placeholder屬性爲輸入框佔位符,裡面可以放提示的輸入信息。
2、placeholder屬性的值可以任意填寫,當輸入框輸入内容時,佔位符内容消失,輸入框無内容時,佔位符内容顯示。
3、佔位符内容不是輸入框真正的内容。
6-4 數字輸入框
input標簽中的數字框number類型：
技術點的解釋：
1、input的type屬性設置爲number,則表示該輸入框的類型爲數字。
2、數字框只能輸入數字，輸入其他字符無效。
3、數字框最右側會有一個加減符號,可以調整輸入數字的大小,不同瀏覽器表現不一致。
6-5 網址輸入框
input標簽中的網址框url類型：
技術點的解釋：
1、input的type屬性設置爲url,則表示該輸入框的類型爲網址。
2、數字框的值需以http://或者https://開頭,且後面必須有内容,否則表單提交的時候會報錯誤提示。
6-6 郵箱輸入框
input標簽中的郵箱框email類型：
我們要實現一個郵箱輸入框，可以輸入以下代碼：
技術點的解釋：
1、Input的type屬性設置爲email,則表示該輸入框的類型爲郵箱。
2、數字框的值必須包含@。
3、數字框的值@之後必須有内容,否則會報錯誤提示。
6-7 使用<textarea>標簽創建文本域
當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。
語法：
<textarea rows="行數" cols="列數">文本</textarea>
1、<textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。
2、cols ：多行輸入域的列數。
3、rows ：多行輸入域的行數。
4、在<textarea></textarea>標簽之間可以輸入默認值。
舉例：
<form method="post" action="save.php"> <label>聯繫我們</label> <textarea cols="50" rows="10" >在這裡輸入内容...</textarea> </form>
在瀏覽器中顯示結果：
注意這兩個屬性可用css樣式的width和height來代替：col用width、row用height來代替。
6-8 使用label爲input標簽穿上衣服
學習表單各種控件的時候，標簽--label，揭曉它的作用。
label標簽不會向用戶呈現任何特殊效果，它的作用是爲滑鼠用戶改進了可用性。
如果你在 label 標簽内點擊文本，就會觸發此控件。
即當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。
語法：<label for="控件id名稱">
注意：標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。
例子：
<form <label for="email">輸入你的郵箱地址</label> <input type="email" id="email" placeholder="Enter email"> </form>
6-9 單選框、複選框，讓用戶選擇
在使用表單設計調查表時，爲了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和複選框，兩者的區別是單選框中的選項用戶只能選擇一項，而複選框中用戶可以任意選擇多項，甚至全選。
語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當 type="radio" 時，控件爲單選框
當 type="checkbox" 時，控件爲複選框
2、value：提交數據到服務器的值（後台程序PHP使用）
3、name：爲控件命名，以備後台程序 ASP、PHP 使用
4、checked：當設置 checked="checked" 時，該選項被默認選中
如下面代碼：
在瀏覽器中顯示的結果：
注意:同一組的單選按鈕，name取值一定要一致，比如上面例子爲同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。
6-10 使用select、option標簽創建下拉菜單
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下代碼：
1、select和option標簽都是雙標簽，它總是成對出現的，需要首標簽和尾標簽。
2、select標簽裡面只能放option標簽，表示下拉列表的選項。
3、option標簽放選項内容，不放置其他標簽。
4、value：
5、selected="selected"：
設置selected="selected"屬性，則該選項就被默認選中。
在瀏覽器中顯示的結果：
6-11 提交按鈕
在表單中有兩種按鈕可以使用，分別爲：提交按鈕、重置。
當用戶需要提交表單信息到服務器時，需要用到提交按鈕。
語法：
<input type="submit" value="提交" />
type：只有當type值設置爲submit時，按鈕才有提交作用
value：按鈕上顯示的文字
舉例：
在瀏覽器中顯示的結果：
6-12 使用重置按鈕，重置表單信息
當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”後，發現書寫有誤，可以使用重置按鈕使輸入框恢複到初始狀態。只需要把type設置爲"reset"就可以。
語法：
<input type="reset" value="重置" />
type：只有當type值設置爲reset時，按鈕才有重置作用
value：按鈕上顯示的文字
舉例：
在瀏覽器中顯示的結果：
輸入賬號
單擊重置按鈕
