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

启动您的职业生涯

完成课程获得认证

开始学习
广告