HTML 输入复选框的 value= 部分是必需的还是值本身就足够了

Question

然后我注意到，当我写 HTML 时，例如，在一个 svelte 模板中，我为我的编辑器配置的更漂亮的格式化程序总是删除 value= 部分，以便

<label>                                                                
<input                                                               
   type="checkbox"                                                    
   bind:group={foo.bar}                    
   name="bar"                                          
   value={value} <———                                                           
/>                                                                   
 {value}                                                              
</label>

变成了

<label>                                                                
<input                                                               
   type="checkbox"                                                    
   bind:group={foo.bar}                    
   name="bar"                                          
   {value} <——-                                                           
/>                                                                   
 {value}                                                              
</label>

然而，当我在 MDN 上查找 input type=‘checkbox’ 元素参考文档时，https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox，它并没有说 value= 是可选的。我在表单中使用输入，我认为有必要 value=。当然，根据经验我可以对此进行测试，但我还没有。我很想听听您对此有何分享。

Answer 1

HTML 中需要属性名称。问题是您共享的代码可能看起来像 HTML，但事实并非如此。它是一个看起来 HTML 的 JavaScript 表达式，稍后将由 Svelte 处理并变成实际的 HTML.

在 Svelte documentation 他们解释了你所看到的：

When the attribute name and value match (name={name}), they can be replaced with {name}.

<!-- These are equivalent -->
<button disabled={disabled}>...</button>
<button {disabled}>...</button>

这就是您的编辑器删除 value={value} 并将其减少为 {value} 的原因：因为 属性 和具有该值的变量具有相同的值姓名.

如果您使用的是实际的 HTML，那么您将无法省略 属性 名称，并且需要将整个内容写成 value="value"（注意它会用引号代替大括号。）