HTML&CSS基礎學習筆記1.24-input標籤的單選與多選

單選和多選

單選框和多選框是用<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


 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章