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 HTML Forms Choosing Options Checkboxes

Posted by Dávid Molnár
Dávid Molnár
27,081 Points

How to use <form> properly?

Compared to the treehouse workspace, the platforms I try nowadays like dreamweaver doesn't separate the individual <input> elements by default. I usually use <br> to separate them but I'm interested in how to separate them properly.

<fieldset class="personal_data">

    <label for="name">Name:</label><br>
    <input type="text" id="name" name="user_name">
    <br>
    <label for="password">Password:</label><br>
    <input type="password" id="password" name="user_password">

</fieldset>

2 Answers

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points

So what I see is a question more geared towards CSS rather than HTML.

Some ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

Your fieldset is Block level, it will take up the width of the screen, and it's contents <label> and <input> are in-line.

You don't need a <br> element if you determine the width of your fieldset and the width of the inline elements within, make sense?

You can say label { width: 100%; display: block; } and input { width: 100% } and it should break the elements as it takes up 100% of its container/parent element

Check my codepen illustrating this idea: https://codepen.io/CJHARKINS/pen/rYmBrg

Dávid Molnár
Dávid Molnár
27,081 Points
Dávid Molnár
Dávid Molnár
27,081 Points

I see, I totally forgot the inline / block thing, thanks now I know what to do :D