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 Going Further

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
Posted by SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

How can I make the label display next to the input?

Hi I would like the label to display next to the input in the same line instead of on top. I removed all the css and it was displaying next to the input field. then I removed the css one line of code at a time but it still stayed on top. How do I control this? Thanks

6 Answers

Jeff Busch
Jeff Busch
19,287 Points

Hi SAMUEL,

I'm sure there are programs available for that, I think I understand your question. Otherwise, you can do this using html entities, Characters and symbols. Do a search for more. Below is a small example:

<body> <div> </div> </body>

The html tags above were created by the text/code below:

&lt;body&gt;
  &lt;div&gt;
  &lt;/div&gt;
&lt;/body&gt;

This example is something I did one night while watching TV. Right click on the page and select view source or view page source or something like that.

Jeff

SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi Jeff, I just wanted to show you this. I sort of created an apple calculator style table using the lesson learned from the table course of Nick. What do you think? I don't know if this path is going to work. I don't fully understand how to upload a pic from here. calculator.

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi SAMUEL,

You could use a table. Or you could remove width: 100% from the first select rule and remove display-block from the label rule, then add br tags after the label elements in the html.

Jeff

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi Jeff, I have a question not related to the first question. I would like a like of code example <form> to appear as regular text in HTML but when ever you write this the application interprets it as code. How can I make it appear as regular text?

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

I realized that even here I can't type it out. the example that did not display above is <form>. I would like this to display as regular text.

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi Jeff, thanks again man, huge help. That's exactly what I needed. You really know your stuff dude. thanks man.

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi Jeff, thanks for the quick reply. I tried out your suggestions. It does achieve the result I want to a certain extent. I realize to do it the way you suggested would require a lot of additional styling to the other elements to get it to align properly because of the way the other elements are already styled. They fit perfectly with this layout.

But if I was to recreate this form from scratch then I could use the technique you suggested. I now understand it better. Thanks man. Appreciate it.