单选按钮与复选框按钮

17 Mar 2025 | 5 分钟阅读

在本节中，我们将学习 HTML 中单选按钮和复选框按钮之间的区别。

在了解单选按钮和复选框的区别之前，我们应该分别了解单选按钮和复选框。之后，我们将查看 HTML 中单选按钮和复选框按钮的比较表。

单选按钮是什么意思？

单选按钮用于显示可以选中或取消选择的小圆形按钮。如果选择了选项，圆圈内会出现一个黑点；否则，圆圈保持空白。单选按钮是互斥的，即访问者只能从多个选项中选择一个。因此，当询问访问者一个问题，而该问题只能从所有选项中选出正确答案时，就会使用它，例如某人的性别、婚姻状况等。

单选按钮的语法

可以为复选框指定的各种属性是

Value：用于为每个单选按钮提供一个值。
Name：用于指定单选按钮的名称。一组按钮具有相同的名称。因此，选择其中一个会使其他按钮关闭。
Checked：用于指定默认选择。

单选按钮示例

<! Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>
       HTML Radio Button Example
    <title>
</head>
  <style>
input[type=submit] {
  border: 3px solid;
  border-radius: 2px;
  color: ;
  display: block;
  font-size: 1em;
  font-weight: bold;
  margin: 1em auto;
  padding: 1em 4em;
  position: relative;
  text-transform: uppercase;
}
input[type=submit]::before
{
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}
input[type=submit]::after {
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}
input[type=submit]:hover {
  color: #1A33FF;
}
h2 {
 font-style: italic;
font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing: 1px;
font-size: 1.75em;
font-weight: bold;
  }
h1 {
 font-style: italic;
 font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing: 1px;
 font-size: 2.75em;
  font-weight: bold;
  }
  </style>
<body>
    <form>
               <h1> Example </h1>
                 <h2> HTML Radio Button Example </h2>
        Select the Gender <br>
        <input type="radio"
               name = "gender" 
               value  = "yes"> <label for = "gender"> Male
            </label> <br>
        <input type = "radio"
                name = "gender" 
               value = "no"> <label for = "gender">  Female
            </label> <br>
      <input type="radio"
               name = "gender" 
               value="no"> <label for = "gender"> Transgender  </label> <br>
        <input type = "submit" name = "submit" value = "Select Gender">
    </form>
</body>
 </html>

在上面的示例中，我们创建了一个单选按钮，用户可以从中选择一个选项。在这个示例中，用户可以根据自己的选择选择性别。

复选框是什么意思？

复选框用于显示小方框，为用户提供多个可切换为“选中”和“未选中”的选项。您还可以通过传递“checked”属性为用户设置默认选择。如果选择了选项，则会显示一个小勾。表单中可以有多个复选框，每个复选框与其他选项独立工作。当询问用户一个问题，而该问题可能有一个或多个正确答案时，就会使用它，例如爱好、阅读偏好等。

复选框按钮的语法

可以为复选框指定的各种属性是

Value：用于为每个复选框提供一个值。
Checked：用于指定列表中的默认选择。
Name：用于为复选框指定名称。

复选框按钮示例

<! Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>
        HTML Checkbox Example
    <title>
</head>
  <style>
input[type=submit] {
  border: 3px solid;
  border-radius: 2px;
  color: ;
  display: block;
  font-size: 1em;
  font-weight: bold;
  margin: 1em auto;
  padding: 1em 4em;
  position: relative;
  text-transform: uppercase;
}
h2 {
 font-style: italic;
font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing: 1px;
font-size: 1.75em;
font-weight: bold;
  }
h1 {
 font-style: italic;
 font-family: "Playfair Display","Bookman",serif;
 color: #999; 
letter-spacing: -0.005em; 
word-spacing: 1px;
 font-size: 2.75em;
  font-weight: bold;
  }
input[type=submit]::before
{
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}
input[type=submit]::after {
  background: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}
input[type=submit]:hover {
  color: #1A33FF;
}
  </style>
<body>
    <form>
                   <h1> Example </h1>
                  <h2> HTML Checkbox Button Example </h2>
        Select the hobbies you have:
        <br>
        <input type="checkbox" 
               name="reading" 
      value="yes"> <label for = "Reading"> Reading 
            </label> <br>
        <input type="checkbox" 
               name="dancing" 
               value="yes"> <label for = "Dancing"> Dancing 
            </label> <br>
        <input type="checkbox" 
               name = "singing" 
               value ="yes"> <label for = "Singing"> Singing 
            </label> <br>
     <input type="checkbox" 
            name = "collecting" 
               value = "yes"> <label for = "collecting"> Coin Collecting
                 </label>
      <br>
<input type="checkbox" 
            name= "listening " 
               value =  "yes"> <label for = "collecting"> Listening songs
                 </label>
      <br>
             <input type = "submit" name = "submit" value = "Select Subjects">
 </form>
</body>
</html>

在上面的示例中，我们创建了一个复选框按钮，用户可以从中选择一个或多个选项。在这个示例中，用户可以根据自己的选择选择任意数量的爱好。

单选按钮和复选框按钮的区别

序号	单选按钮	复选框按钮
1	仅当有多个可用选项但只能选择一个选项时使用，例如性别等。	仅当有一个或多个选项可供选择时使用，例如爱好。
2	它使用名为 <input> 的 HTML 标签创建，并将 type 属性设置为 radio。语法 <input type = "radio" name = "radio_name" value = "choice_id">	它也使用名为 <input> 的 HTML 标签创建，并将 type 属性设置为 Checkbox。语法 <input type = "checkbox" name = "checkbox_name" value = "choice_id" checked>
3	它在屏幕上显示为小圆形按钮。	它在屏幕上显示为小方形框。
4	单选按钮有两种状态。它可以是 true 或 false。	复选框有三种状态。这些是选中、未选中和不确定。
5	它用于限制用户只能从单选框中提供的选项列表中选择一个选项。	当您希望允许用户从复选框中的选项列表中选择一个或多个选项，或者不选择任何选项时，可以使用它。

下一主题区别

单选按钮与复选框按钮

单选按钮是什么意思？

复选框是什么意思？

单选按钮和复选框按钮的区别

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

L-差异

Z-差异

Y-差异

X-差异

W-差异

V-差异

U-差异

T-差异

S-差异

R-差异

Q-差异

P-差异

O-差异

N-差异

M-差异

差异

K-差异

J-差异

I-差异

H-差异

G-差异

F-差异

E-差异

D-差异

C-差异

B-差异

A-差异

杂项-差异

最新更新-差异

单选按钮与复选框按钮

单选按钮是什么意思？

复选框是什么意思？

单选按钮和复选框按钮的区别

相关帖子

Redis 与 RDBMS

Redis 与 Elasticsearch

根与茎

宗教与灵性

行与列

路由器与 Brouter 的区别

大鼠与小鼠

兔子与野兔

鱼卵与鱼子酱

无线电波与微波的区别

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器