PHP前端开发

html单选框怎么用

百变鹏仔 3个月前 (09-21) #HTML
文章标签 单选框
单选框(又称单选按钮)允许用户从选项中选择一个。使用单选框时,需要指定组名和选项值。同一组的单选框应具有相同的名称,这样只能选中同一组中的一个单选框。用户可通过单击单选框或标签进行选择,选中值可通过编程语言获取,例如 javascript:document.queryselector('input[name="组名"]:checked').value。

HTML 单选框的使用

什么是单选框?

单选框(也称为单选按钮)是一种 HTML 输入元素,允许用户从一组选项中选择一个。

如何使用单选框?

立即学习“前端免费学习笔记(深入)”;

使用单选框只需简单的 HTML 代码:

<input type="radio" name="单选框组名" value="选项值"> 标签

属性解释:

分组单选框

同一组的单选框具有相同的名称,这样无论选中哪个单选框,都只能有一个单选框被选中。

选择单选框

用户可以通过单击单选框或标签来选择它。

获取选中值

可以通过 JavaScript 或 PHP 等编程语言获取选中单选框的值:

示例

考虑一个有三个选项的单选框组:

<input type="radio" name="颜色" value="红色"> 红色<input type="radio" name="颜色" value="蓝色"> 蓝色<input type="radio" name="颜色" value="绿色"> 绿色

当用户选择 "蓝色" 单选框时,可以使用以下代码获取所选值:

const selectedColor = document.querySelector('input[name="颜色"]:checked').value;