四选一单选按钮html实现

最新推荐文章于 2024-08-20 13:50:55 发布

pending-s

最新推荐文章于 2024-08-20 13:50:55 发布

阅读量9.5k

点赞数 5

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/qq_27954643/article/details/86014074

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

    <!-- 只能单击按钮才能选中 -->
    <input type="radio" name="demo" />单选A
    <input type="radio" name="demo" />单选B
    <input type="radio" name="demo" />单选C
    <input type="radio" name="demo" />单选D
    <hr>
    <!-- 这种input和label配合使用用户体验更好，单击按钮或者文字都会选中-->
    <input type="radio" name="demo" id="temp1" /><label for="temp1">单选A</label>
    <input type="radio" name="demo" id="temp2" /><label for="temp2">单选B</label>
    <input type="radio" name="demo" id="temp3" /><label for="temp3">单选C</label>
    <input type="radio" name="demo" id="temp4" /><label for="temp4">单选D</label>
    <hr>
    <!-- label嵌套式标签实现，不能为设置id名称发愁 -->
    <label><input type="radio" name="demo" />单选A</label>
    <label><input type="radio" name="demo" />单选B</label>
    <label><input type="radio" name="demo" />单选C</label>
    <label><input type="radio" name="demo" />单选D</label>