- <input type="radio"> 默认渲染为小型圆圈图表，填充即为激活，单选按钮允许你选择单一的值来提交表单
|
属性 |
说明 |
|
value |
表示单选按钮的值。它永远不会在客户端看到，但是在服务器上，这就是使用单选按钮 name 提交的数据的 value |
|
checked |
布尔属性，如果存在，则表示此单选按钮是组中当前选定的按钮。 与其他浏览器不同，Firefox默认情况下会在页面加载过程中保持<input>的动态检查状态。使用自动完成属性控制此功能。 |
示例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
<body> <form> <p>Please select your preferred contact method:</p> <div> <input type="radio" id="contactChoice1" name="contact" value="email"> <label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone"> <label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="mail"> <label for="contactChoice3">Mail</label> </div> <div> <button type="submit">Submit</button> </div> </form> </body>
</html> |
浏览器运行结果如下：
来自 <https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/radio>