HTML入门之——单选框相关

最新推荐文章于 2025-07-10 18:05:30 发布

zgl175

最新推荐文章于 2025-07-10 18:05:30 发布

阅读量446

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML入门文章标签： HTML入门

本文链接：https://blog.youkuaiyun.com/zhang175gl/article/details/89410692

HTML入门专栏收录该内容

1 篇文章

订阅专栏

本文介绍了HTML中的单选框功能，用于实现网上选择题。单选框需在form标签内，类型为radio，value指定用户选择的值。通过checked属性可设置默认选中项。此外，还提到了下拉列表的实现方式，强调了select标签的size属性控制显示选项数量，multiple属性用于多选，以及selected属性设置默认选中项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例：网上做选择题的时候，会存在单选框这种功能，下面我们来一步步实现

<body>
	<form>
    	<div class="choose">
    	<p>1+1等于几</p>
        <input type="radio" name="vote" value="1"/>1<br/>
        <input type="radio" name="vote" value="2"/>2<br/>
        </div>
    </form>
</body>

PS：单选框一定要在form标签中，否则为错误语法。表单应当建立在body里。
type为radio，意为表单中的选择框只有一个值有效，value为用户选取的项所传递的值。
效果图：
在这里插入图片描述

若我们想实现默认选择一项的功能，只需将checked="checked"写入input中，该代码写入哪一行则默认选择哪一行
代码如下：

<body>
	<form>
    	<div class="choose">
    	<p>1+1等于几</p>
        <input type="radio" name="vote" value="1" checked="checked"/>1<br/>
        <input type="radio" name="vote" value="2"/>2<br/>
        </div>
    </form>
</body>

效果图：
在这里插入图片描述

当然，你也可以用下拉列表的方式来实现

<body>
	<form>
    	<div class="choose">
    	<p>1+1等于几</p>
        <select name="vote" size:"2" multiple="multiple">
        <option value="1" selected="selected">1</option>
        <option value="2">2</option>
        </select>
        </div>
    </form>
</body>

效果图：
在这里插入图片描述

PS：
1.标签与标签之间不应当出现其他标签
2.select标签中，size的值代表用户能看到多少选项，假如该题目给出5个选项，而size的值为2的时候，用户只能看到两个选项，表单右边将出现滚动条，向下滑动可看到其他选项
3.multiple属性可以让用户同时选择多项，去掉则可实现单项选择
4.标签中的属性selected表示默认选中的选项，用法与checked相似