html:radio标签

HTML中的<input>标签是用来创建用户界面元素的，而其中的<radio>标签则用于创建单选按钮，单选按钮是一种允许用户从多个选项中选择一个的输入类型，当用户点击某个单选按钮时，与之关联的值就会被提交或记录。

使用<input type="radio">

在HTML中，<input>标签的type属性可以设置为"radio",这样就创建了一个单选按钮，每个单选按钮都有一个唯一的名称(通过name属性指定),并且只能选择一个单选按钮，如果尝试选择已经选择过的单选按钮，那么之前的选择会被取消。

<form action="/submit_form">
  <input type="radio" id="option1" name="options" value="option1">
  <label for="option1">选项一</label><br>
  <input type="radio" id="option2" name="options" value="option2">
  <label for="option2">选项二</label><br>
  <input type="radio" id="option3" name="options" value="option3">
  <label for="option3">选项三</label><br>
  <input type="submit" value="提交">
</form>

在这个例子中，我们创建了三个单选按钮，分别代表三个选项，当用户点击提交按钮时，表单会将选中的选项发送到服务器。

工作原理

单选按钮的工作方式很简单：当用户点击一个单选按钮时，与其相关联的值就会被设置为该按钮的值，这是因为浏览器会自动将与该单选按钮关联的输入字段的值设置为该按钮的值，如果用户再次点击另一个单选按钮，那么之前选中的单选按钮的值就会被取消，因为新的单选按钮的值已经设置为选中状态。

这种机制使得用户只能从一组预定义的选项中进行选择，而且一旦选择了某个选项，就不能更改其选择，这对于需要用户从一组有限的选项中进行选择的情况非常有用。

相关问题与解答

Q: <input type="radio">元素和<input type="checkbox">元素有什么区别？

答：<input type="radio">元素和<input type="checkbox">元素的主要区别在于它们的默认行为不同，当用户点击一个复选框时，它的状态会切换；而当用户点击一个单选按钮时，它的状态只会被设置一次，由于单选按钮只能选择一个选项，所以它们通常更适合表示一组互斥的选项。