HTML如何設定複選框、單選框以及預設選項？（圖文+影片）-html知識-PHP中文網

HTML如何設定複選框、單選框以及預設選項？（圖文+影片）

藏色散人

發布： 2018-10-16 09:48:51

原創

16211 人瀏覽過

本篇文章主要介紹HTML怎麼設定複選框以及單選框的。

我們在網站開發過程中，有時會需要實現類似問卷的功能，那麼既然是問卷，就避免不了單選或多選的情況。對於新手朋友來說，或許不太清楚。

下面我們就透過簡單的程式碼範例，為大家介紹HTML設定複選框以及單選框的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML设置复选框、单选框</title>
</head>
<body>
<form name="from1" id="form1" action="upload.php">
    <label>性别：</label>
    <input type="radio" name="sex" value=&#39;male&#39;/><label>男</label>
    <input name="sex" checked type="radio" value="female"/><label>女</label>
    <input name="sex" type="radio" value="gay"/><label>同性恋</label>
    <br>
    <label>科目：</label>
    <input name=&#39;subject&#39; type="checkbox" value="Chinese"><label>语文</label>
    <input name=&#39;subject&#39; type="checkbox" checked value="Math" ><label>数学</label>
    <input name=&#39;subject&#39; type="checkbox" checked="checked" value="English"/><label>英语</label>
    <input name=&#39;subject&#39; type="checkbox" checked value="Sport"/><label>体育</label>

</form>
</body>
</html>

登入後複製

透過瀏覽器訪問，效果如下圖：

HTML如何設定複選框、單選框以及預設選項？（圖文+影片）

#這裡我們是直接刷新瀏覽器，可以發現儘管不選擇，單選框以及複選框都會有預設選項。

重要標籤及屬性詳解：

標籤規定使用者可輸入資料的輸入欄位。

根據不同的 type 屬性，輸入欄位有多種形態。輸入欄位可以是文字欄位、複選框、密碼欄位、單選按鈕、按鈕等等。

這裡我們使用「radio」屬性來設定單選框，「checkbox」來實現複選框及多選框。

checked 屬性規定在頁面載入時應該被預先選定的input 元素，簡單來說就是如果我們需要設定預設選項，只要在規定的輸入框中加入checked值就可以了。

注意：

當我們在單選框中，新增多個checked值即想要設定多個預設選項時，會以最後一個checked為準。

如上述程式碼中，我們將單選框新增兩個checked值

 <label>性别：</label>
    <input type="radio" name="sex" value=&#39;male&#39;/><label>男</label>
    <input name="sex" checked type="radio" value="female"/><label>女</label>
    <input name="sex"  checked type="radio" value="gay"/><label>同性恋</label>

登入後複製

效果如下圖：

HTML如何設定複選框、單選框以及預設選項？（圖文+影片）