HTML to Jade help

I am trying to create a simple form with 2 input fields and 1 button.

Here's HTML that needs to be translated to 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开发者_如何学C="submit" value="Submit" />
</form>

Please help me before I throw this computer out of the window and send a kill squad after Jade templating language developers.

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")

There is more elegant and correct way. Don't forget about usability. And skip colons it's not a paper form!

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")

For form rendering I'm using mixins. It makes my code reusable and flexible. Look here:

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')

I recently noticed on the Jade github page a link was added for a HTML to Jade converter:

https://github.com/donpark/html2jade

Might be worth checking out, rather than hand translating if you've got more than a few to convert.

You can use plain HTML in a Jade document and it will render correctly (Just incase you ever need to use it!)

There are many online HTML to JADE converts. Here is a good one.

HTML to Jade converter