Styling form with the inscription above. Inputs

Question

I would like to create the following form style:

 Name Email
 [.................] [.................]

 Subject
 [.................]

 Message
 [.........................................]
 [.........................................]
 [.........................................]
 [.........................................]

HTML code I have:

<form name="message" method="post"> <section> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> <label for="email">Email</label> <input id="email" type="text" value="" name="email"> </section> <section> <label for="subject">Subject</label> <input id="subject" type="text" value="" name="subject"> <label for="message">Message</label> <input id="message" type="text" value="" name="message"> </section> </form> 

Currently he produces:

 Name [...................]
 Email [...................]
 Subject [...................]
 Message
 [.........................................]
 [.........................................]
 [.........................................]
 [.........................................]

What would be the best way to do this? I keep confusing my floats all the time!

Answer 1

I would make the input and label display: block elements, and then separate the label and input name and the email and input label on the div's and place them next to each other.

 input, label { display:block; } 

 <form name="message" method="post"> <section> <div style="float:left;margin-right:20px;"> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> </div> <div style="float:left;"> <label for="email">Email</label> <input id="email" type="text" value="" name="email"> </div> <br style="clear:both;" /> </section> <section> <label for="subject">Subject</label> <input id="subject" type="text" value="" name="subject"> <label for="message">Message</label> <input id="message" type="text" value="" name="message"> </section> </form> 

Answer 2

You can try something like

 <form name="message" method="post"> <section> <div> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> </div> <div> <label for="email">Email</label> <input id="email" type="text" value="" name="email"> </div> </section> <section> <div> <label for="subject">Subject</label> <input id="subject" type="text" value="" name="subject"> </div> <div class="full"> <label for="message">Message</label> <input id="message" type="text" value="" name="message"> </div> </section> </form> 

and then css it's like

 form { width: 400px; } form section div { float: left; } form section div.full { clear: both; } form section div label { display: block; } 

Answer 3

I would prefer not to use only an HTML5 element, such as <section> . In addition, grouping input fields can be painful if you try to generate a form with a code. It is always better to make similar markup for each of them and change the class names. Therefore, I would recommend a solution that looks like this:

CSS

 label, input { display: block; } ul.form { width : 500px; padding: 0px; margin : 0px; list-style-type: none; } ul.form li { width : 500px; } ul.form li input { width : 200px; } ul.form li textarea { width : 450px; height: 150px; } ul.form li.twoColumnPart { float : left; width : 250px; } 

HTML

 <form name="message" method="post"> <ul class="form"> <li class="twoColumnPart"> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> </li> <li class="twoColumnPart"> <label for="email">Email</label> <input id="email" type="text" value="" name="email"> </li> <li> <label for="subject">Subject</label> <input id="subject" type="text" value="" name="subject"> </li> <li> <label for="message">Message</label> <textarea id="message" type="text" name="message"></textarea> </li> </ul> </form> 

Answer 4

I know this is an old one with an accepted answer, and this answer works fine. IF you do not stack the background and do not float the final inputs on the left. If you are, then the background of the form will not contain input fields with a floating point.

To avoid this, split the div with smaller inline-block input fields rather than floating to the left.

It:

 <div style="display:inline-block;margin-right:20px;"> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> </div> 

Instead

 <div style="float:left;margin-right:20px;"> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> </div> 

Answer 5

10 minutes ago I had the same problem of labeling a place above the entrance

then I got a little ugly permission

 <form> <h4><label for="male">Male</label></h4> <input type="radio" name="sex" id="male" value="male"> </form> 

The downside is that there is a lot of empty space between the label and the input, of course you can configure css

Demo at: http://jsfiddle.net/bqkawjs5/

Answer 6

I consider the simplest / least coding solutions to be the best. Changing <label> to <div> works for me. for example

Change:

 <label for="name">Name</label> <input id="name" type="text" value="" name="name"> 

In order to:

 <div for="name">Name</div> <input id="name" type="text" value="" name="name"> 

They gave me exactly what I wanted.