Styling Form with Label above Inputs

Question

I would like to produce the following form style    Name                    Email                                              Subject                      Message                                                                                                                                                                                   The HTML code I have is    lt form name  message  method  post  gt       lt section gt       lt label for  name  gt Name lt  label gt       lt input id  name  type  text  value    name  name  gt       lt label for  email  gt Email lt  label gt       lt input id  email  type  text  value    name  email  gt       lt  section gt       lt section gt       lt label for  subject  gt Subject lt  label gt       lt input id  subject  type  text  value    name  subject  gt       lt label for  message  gt Message lt  label gt       lt input id  message  type  text  value    name  message  gt       lt  section gt   lt  form gt    At the moment it is producing    Name                          Email                         Subject                       Message                                                                                                                                                                                   What would be the best way to do this  I keep getting in a muddle my floats

User · Answer

I d prefer not to use an HTML5 only element such as  lt section gt   Also grouping the input fields might painful if you try to generate the form with code  It s always better to produce similar markup for each one and only 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   lt form name  message  method  post  gt       lt ul class  form  gt           lt li class  twoColumnPart  gt               lt label for  name  gt Name lt  label gt               lt input id  name  type  text  value    name  name  gt           lt  li gt           lt li class  twoColumnPart  gt               lt label for  email  gt Email lt  label gt               lt input id  email  type  text  value    name  email  gt           lt  li gt           lt li gt               lt label for  subject  gt Subject lt  label gt               lt input id  subject  type  text  value    name  subject  gt           lt  li gt           lt li gt               lt label for  message  gt Message lt  label gt               lt textarea id  message  type  text  name  message  gt  lt  textarea gt           lt  li gt       lt  ul gt   lt  form gt

User · Answer

10 minutes ago i had the same problem of place label above input  then i got a small ugly resolution   lt form gt       lt h4 gt  lt label for  male  gt Male lt  label gt  lt  h4 gt       lt input type  radio  name  sex  id  male  value  male  gt   lt  form gt    The disadvantage is that there is a big blank space between the label and input  of course you can adjust the css  Demo at  http   jsfiddle net bqkawjs5

User · Answer

I d make both the input and label elements display  block   and then split the name label  amp  input  and the email label  amp  input into div s and float them next to each other    x000D   x000D  input  label   x000D      display block  x000D    x000D   lt form name  message  method  post  gt  x000D       lt section gt  x000D   x000D     lt div style  float left margin-right 20px   gt  x000D       lt label for  name  gt Name lt  label gt  x000D       lt input id  name  type  text  value    name  name  gt  x000D     lt  div gt  x000D   x000D     lt div style  float left   gt  x000D       lt label for  email  gt Email lt  label gt  x000D       lt input id  email  type  text  value    name  email  gt  x000D     lt  div gt  x000D   x000D     lt br style  clear both     gt  x000D   x000D       lt  section gt  x000D   x000D       lt section gt  x000D   x000D       lt label for  subject  gt Subject lt  label gt  x000D       lt input id  subject  type  text  value    name  subject  gt  x000D       lt label for  message  gt Message lt  label gt  x000D       lt input id  message  type  text  value    name  message  gt  x000D   x000D       lt  section gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

You could try something like   lt form name  message  method  post  gt       lt section gt       lt div gt         lt label for  name  gt Name lt  label gt         lt input id  name  type  text  value    name  name  gt       lt  div gt       lt div gt         lt label for  email  gt Email lt  label gt         lt input id  email  type  text  value    name  email  gt       lt  div gt       lt  section gt       lt section gt       lt div gt         lt label for  subject  gt Subject lt  label gt         lt input id  subject  type  text  value    name  subject  gt       lt  div gt       lt div class  full  gt         lt label for  message  gt Message lt  label gt         lt input id  message  type  text  value    name  message  gt       lt  div gt       lt  section gt   lt  form gt    and then css it like  form   width  400px    form section div   float  left    form section div full   clear  both    form section div label   display  block

User · Answer

I know this is an old one with an accepted answer  and that answer works great   IF you are not styling the background and floating the final inputs left  If you are  then the form background will not include the floated input fields   To avoid this make the divs with the smaller input fields inline-block rather than float left   This    lt div style  display inline-block margin-right 20px   gt       lt label for  name  gt Name lt  label gt       lt input id  name  type  text  value    name  name  gt   lt  div gt    Rather than    lt div style  float left margin-right 20px   gt       lt label for  name  gt Name lt  label gt       lt input id  name  type  text  value    name  name  gt   lt  div gt

User · Answer

There is no need to add any extra div wrapper as others suggest  The simplest way is to wrap your input element inside a related label tag and set input style to display block  Bonus point earned  now you don t need to set the labels for attribute  Because every label target the nested input   lt form name  quot message quot  method  quot post quot  gt       lt section gt           lt label class  quot left quot  gt              Name              lt input id  quot name quot  type  quot text quot  name  quot name quot  gt           lt  label gt           lt label class  quot right quot  gt              Email              lt input id  quot email quot  type  quot text quot  name  quot email quot  gt           lt  label gt       lt  section gt   lt  form gt   https   jsfiddle net Tomanek1 sguh5k17 15

[html] Styling Form with Label above Inputs

Examples related to html

Examples related to css