即使你在文本输入下方添加了按钮,它们也会在页面上彼此相邻。 这是因为 input
和 button
元素都是内联元素,它们不会出现在新的行上。
<button type='submit'>Submit</button>
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<input type='radio'> Indoor
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
label
元素用于帮助将 input
元素的文本与 input
元素本身关联起来(尤其是对于屏幕阅读器等辅助技术)。 例如,<label><input type="radio"> cat</label>
使得点击单词 cat
也会选择相应的单选按钮。请注意,可以同时选择两个单选按钮。 为了使选择一个单选按钮自动取消选择另一个,两个按钮必须有具有相同值的
name
属性。如果你选择
Indoor
单选按钮并提交表单,则该按钮的表单数据基于其 name
和 value
属性。 <label><input id="outdoor" type="radio" name="indoor-outdoor" value='outdoor'> Outdoor</label>
fieldset
元素用于在 Web 表单中将相关的输入和标签组合在一起。 fieldset
元素是块级元素,这意味着它们出现在新的一行上。legend
元素充当 fieldset
元素中内容的标题<input type='checkbox'> loving
还有另一种方法可以将
input
元素的文本与元素本身相关联。 你可以将文本嵌套在 label
元素中,并添加与 input
元素的 id
具有相同值的 for
属性。<input id="loving" type="checkbox"> <label for='loving'>Loving</label>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」