即使你在文本输入下方添加了按钮,它们也会在页面上彼此相邻。 这是因为 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>