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

時間 2019-11-24

標籤 html&css html css 基礎學習筆記 1.23 input 標籤單選欄目 CSS 简体版

原文原文鏈接

單選和多選css

單選框和多選框是用<input>標籤來實現的。html

<input>標籤的type屬性值爲"checkbox"時，表示多選框，爲"radio"時表示單選框。less

一個多選列表通常具備2個或兩個以上的多選框,它們都具備屬性name，且屬性name值相同，當這些多選框具備屬性checked時，表示選中，沒有checked屬性表示未選中。在一個多選列表內，能夠有複數個多選框具備checked屬性。學習

一個單選列表通常具備2個或兩個以上的單選框，它們都具備屬性name，且屬性name值相同，當這些單選框具備屬性checked時，表示選中，沒有checked屬性表示未選中。在一個單選列表內，只能有一個單選框具備checked屬性。code

觀察下面代碼和效果頁面，理解單選框和多選框的使用。orm

<!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/indexhtm