是否需要 HTML 输入复选框的 value= 部分，或者该值本身是否足够答案

【问题标题】：Is the value= part of an HTML input checkbox required or can the value itself suffice是否需要 HTML 输入复选框的 value= 部分，或者该值本身是否足够
【发布时间】：2021-12-18 09:20:05
【问题描述】：

然后我注意到当我编写 HTML 时，例如，在一个苗条的模板中，我为我的编辑器配置的更漂亮的格式化程序总是删除 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=。当然，凭经验我可以对此进行测试，但我还没有。我很想听听您对此有何看法。

【问题讨论】：

看起来像object property shorthand notation。您可以这样做，因为属性和变量具有相同的名称，如果变量没有名称 value，那么您需要使用 value={variable}。但我之前没有使用过 Svelte，所以无法 100% 确认（这是您无法直接在 HTML 中执行的操作）。
在MDN 上有更详细的文档。

标签： javascript html forms prettier

【解决方案1】：

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

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

当属性名和值匹配时（name={name}），可以替换为{name}。

<button disabled={disabled}>...</button>
<button {disabled}>...</button>

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

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

【讨论】：