HTML中如何将<input>标签正确嵌套在<label>标签内？

直接将<input>元素放在<label>标签内部、对应文本的后方即可，按照要求需要在文本末尾的冒号后保留1个空格。这种嵌套写法会自动完成标签和输入框的关联，不需要额外给<label>加for属性、给<input>加匹配的id，点击标签文本就能直接激活输入框。

针对提供的初始代码，修正后符合要求的代码如下：

<form>
    <label>Enter Your First Name: <input type="text" name="firstName"></label>
</form>

编写注意点 #

• 不要把<input>放到</label>闭合标签的外侧，否则二者的嵌套关联会直接失效
• 文本末尾冒号和<input>之间固定保留1个半角空格，不要漏写也不要多打，避免文本和输入框挤在一起影响可读性
• <input>的type、name等属性可以根据实际业务需求调整，比如做密码输入就将type设为password，做单选选择就设为radio，嵌套规则完全通用

内容的提问来源于stack exchange，提问作者Emtithal Eljozoly