如何在HTML表單中使用複選框按鈕？

使用HTML表單，我們可以輕鬆獲取使用者輸入。<form>標籤用於透過新增表單元素來獲取使用者輸入。不同型別的表單元素包括文字輸入、單選按鈕輸入、提交按鈕、文字欄位區域等。

在HTML表單中使用單選按鈕來獲取使用者輸入。當需要選擇多個選項時，使用複選框。它們也使用HTML <input>標籤建立，並將type屬性設定為radio。

序號 屬性及描述
1

type

指示輸入控制元件的型別，對於複選框輸入控制元件，它將設定為radio。
2

name

用於為控制元件命名，該名稱將傳送到伺服器以識別並獲取值。
3

value

如果選中複選框，則使用此值。
4

checked

如果要預設選中，則設定為checked。

語法

以下是建立HTML單選按鈕的語法。

<form>
   <input type="radio" name="name… " value=" ">Male
</form>

示例1

讓我們看看如何在下面的示例中在HTML表單中使用複選框按鈕：

<!DOCTYPE html>
<html>
<body>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<p>Branch</p>
<form>
   <input type="checkbox" id="CSE" name="Branch" value="CSE" >
   <label for="CSE">CSE</label>
   <input type="checkbox" name="Branch" value="IT" >
   <label for="CSE">IT</label>
   <input type="checkbox" name="Branch" value="ECE">
   <label for="CSE">ECE</label>
   <input type="checkbox" name="Branch" value="EEE">EEE
   <input type="checkbox" name="Branch" value="ivil">Civil
   <input type="checkbox" name="Branch" value="Mech">Mech
</form>
</body>
</html>

示例2

另一個在HTML表單中使用複選框的示例如下：

<!DOCTYPE html>
<html>
<body>
<head>
   <title>HTML Checkbox Button</title>
</head>
<p>Which languages you work on:</p>
<form>
   <input type="checkbox" name="language1" value="java">Java
   <br>
   <input type="checkbox" name="language2" value="php">PHP
   <br>
   <input type="checkbox" name="language3" value="cpp">C++
   <br>
</form>
</body>
</html>

示例3

如果要預設選中任何選項，則設定為checked。我們使用checked屬性值true來預設選中一個選項。下面是一個使選項預設選中的示例。

<!DOCTYPE html>
<html>
<body>
<head>
   <meta charset="UTF-8">
   <meta name="description" content="meta tag in the web document">
   <meta name="keywords" content="HTML,CSS">
   <meta name="author" content="lokesh">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<p>Branch</p>
<form>
   <input type="checkbox" id="CSE" name="Branch" value="CSE" checked="true" >
   <label for="CSE">CSE</label>
   <input type="checkbox" name="Branch" value="IT" >
   <label for="CSE">IT</label>
   <input type="checkbox" name="Branch" value="ECE">
   <label for="CSE">ECE</label>
   <input type="checkbox" name="Branch" value="EEE" checked="true" >EEE
   <input type="checkbox" name="Branch" value="ivil">Civil
   <input type="checkbox" name="Branch" value="Mech">Mech
</form>
</body>
</html>

更新於：2022年10月19日

2K+ 瀏覽量

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告