2016-07-10 25 views
6

Voglio creare il codice HTML in questo modo:Pug/Jade - l'input è un elemento di chiusura automatica: <input/> ma contiene contenuto annidato?

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

Carlino/Jade:

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

Ma ottengo un errore:

input is a self closing element: but contains nested content.

Che cosa significa? Come posso risolvere questo?

+3

'' L'elemento 'non può contenere nulla. –

risposta

7

Ci sono molti modi per farlo usando Jade/Pug. Il primo modo è quello di utilizzare un carattere pipe (che richiede una nuova linea):

input 
    | text 

Il secondo modo è quello di utilizzare tag di interpolazione (e si può rimanere sulla stessa linea):

#[input] text 

così un'alternativa risposta di Jethro sarebbe:

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

Nota che si può anche fare:

label #[input] text 

che genererà:

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

sarà necessario in questo modo:

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

Mettere Visible sulla stessa linea input, rende pug interpretarlo come il codice HTML interna dell'elemento input.

1

Credo che sia una sciocchezza di mettere il input all'interno del tag label, o no? Si può solo fare

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

Che ti dà un pulsante di scelta perfettamente etichettato in accordo con le moderne web standards.

+2

Potrebbe, anche se questo non è il requisito degli OP. Nota anche che il tuo link afferma esplicitamente "Suggerimento: un'etichetta può essere associata a un elemento usando l'attributo" for "o posizionando l'elemento all'interno dell'elemento

+0

Abbastanza corretto, ho trascurato quello. Grazie! Da una prospettiva semantica non lo userei. – Flaudre

+0

Ricevo ancora quell'errore 'input # first_name.form-control.input-sm.floatlabel (type =" text ", name =" first_name ", placeholder =" First Name ")' –

Problemi correlati