如何在 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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告