HTML&CSS基礎學習筆記1.24-input標籤的單選與多選
阿新 • • 發佈:2019-01-25
單選和多選
單選框和多選框是用<input>標籤來實現的。
<input>標籤的type屬性值為"checkbox"時,表示多選框,為"radio"時表示單選框。
一個多選列表一般具有2個或兩個以上的多選框,它們都具有屬性name,且屬性name值相同,當這些多選框具有屬性checked時,表示選中,沒有checked屬性表示未選中。在一個多選列表內,可以有複數個多選框具有checked屬性。
一個單選列表一般具有2個或兩個以上的單選框,它們都具有屬性name,且屬性name值相同,當這些單選框具有屬性checked時,表示選中,沒有checked屬性表示未選中。在一個單選列表內,只能有一個單選框具有checked屬性。觀察下面程式碼和效果頁面,理解單選框和多選框的使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="index.css"> <title>表單</title> </head> <body> <form action="/" method="get"> <h2>input標籤 -- 單選和多選</h2> <p>性別: <input type="radio" name="sex" id="male"/><label for="male">男</label> <input type="radio" name="sex" id="female"/><label for="female">女</label></p> <p>專長: <input type="checkbox" name="skills" id="html"/><label for="html">HTML</label> <input type="checkbox" name="skills" id="css"/><label for="css">CSS</label> <input type="checkbox" name="skills" id="js"/><label for="js">JS</label> </p> </form> </body>
更多學習內容,就在碼芽網http://www.mayacoder.com/lesson/index