Pug / Jade - 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

но я получаю ошибку:

input является самозакрывающимся элементом: но содержит вложенное содержимое.

что это значит? Как я могу это исправить?

8
express javascript node.js pug

3 ответов

есть несколько способов сделать это с помощью Jade / Pug. Первый способ-использовать трубный символ (для которого требуется новая строка):

input
  | text

второй способ - использовать интерполяцию тегов (и вы можете оставаться на одной строке):

#[input] text

так ответь альтернатива Джетро будет:

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

обратите внимание, что вы даже можете сделать:

 label #[input] text

который будет генерировать:

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

нужно так:

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

положить Visible на той же строке, что и input, заставляет мопса интерпретировать его как внутренний HTML input элемент.

6

Я считаю, что глупо ставить input внутри label tag, или нет? Вы могли бы просто сделать

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

это дает вам идеально помеченный переключатель в соответствии с современными веб-стандартов.

1