Pug/ Jade - 输入是一个自闭合元素：<input/> 但包含嵌套内容？答案

【问题标题】：Pug/ Jade - input is a self closing element: <input/> but contains nested content?Pug/ Jade - 输入是一个自闭合元素：<input/> 但包含嵌套内容？
【发布时间】：2016-11-12 17:10:01
【问题描述】：

我想创建这样的 html：

<label class="radio-inline">
    <input type="radio" name="hidden" checked="" value="Visible"> Visible
</label>

哈巴狗/翡翠：

label.radio-inline
    input(type="radio", name="hidden", value="0", checked="") Visible

但我得到一个错误：

input 是一个自闭合元素：但包含嵌套内容。

这是什么意思？我该如何解决这个问题？

【问题讨论】：

<input> 元素不能包含任何内容。

标签： javascript node.js express pug

【解决方案1】：

你需要这样：

label.radio-inline
  input(type='radio', name='hidden', value=0, checked='')
  | Visible

将Visible 与input 放在同一行，会使pug 将其解释为input 元素的内部HTML。

【讨论】：

【解决方案2】：

使用 Jade / Pug 有多种方法可以做到这一点。第一种方法是使用管道字符（需要换行）：

input
  | text

第二种方式是使用标签插值（也可以留在同一行）：

#[input] text

所以 Jethro 的另一个答案是：

label.radio-inline
  #[input(type='radio', name='hidden', value=0, checked='')] Visible

请注意，您甚至可以这样做：

 label #[input] text

会生成：

<label>
  <input/> text 
</label>

【讨论】：

【解决方案3】：

我认为将input 放在label 标记内是无稽之谈，或者不是？你可以这样做

label(for="ya") Visible
input(id="ya", type="radio", name="hidden", value=0, checked="")

这为您提供了一个符合现代 web standards 的完美标记的单选按钮。

【讨论】：

可以，尽管这不是 OP 的要求。另请注意，您的链接明确指出“提示：标签可以通过使用“for”属性或将元素放在元素内来绑定到元素。”
很公平，我忽略了这一点。谢谢！从语义的角度来看，我不会使用它。
我仍然收到那个错误input#first_name.form-control.input-sm.floatlabel(type="text", name="first_name", placeholder="First Name")