Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Neil Ganotisi
Neil Ganotisi
20,975 Points
Posted by Neil Ganotisi
Neil Ganotisi
20,975 Points

How do I use pug to create radio inputs in a form?

Hey guys,

I've been developing a small Express project with Pug that allows stat lookups from any username from the game Overwatch, but I have difficulty using Pug to create a proper form for the root page.

This is what I have so far as far as my best guess goes, based off what I have seen from the associated MDN page below

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

extends layout.pug

block content
    section#content
    h2 Welcome!
    form(action='/lookup', method='post')
        label Enter battletag:
            input(type='text', name='battletag')
        label Platform:
            input(type='radio', name='platform', id='battleNet', value='pc')
                label(for='battleNet') Battle.net
            input(type='radio', name='platform', id='xboxLive', value='xbl')
                label(for='xboxLive') Xbox Live
            input(type='radio', name='platform', id='playstationNetwork', value='psn')
                label(for='playstationNetwork') Playstation Network
        label Region
        button(type='submit') Submit

Below is the error I have outputted when trying to access the associated route on Express

Error: /Users/neil/Dropbox/Programming/Web Development/owapi/views/index.pug:10:13

input is a self closing element: <input/> but contains nested content.
    at makeError (/Users/neil/Dropbox/Programming/Web Development/owapi/node_modules/pug-error/index.js:32:13)
    at Object.error (/Users/neil/Dropbox/Programming/Web Development/owapi/node_modules/pug-code-gen/index.js:92:15)
    at Object.visitTag (/Users/neil/Dropbox/Programming/Web Development/owapi/node_modules/pug-code-gen/index.js:560:14)
    at Object.visitNode (/Users/neil/Dropbox/Programming/Web Development/owapi/node_modules/pug-code-gen/index.js:308:37)
    at Object.visit (/Users/neil/Dropbox/Programming/Web Development/owapi/node_modules/pug-code-gen/index.js:297:10)
    at Object.visitBlock (/Users/neil/Dropbox/Programming/Web Development/owapi/node_modules/pug-code-gen/index.js:380:12)
    at Object.visitNode (/Users/neil/Dropbox/Programming/Web Development/owapi/node_modules/pug-code-gen/index.js:308:37)
    at Object.visit (/Users/neil/Dropbox/Programming/Web Development/owapi/node_modules/pug-code-gen/index.js:297:10)
    at Object.visitTag (/Users/neil/Dropbox/Programming/Web Development/owapi/node_modules/pug-code-gen/index.js:569:12)
    at Object.visitNode (/Users/neil/Dropbox/Programming/Web Development/owapi/node_modules/pug-code-gen/index.js:308:37)

Is there anyone able to help me out getting out the correct syntax for this pug form? Thanks!

Jordan Watson
Jordan Watson
14,738 Points
Jordan Watson
Jordan Watson
14,738 Points

Your mark-up is correct although you indentation is wrong your inputs are all within label

1 Answer

Jordan Watson
Jordan Watson
14,738 Points
Jordan Watson
Jordan Watson
14,738 Points

This treehouse video shows you how to write correct syntax :- https://teamtreehouse.com/library/creating-a-registration-form-with-pug-jade-2

block content
  .main.container
    .row
      .col-md-6.col-md-offset-3
        h1.display-4.m-b-2 Sign Up

        // register form
        form(method='POST' action='/register')
          div.form-group
            label(for='name') Name:
            input#name.form-control(type='text', placeholder='first and last' name='name')
          div.form-group
            label(for='email') Email:
            input#email.form-control(type='email', placeholder='name@email.com' name='email')
          div.form-group
            label(for='favoriteBook') Favorite Book:
            input#favoriteBook.form-control(type='text', placeholder='title of book' name='favoriteBook')
          div.form-group
            label(for='pw') Password:
            input#pw.form-control(type='password' name='password')
          div.form-group
            label(for='pw2') Confirm Password:
            input#pw2.form-control(type='password' name='confirmPassword')
          button.btn.btn-primary(type='submit') Sign up