1. 程式人生 > >HTML&CSS基礎學習筆記1.24-input標籤的單選與多選

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