Pug (Jade) HTML form

P

3

11

I'm trying to create the following simple form with Pug:

<body>
     <form action="/add_movie" method="POST">
       <p>
         title: <input type="text" name="title" value=""/>
         year: <input type="text" name="year" value=""/>
         imdb: <input type="text" name="imdb" value=""/>
       </p>
       <input type="submit" value="Submit"/>
     </form>
  </body>

But I can't make the form work with only one p tag. Here is what I came up with instead:

body
    h1= "Add a movie!"
    form(action="/new_movie" method="POST")
    p Title:
      input(type="text" name="title" placeholder="")
    p Year:
      input(type="text" name="year" placeholder="")
    p imdb:
      input(type="text" name="imdb" placeholder="")
    input(type="submit")

Is there a way, to re-create the original HTML form in Pug within one p tag?

Parmesan answered 29/3, 2017 at 10:19 Comment(0)

B

23

Use piped text to mark content as text within an existing block.

body
  form(action='/add_movie', method='POST')
    p
      | title: 
      input(type='text', name='title', value='')
      |          year: 
      input(type='text', name='year', value='')
      |          imdb: 
      input(type='text', name='imdb', value='')
    input(type='submit', value='Submit')

… but you should only use paragraphs when you actually have a paragraph and you should learn to love labels.

Bacillary answered 29/3, 2017 at 10:23 Comment(1)

Hi, could we get an example using labels instead? Even just a link to an example using .pug would be helpful for us webdev n00bs. Thanks! – Nolitta 17/9, 2019 at 17:59

K

3

I use this website https://html2jade.org/ to pass from HTML to Pug, it is very usefull.

The solution provided for your HTML is this (same as the answer from @Quentin)

html
  head
  body
    form(action='/add_movie', method='POST')
      p
        | title: 
        input(name='title', value='', type='text')
        |          year: 
        input(name='year', value='', type='text')
        |          imdb: 
        input(name='imdb', value='', type='text')
      input(value='Submit', type='submit')

Kherson answered 16/8, 2018 at 11:4 Comment(0)

H

-1

body
    form(action="/login" method="POST")
    p Username:
      input(type="text" name="username" placeholder="Enter Your Username ")
    p Password:
      input(type="password" name="password" placeholder="Enter Your Password ")
    input(type="submit")

Hunterhunting answered 13/5, 2020 at 17:18 Comment(0)

Recommended topics

Hot tags