首頁 > 每日程式設計 > html知識 > HTML如何設定複選框、單選框以及預設選項? (圖文+影片)

HTML如何設定複選框、單選框以及預設選項? (圖文+影片)

藏色散人
發布: 2018-10-16 09:48:51
原創
16260 人瀏覽過

本篇文章主要介紹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如何設定複選框、單選框以及預設選項? (圖文+影片)

本篇文章就是關於HTML設定複選框以及單選框的相關知識介紹,淺顯易懂,希望對需要的朋友有所幫助!

想要了解更多前端相關知識,可以關注PHP中文網HTML影片教學CSS影片教學Bootstrap影片教學等等相關教程,歡迎大家參考學習!

以上是HTML如何設定複選框、單選框以及預設選項? (圖文+影片)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板