html - 创建一个带有灰色按钮的简单单选按钮表单

Question

在下面的代码中:

<form>
     <input type="radio" style="disabled:true">Alpha<br>
     <input type="radio" style="enabled:false">Beta<br>
     <input type="radio">Gamma<br>
</form>

1) 为什么允许我一次选择多个单选按钮？

2) 如何让特定的单选按钮“变灰”？ “启用”和“禁用”属性似乎不起作用。

Answer 1

要制作一组单选按钮，请给它们全部相同的名称:

<form>
     <input type="radio" name="group1">Alpha<br>
     <input type="radio" name="group1">Beta<br>
     <input type="radio" name="group1">Gamma<br>
</form>

Demo
要禁用单选按钮，请在其标记中使用 disabled 属性:

<form>
         <input type="radio" name="group1">Alpha<br>
         <input type="radio" name="group1">Beta<br>
         <input type="radio" name="group1" disabled>Gamma<br>
    </form>

Demo
Disabled 不是 CSS 属性，所以它没有在 style 属性中定义。
如上所述，您还可以包装 <input>在<label>像这样标记:

<form>
             <label><input type="radio" name="group1">Alpha</label><br>
             <label><input type="radio" name="group1">Beta</label><br>
             <label><input type="radio" name="group1" disabled></label>Gamma<br>
        </form>

或者您可以将标签与输入 ID 链接起来:

<label for="alpha">Alpha</label>
 <input type="radio" name="group1" id="alpha">

然后用户可以单击文本而不仅仅是单选按钮。 Demo