首頁 > 開發者 > JavaScript
從零開始學習html（五）與瀏覽者互動，表單標籤——下，從零開始表單
六、使用下拉式清單方塊進行多選
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>使用下拉式清單方塊進行多選</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>愛好:</label>10 <select>11 <option value="看書">看書</option>12 <option value="旅遊">旅遊</option>13 <option value="運動">運動</option>14 <option value="購物">購物</option>15 </select>16 </form>17 </body>18 </html>使用下拉式清單方塊進行多選
下拉式清單也可以進行多選操作，在<select>標籤中設定multiple="multiple"屬性，就可以實現多選功能，
在 windows 作業系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。如下代碼：
在瀏覽器中顯示的結果：
試一試：讓“愛好”下拉式清單方塊具有多選功能
在編輯器中第10行補充代碼 multiple="multiple"。
你是否輸入像下面的代碼：
/*不知道這樣寫會不會被老闆打死*/
七、使用提交按鈕，提交資料1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>提交按鈕</title> 6 </head> 7 <body> 8 <form method="post" action="save.php"> 9 <label for="myName">姓名：</label>10 <input type="text" value=" " name="myName " />11 <input type="text" value="提交" name="submitBtn" />12 </form>13 </body>14 </html>使用提交按鈕，提交資料
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重設按鈕。
當使用者需要提交表單資訊到伺服器時，需要用到提交按鈕。
文法：
<input type="submit" value="提交">
type：只有當type值設定為submit時，按鈕才有提交作用
value：按鈕上顯示的文字
舉例：
在瀏覽器中顯示的結果：
試一試：把編輯器的輸入框改為按鈕
你是否輸入像下面的代碼：
八、使用重設按鈕，重設表單資訊1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>重設按鈕</title> 6 </head> 7 <body> 8 <form action="save.php" method="post" > 9 <label>愛好:</label>10 <select>11 <option value="看書">看書</option>12 <option value="旅遊" selected="selected">旅遊</option>13 <option value="運動">運動</option>14 <option value="購物">購物</option>15 </select>16 <input type="submit" value="確定" />17 <input type="submit" value="提交" />18 </form>19 </body>20 </html>使用重設按鈕，重設表單資訊
當使用者需要重設表單資訊到初始時的狀態時，比如使用者輸入“使用者名稱”後，發現書寫有誤，
可以使用重設按鈕使輸入框恢複到初始狀態。只需要把type設定為"reset"就可以。
文法：
<input type="reset" value="重設">
type：只有當type值設定為reset時，按鈕才有重設作用
value：按鈕上顯示的文字
舉例：
在瀏覽器中顯示的結果：
單擊重設按鈕
試一試：把“提交按鈕”改為“重設按鈕”
1、在編輯器中的第17行，把type="submit"改為type="reset"
2、在編輯器中的第17行，把value="提交"改為value="重設"
你是否輸入像下面的代碼：
九、form表單中的label標籤1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>form中的lable標籤</title> 6 </head> 7 8 <body> 9 <form>10 <label for="male">男</label>11 <input type="radio" name="gender" id="male" />12 <br />13 <label for="female">女</label>14 <input type="radio" name="gender" id="female" />15 <br />16 <label for="email">輸入你的郵箱地址</label>17 <input type="email" id="email" placeholder="Enter email">18 19 </form>20 21 </body>22 </html>form表單中的label標籤
label標籤不會向使用者呈現任何特殊效果，它的作用是為滑鼠使用者改進了可用性。
如果你在 label 標籤內點擊文本，就會觸發此控制項。就是說，當使用者單擊選中該label標籤時，
瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上（就自動選中和該label標籤相關連的表單控制項上）。
文法：
<label for="控制項id名稱">
注意：標籤的 for 屬性中的值應當與相關控制項的 id 屬性值一定要相同。
例子：
<form> <label for="male">男</label> <input type="radio" name="gender" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <label for="email">輸入你的郵箱地址</label> <input type="email" id="email" placeholder="Enter email"></form>
來試試：完成下面任務
要求：慢跑、登山和籃球複選框要與各自的複選項用for屬性關聯。如下：
參考代碼如下： 你對什麼運動感興趣：<br />
<label for="jog">慢跑</label> <input type="checkbox" name="jog" id="jog" /><br /> <label for="climb">登山</label> <input type="checkbox" name="climb" id="climb" /><br /> <label for="basketball">籃球</label> <input type="checkbox" name="basketball" id="basketball" />
不加label的話滑鼠一定要點擊小圓點才能啟用條目,加了label可以直接點擊對應的文字來啟用條目。
label的作用就是獲得焦點，在例子中，把滑鼠移動到文字上（男、女、輸入你的郵箱地址），同樣可以啟用控制項進行選擇，輸入。
但是如果不加label的話，滑鼠就必須移動到控制項上面。
name 可以重複，id不可以重複，在程式中，使用name定位值，不使用id 定位。如本例中name="gender",但是有id=male和id=“female”。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
