web-dev-qa-db-ja.com

パグ/ジェイド-入力は自己終了要素です：<input />がネストされたコンテンツを含んでいますか？

次のような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

しかし、エラーが発生します：

入力は自己終了要素ですが、ネストされたコンテンツが含まれています。

どういう意味ですか？どうすればこれを修正できますか？

javascriptnode.jsexpresspug
11
laukok

Jade/Pugを使用してこれを行う方法は複数あります。最初の方法は、パイプ文字（新しい行が必要）を使用することです。

input
  | text

2番目の方法は、タグ補間を使用することです（同じ行に留まることができます）。

#[input] text

したがって、代わりのJethroの答えは次のようになります。

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

あなたもできることに注意してください：

 label #[input] text

生成されるもの：

<label>
  <input/> text 
</label>
10
Iso

次のようにする必要があります。

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

Visibleをinputと同じ行に置くと、pugはinput要素の内部HTMLとして解釈します。

6
1sloc

inputタグ内にlabelを入れるのはナンセンスだと思いますか、それとも違いますか？あなたはただすることができます

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

これにより、最新の ウェブ標準 に従って完全にラベル付けされたラジオボタンが提供されます。

1
Flaudre