資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 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="radio" name="Branch" value="CSE">CSE <input type="radio" name="Branch" value="IT">IT <input type="radio" name="Branch" value="ECE">ECE <input type="radio" name="Branch" value="EEE">EEE <input type="radio" name="Branch" value="ivil">Civil <input type="radio" name="Branch" value="Mech">Mech </form> </body> </html>
示例 2
您可以嘗試執行以下程式碼以學習如何在 HTML 中使用單選按鈕 -
<!DOCTYPE html> <html> <body> <head> <title>HTML Radio Button</title> </head> <p>Gender</p> <form> <input type="radio" name="gender" value="male">Male <br> <input type="radio" name="gender" value="female">Female </form> </body> </html>
示例 3
我們還將 <label> 標籤與 input 標籤一起使用。<label> 標籤定義了 HTML 中多個元素的標籤。
我們主要使用 label 來定義單選按鈕的值。
<!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="radio" id="CSE" name="Branch" value="CSE"> <label for="CSE">CSE</label> <input type="radio" name="Branch" value="IT"> <label for="CSE">IT</label> <input type="radio" name="Branch" value="ECE"> <label for="CSE">ECE</label> <input type="radio" name="Branch" value="EEE">EEE <input type="radio" name="Branch" value="ivil">Civil <input type="radio" name="Branch" value="Mech">Mech </form> </body> </html>
示例 4
如果要預設選擇任何選項，則設定為 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="radio" id="CSE" name="Branch" value="CSE" > <label for="CSE">CSE</label> <input type="radio" name="Branch" value="IT" checked="true"> <label for="CSE">IT</label> <input type="radio" name="Branch" value="ECE"> <label for="CSE">ECE</label> <input type="radio" name="Branch" value="EEE">EEE <input type="radio" name="Branch" value="ivil">Civil <input type="radio" name="Branch" value="Mech">Mech </form> </body> </html>
更新於: 2022年10月19日
6K+ 瀏覽量
廣告