html单选框代码方形

HTML单选框是一种在web表单中常用的交互元素，它允许用户从一组预定义的选项中选择一个选项。在HTML中，单选框使用<input>元素来定义。

<input type="radio" name="option" value="option1"> Option 1<br>
<input type="radio" name="option" value="option2"> Option 2<br>
<input type="radio" name="option" value="option3"> Option 3

html单选框代码方形

其中，type属性为“radio”表示这是一个单选框，name属性定义了单选框组的名称（一组单选框必须有相同的名称），value属性定义了当前选项的值。

为了让单选框呈现为方形选择框，可以使用CSS样式来修改单选框的外观。以下是一个简单的CSS样式：

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #999;
  border-radius: 50%;
  width: 16px;
  height: 16px;
}
input[type="radio"]:checked {
  background-color: #999;
}

通过设定appearance属性为none，我们移除了浏览器默认的单选框样式。border属性定义了单选框的边框样式和宽度，border-radius属性设定边框圆角半径，width和height属性指定单选框的大小。当单选框被选中时，我们使用:checked伪类选择器来指定选中状态下的背景颜色。

<label>
  <input type="radio" name="fruit" value="apple">
  Apple
</label>
<label>
  <input type="radio" name="fruit" value="orange">
  Orange
</label>
<label>
  <input type="radio" name="fruit" value="banana">
  Banana
</label>

以上代码创建了一个水果选择框组，当用户点击其中一个单选框时，该单选框的value值将被提交到服务器端。使用<label>元素来包裹单选框，可以让用户点击标签文字时，自动选中相应的单选框。

html单选框代码方形

相关文章