使用表單標籤 與使用者互動
網站怎樣與使用者互動？答案是使用HTML中的表單(form), 表單可以把瀏覽者輸入的資料傳送到伺服器端，這樣伺服器端就可以處理表單傳送的資料。
語法： <form method = "傳送方式" action = "伺服器檔案">
講解：1.<form>是成對出現的， 以<form> 開始， 以 </form>結束,表單都必須放在其之間。
2.method 傳送方式， get/post 是後端程式設計師考慮的問題
3.action 瀏覽者輸入的資料被傳送到的地方，比如一個php頁面， (save.php)
<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>
文字輸入框，密碼輸入框
當用戶需要在表單中鍵入字母，資料等，就要用到文字輸入框，文字輸入框也可以轉化為密碼輸入框
語法：
<form>
<input type = "text/password" name = "名稱" value = "文字" />
</form>講解：1.type ：
當 type 為 text時，為文字輸入框
當 type 為 password 時， 為密碼輸入框
2.name ：為文字框命名，以備後臺asp php使用
3.value ：為文字輸入框設定預設值（一般起提示作用）
結果：<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>文字輸入框、密碼輸入框</title> </head> <body> <form method="post" action="save.php"> 賬戶: <input type = "text" name = "myName" /> <br /> 密碼： <input type = "password " name = "pass"/> </form> </body> </html>
賬戶:
密碼:
文字域：支援多行文字輸入
當用戶需要在表單中輸入大段文字時，就要用到文字輸入域
語法：
<textarea rows = "行數" cols = "列數" > 文字 </textarea>講解：1.文字輸入域以 <textarea>開始 ，以 </textarea>結束
2.rows： 輸入文字輸入域的行數
3.cols ： 輸入文字輸入域的列數
4.在<textarea></textarea>標籤之間輸入預設值
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>文字域</title> </head> <body> <form method = "post" action = "save.php"> <label>個人簡介</label> <textarea rows = "5" cols = "10">在這裡輸入內容...</textarea></span> <input type = "submit" value = "確定" name = "submit" /> <input type = "reset" value = "重置" name = "reset" /> </form> </body> </html>
結果：
<lable>在後面會有詳解。
使用單選框，複選框讓使用者選擇
在使用表單設計調查表時，為了減少使用者的操作，使用選擇框是一個好辦法，在HTML中，有單選框和複選框，兩者的主要區別是 單選框中使用者的選項只能選擇一項，而複選框中使用者可以任意選擇多項，甚至全選。
<input type = "radio/checkbox" value = "值" name = "名稱" checked = "checked" />1. type : radio :控制元件單選框
checkbox : 控制元件複選框
2. value: 提供資料到伺服器的值
3. name：為控制元件命名，以備後臺程式ASP，PHP使用
4.checked： 當設定 checked = “checked”時，該選項被預設選中。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>單選框、複選框</title>
</head>
<body>
<form name = "iForm" method = "post" action = "save.php">
你是否喜歡旅遊？<br />
<input type = "radio" name = "radioLove" value = "喜歡" checked = "checked"/></span>
<input type = "radio" name = "radioLove" value = "不喜歡"/>
<input type = "radio" name = "radioLove" value = "無所謂"/>
<br /> <br />
你對那些運動感興趣？<br />
<input type = "checkbox" name = "checkbox1" value = "跑步"/>
<input type = "checkbox" name = "checkbox1" value = "打球" checked = "checked"/>
<input type = "checkbox" name = "checkbox1" value = "登山" checked = "checked"/>
<input type = "checkbox" name = "checkbox1" value = "健身" />
</form>
</body>
</html>
結果：
你是否喜歡旅遊？
你對那些運動感興趣？
注意：同一組的單選按鈕，name的取值一定要一致，這樣同一組的單選按鈕才可以起到單選的作用。
下拉列表框
使用下拉列表框，節省空間，既可以單選，又可以多選。
單選：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉頁表框</title>
</head>
<body>
<form name = "iForm" method = "post" action = "save.php">
<label>愛好:</label>
<select>
<option value = "讀書">讀書</option></span>
<option value = "運動">運動</option>
<option value = "音樂">音樂</option>
<option value = "旅遊">旅遊</option>
<option value = "購物">購物</option>
<span style="color:#ff0000;"></select></span>
</form>
</body>
</html>
<option value = "提交值" > 選項</option>
提交值：是向伺服器提交的值
選項：是顯示的值
設定 selected = "selected" 則該選項預設被選中。
多選：
就將上面的<select> 改為 <select multiple = "multiple" >就行，然後在widows下ctrl ,同時單擊，在Mac 下 Command + 單擊
使用提交按鈕，提交資料
在表單中有兩種按鈕可以使用，提交按鈕和重置，當用戶需要提交資訊到伺服器時，需要用到提交按鈕。
語法：
<input type = "submit" value = "提交">
講解：
1.只有當type = "sumit"時，按鈕才有提交的作用
2.value： 按鈕上顯示的字
重置
當用戶需要重置表單資訊到初始狀態時，可以使用重置按鈕，只要把type 改為 reset 就行。
<input type = "reset" value = "重置">
講解：
1.同理提交按鈕，只有當type = "reset"時， 按鈕才有重置的作用
2.value : 按鈕上顯示的文字
label標籤
label標籤不會向用戶呈現任何特殊的效果，它的作用是為滑鼠使用者改進了可用性，如果你在label標籤內點選文字，就會觸發此控制元件，也就是說，當用戶單擊選中該label標籤時，瀏覽器會自動將焦點轉到和 標籤相關的表單控制元件上(就自動選中和該label標籤相關聯的表單控制元件上);
語法：
<label for = "控制元件id 的名稱" >
注意：標籤中for 屬性的值應該與相關控制元件的id屬性值一定要相同；
<form>
<label for="male">男</label>
<input type="radio" name="gender" <span style="color:#ff0000;">id="male"</span> />
<br />
<label for="female">女</label>
<input type="radio" name="gender" <span style="color:#990000;">id="female"</span> />
<label for="email">輸入你的郵箱地址</label>
<input type="email" <span style="color:#ff6666;">id="email"</span> placeholder="Enter email">
</form>結果：
以下是自己仿寫的，可複選的：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form中的lable標籤</title>
</head>
<body>
<form>
你對什麼運動感興趣：<br/>
<label for = "sport1">慢跑</label>
<input type = "checkbox" name = "sports" id = "sport1"/>
<br />
<label for = "sport2">登山</label>
<input type = "checkbox" name = "sports" id = "sport2"/>
<br />
<label for = "sport3">籃球</label>
<input type = "checkbox" name = "sports" id = "sport3"/> <br />
</form>
</body>
</html>
你對什麼運動感興趣：