單選框和複選框
阿新 • • 發佈：2022-01-17
需要注意的是：複選框是隻有2種狀態的表單控制元件：已選中或未選中。在只有一個複選框的情況下，它允許使用者對某事說“是”或“否”，比如同意或不同意某個條款。而只有一個單選框的情況下，使用者一旦選擇了這個單選框，就不能再取消選擇了，除非他重新整理了網頁~
單選框：
<label> <input type="radio" name="gender" value="male" />男 </label> <label> <input type="radio" name="gender" value="female" />女 </label>
另一種寫法：
<input id="male" type="radio" name="gender" value="male" /> <label for="male">男</label> <inputid="female" type="radio" name="gender" value="female" /> <label for="female">女</label>
複選框：
<label> <input type="checkbox" name="interest" value="coding" />程式設計 </label> <label> <input type="checkbox" name="interest" value="other" />其他 </label>
需要注意的是：複選框是隻有2種狀態的表單控制元件：已選中或未選中。在只有一個複選框的情況下，它允許使用者對某事說“是”或“否”，比如同意或不同意某個條款。而只有一個單選框的情況下，使用者一旦選擇了這個單選框，就不能再取消選擇了，除非他重新整理了網頁~
例1：單選框：你喜歡旅遊嗎？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form action="https://www.youkeda.com/"> <p>你喜歡旅遊嗎？</p> <input type="radio" name="travel" value="agree" id="agree" /> <label for="agree">喜歡</label> <input type="radio" name="travel" value="neutral" id="neutral" /> <label for="neutral">無所謂</label> <input type="radio" name="travel" value="disagree" id="disagree" /> <label for="disagree">不喜歡</label> </form> </body> </html>
例2：
下面是一道單選題的四個選項，請把這四個選項用單選框寫出來，要求：用label標籤的for屬性和input的id屬性對應的方式，實現點選文字也能選中對應的選項的功能。
A、form 標籤是塊狀標籤
B、form 標籤內可以寫輸入框之類的表單控制元件
C、form 標籤可巢狀在 form 標籤內
D、表單中的內容可以被提交到 action 屬性定義的地址去<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>程式設計題</title> </head> <body> <form action="https://www.youkeda.com/"> <input type="radio" name="form" value="A" id="form-a" /> <label for="form-a">A、form標籤是塊狀標籤</label> <input type="radio" name="form" value="B" id="form-b" /> <label for="form-b">B、form標籤內可以寫輸入框之類的表單控制元件</label> <input type="radio" name="form" value="C" id="form-c" /> <label for="form-c">C、form標籤可巢狀在form標籤內</label> <input type="radio" name="form" value="D" id="form-d" /> <label for="form-d">D、表單中的內容可以被提交到action屬性定義的地址去</label> </form> </body> </html>
有時我們在註冊賬號的時候需要勾選一些條款：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>程式設計題</title> </head> <body> <form action="https://www.youkeda.com/"> <label><input type="checkbox" name="slect" value="select" />我已閱讀並同意相關服務條款和隱私政策</label> </form> </body> </html>