2011-08-14 21 views
11

Estoy tratando de crear un formulario simple con 2 campos de entrada y 1 botón.Ayuda HTML a Jade

Aquí es HTML que debe ser traducido a Jade:

<form name="input" action="html_form_action.asp" method="get"> 
    Username: <input type="text" name="user" /> 
    Password: <input type="text" name="pswd" /> 
    <input type="submit" value="Submit" /> 
</form> 

Por favor, ayudar a mí antes de que tire este equipo fuera de la ventana y enviar un equipo de matanza después de los desarrolladores del lenguaje de plantillas de Jade.

+0

¿Qué pasa con esto? –

+0

Necesito eso traducido a Jade. –

+0

No puedo publicarlo aquí, la sangría no funcionará. Además, recién comencé a usar Express.js y Jade; Ni siquiera sé por dónde empezar. –

Respuesta

26
form(name="input", action="html_form_action.asp", method="get") 
    | Username: 
    input(type="text", name="user") 

    | Password: 
    input(type="text", name="pswd") 

    input(type="submit", value="Submit") 
+0

Gracias. Eso funciona. –

+0

Solo por curiosidad qué parte de esto te colgó ? –

+0

No sabía que tenía que usar barras verticales. No sabía que la forma y la entrada eran funciones. –

14

Hay una manera más elegante y correcta. No te olvides de usabilidad. ¡Y omitir dos puntos, no es una forma en papel!

form(name="input", action="html_form_action.asp", method="get") 
    key Username 
    input(type="text", name="user") 

    key Password 
    input(type="password", name="pswd") 

    input(type="submit", value="Submit") 

para la prestación de forma que estoy usando mixins. Hace que mi código sea reutilizable y flexible. Mira aquí:

mixin text(name, value, title) 
    key=title 
    input(type="text" name=name value=value) 

mixin password(name, value, title) 
    key=title 
    input(type="password" name=name value=value) 

mixin submit(name, value) 
    input(type="submit" name=name value=value) 

form(name="input", action="html_form_action.asp", method="post") 
    mixin text('user', null, 'User') 
    mixin password('pswd', null, 'Password') 
    mixin submit('do', 'Login') 
+1

en lugar de name = "# {name}" simplemente puede usar name = name (y faltan comas en el entradas). Buena solución con las mixins! – w00t

8

poco me di cuenta en la página de Jade github se añadió un vínculo para un conversor de HTML a Jade:

https://github.com/donpark/html2jade

podría ser vale la pena ver, en lugar de la mano traducir si tienes más que unos pocos para convertir.

+0

Gracias te será útil. –

5

Puede utilizar HTML plano en un documento de Jade y va a representar correctamente (Sólo en caso de que necesite usarlo!)

+0

Eso es bueno saber. ¿Puedes mezclar html y jade? – jwerre