html 如何添加单选表单？

2024-09-29 09:48:35 阅读：93 来源： 互联网

标签：

在 HTML 中，单选表单（radio button）是通过 <input> 元素和 type="radio" 属性来实现的。所有的单选按钮必须具有相同的 name 属性，以确保在同一组中只能选择一个选项。下面是一个简单的示例，演示如何创建一个单选表单。

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单选表单示例</title>
</head>
<body>

    <form id="myForm">
        <h2>请选择一个选项:</h2>
        
        <label>
            <input type="radio" name="options" value="option1" checked> 选项 1
        </label><br>

        <label>
            <input type="radio" name="options" value="option2"> 选项 2
        </label><br>

        <label>
            <input type="radio" name="options" value="option3"> 选项 3
        </label><br>

        <button type="submit">提交</button>
    </form>

</body>
</html>

HTML

代码说明

<form> 元素:
- 包围所有输入元素，表示用户提交数据的区域。
单选按钮:
- 每个单选按钮都是一个 <input> 元素，type 属性设置为 radio。
- name 属性设置为相同的值（例如，options），使得这些单选按钮成为同一组。
- value 属性是提交表单时传递给服务器的值。
- 可以设置一个单选按钮的 checked 属性，使其在页面加载时默认选中。
<label> 元素:
- 用于包含和描述每个单选按钮。
- 结合使用 <label> 和 <input> 元素可以提高可访问性和用户体验，用户点击文本时也可以选中对应的单选按钮。
提交按钮:
- 使用 <button> 元素提交表单。

总结

通过上述代码，您可以轻松创建一个具有多个单选选项的表单，用户可以在这些选项中选择一个。根据需要，您可以添加更多的选项或自定义样式。

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

html 如何添加单选表单？

示例代码

代码说明

总结