How to align input forms in HTML

Question

I m new to HTML and I m trying to learn how to use forms   The biggest issue I am having so far is aligning the forms  Here is an example of my current HTML file    lt form gt   First Name  lt input type  text  name  first  gt  lt br   gt   Last Name  lt input type  text  name  last  gt  lt br   gt   Email  lt input type  text  name  email  gt  lt br   gt   lt  form gt    The problem with this is  the field box after  Email  is drastically different in terms of spacing compared to first  and last name  What is the  proper  way to make it so that they  line-up  essentially   I am trying to practice good form and syntax   a lot of people might do this with CSS I am not sure  I have only learned the very basics of HTML so far

User · Answer

A simple solution for you if you re new to HTML  is just to use a table to line everything up    lt form gt     lt table gt       lt tr gt         lt td align  right  gt First Name  lt  td gt         lt td align  left  gt  lt input type  text  name  first    gt  lt  td gt       lt  tr gt       lt tr gt         lt td align  right  gt Last Name  lt  td gt         lt td align  left  gt  lt input type  text  name  last    gt  lt  td gt       lt  tr gt       lt tr gt         lt td align  right  gt Email  lt  td gt         lt td align  left  gt  lt input type  text  name  email    gt  lt  td gt       lt  tr gt     lt  table gt   lt  form gt

User · Answer

The accepted answer  setting an explicit width in pixels  makes it hard to make changes  and breaks when your users use a different font size  Using CSS tables  on the other hand  works great    x000D   x000D  form    display  table         x000D  p       display  table-row     x000D  label   display  table-cell    x000D  input   display  table-cell    x000D   lt form gt  x000D     lt p gt  x000D       lt label for  a  gt Short label  lt  label gt  x000D       lt input id  a  type  text  gt  x000D     lt  p gt  x000D     lt p gt  x000D       lt label for  b  gt Very very very long label  lt  label gt  x000D       lt input id  b  type  text  gt  x000D     lt  p gt  x000D   lt  form gt  x000D   x000D   x000D    Here s a JSFiddle  http   jsfiddle net DaS39 1   And if you need the labels right-aligned  just add text-align  right to the labels  http   jsfiddle net DaS39     EDIT  One more quick note  CSS tables also let you play with columns  for example  if you want to make the input fields take as much space as possible  you can add the following in your form   lt div style  display  table-column   gt  lt  div gt   lt div style  display  table-column  width 100    gt  lt  div gt    you may want to add white-space  nowrap to the labels in that case

User · Answer

I m a big fan of using definition lists    lt dl gt   lt dt gt Username  lt  dt gt   lt dd gt  lt input type  text  name  username    gt  lt  dd gt   lt dt gt Password  lt  dt gt   lt dd gt  lt input type  password  name  password    gt  lt  dd gt   lt  dl gt    They re easy to style using CSS  and they avoid the stigma of using tables for layout

User · Answer

Insert input tags inside an unordered lists Make the style-type none  Here s an example    lt ul gt  Input1       lt li gt   lt input type  text    gt  Input2  lt li gt   lt input type  text    gt   lt ul  gt    Worked for me

User · Answer

I find it far easier to change the display of the labels to inline-block and set a width  label       display  inline-block      width 100px      text-align  right

User · Answer

Cl  ment s answer is by far the best  Here s a somewhat improved answer  showing different possible alignments  including left-center-right aligned buttons    x000D   x000D  label x000D    padding-right 8px  x000D    x000D   x000D   FAligned  FAlignIn x000D    display table  x000D    x000D   x000D   FAlignIn x000D    width 100   x000D    x000D   x000D   FRLeft  FRRight  FRCenter x000D    display table-row  x000D   white-space nowrap  x000D    x000D   x000D   FCLeft  FCRight  FCCenter x000D    display table-cell  x000D    x000D   x000D   FRLeft  FCLeft  FILeft x000D    text-align left  x000D    x000D   x000D   FRRight  FCRight  FIRight x000D    text-align right  x000D    x000D   x000D   FRCenter  FCCenter  FICenter x000D    text-align center  x000D    x000D   lt form class  FAligned  gt  x000D    lt div class  FRLeft  gt  x000D     lt p class  FRLeft  gt  x000D      lt label for  Input0  class  FCLeft  gt Left  lt  label gt  x000D      lt input id  Input0  type  text  size  30   placeholder  Left Left Left  class  FILeft   gt  x000D     lt  p gt  x000D     lt p class  FRLeft  gt  x000D      lt label for  Input1  class  FCRight  gt Left Right Left  lt  label gt  x000D      lt input id  Input1  type  text  size  30   placeholder  Left Right Left  class  FILeft   gt  x000D     lt  p gt  x000D     lt p class  FRRight  gt  x000D      lt label for  Input2  class  FCLeft  gt Right Left Left  lt  label gt  x000D      lt input id  Input2  type  text  size  30   placeholder  Right Left Left  class  FILeft   gt  x000D     lt  p gt  x000D     lt p class  FRRight  gt  x000D      lt label for  Input3  class  FCRight  gt Right Right Left  lt  label gt  x000D      lt input id  Input3  type  text  size  30   placeholder  Right Right Left  class  FILeft   gt  x000D     lt  p gt  x000D     lt p class  FRLeft  gt  x000D      lt label for  Input4  class  FCLeft  gt Left Left Right  lt  label gt  x000D      lt input id  Input4  type  text  size  30   placeholder  Left Left Right  class  FIRight   gt  x000D     lt  p gt  x000D     lt p class  FRLeft  gt  x000D      lt label for  Input5  class  FCRight  gt Left Right Right  lt  label gt  x000D      lt input id  Input5  type  text  size  30   placeholder  Left Right Right  class  FIRight   gt  x000D     lt  p gt  x000D     lt p class  FRRight  gt  x000D      lt label for  Input6  class  FCLeft  gt Right Left Right  lt  label gt  x000D      lt input id  Input6  type  text  size  30   placeholder  Right Left Right  class  FIRight   gt  x000D     lt  p gt  x000D     lt p class  FRRight  gt  x000D      lt label for  Input7  class  FCRight  gt Right  lt  label gt  x000D      lt input id  Input7  type  text  size  30   placeholder  Right Right Right  class  FIRight   gt  x000D     lt  p gt  x000D     lt p class  FRCenter  gt  x000D      lt label for  Input8  class  FCCenter  gt And centralised is also possible  lt  label gt  x000D      lt input id  Input8  type  text  size  60   placeholder  Center in the centre  class  FICenter   gt  x000D     lt  p gt  x000D    lt  div gt  x000D    lt div class  FAlignIn  gt  x000D     lt div class  FRCenter  gt  x000D      lt div class  FCLeft  gt  lt button type  button  gt Button on the Left lt  button gt  lt  div gt  x000D      lt div class  FCCenter  gt  lt button type  button  gt Button on the Centre lt  button gt  lt  div gt  x000D      lt div class  FCRight  gt  lt button type  button  gt Button on the Right lt  button gt  lt  div gt  x000D     lt  div gt  x000D    lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    I added some padding on the right of all labels  padding-right 8px  just to make the example slight less horrible looking  but that should be done more carefully in a real project  adding padding to all other elements would also be a good idea

User · Answer

For this  I prefer to keep a correct HTML semantic  and to use a CSS simple as possible   Something like this would do the job     label    display  block    float  left    width   120px          One drawback however   you might have to pick the right label width for each form  and this is not easy if your labels can be dynamic  I18N labels for instance

User · Answer

You should use a table  As a matter of logical structure the data is tabular  this is why you want it to align  because you want to show that the labels are not related solely to their input boxes but also to each other  in a two-dimensional structure     consider what you would do if you had string or numeric values to display instead of input boxes

User · Answer

It also can be done using CSS and without tables or floats or fixed lengths by changing the content direction to rtl and then back to ltr  but the labels must go after each input  To avoid this markup reordering  just set the label s text in a data-  attribute and show it using an   after pseudo-element  I think it becomes much clearer  Here is an example setting the label s text in a custom attribute called data-text and showing them using the   after pseudo-element  so we don t mess with markup while changing direction to rtl and ltr    x000D   x000D  form     display  inline-block    background-color  gold    padding  6px     label    display  block    direction  rtl      input    direction  ltr      label  after    content  attr data-text     x000D   lt form gt     lt label data-text  First Name  gt       lt input type  text    gt     lt  label gt     lt label data-text  Last Name  gt       lt input type  text    gt     lt  label gt     lt label data-text  E-mail  gt       lt input type  text    gt     lt  label gt   lt  form gt  x000D   x000D   x000D

User · Answer

Simply add    lt form align  center  gt  lt  from gt    Just put align in opening tag

User · Answer

using css   containerdiv label     float left    width 25     text-align right    margin-right 5px     optional       containerdiv input     float left    width 65       this give you something like              label1  input box                   another label  another input box

User · Answer

Another example  this uses CSS  I simply put the form in a div with the container class  And specified that input elements contained within are to be 100  of the container width and not have any elements on either side    x000D   x000D   container   x000D    width  500px  x000D    clear  both  x000D    x000D   x000D   container input   x000D    width  100   x000D    clear  both  x000D    x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt title gt Example form lt  title gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div class  container  gt  x000D       lt form gt  x000D         lt label gt First Name lt  label gt  x000D         lt input type  text  name  first  gt  lt br   gt  x000D         lt label gt Last Name lt  label gt  x000D         lt input type  text  name  last  gt  lt br   gt  x000D         lt label gt Email lt  label gt  x000D         lt input type  text  name  email  gt  lt br   gt  x000D       lt  form gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Well for the very basics you can try aligning them in the table  However the use of table is bad for layout since table is meant for contents   What you can use is CSS floating techniques   CSS Code   styleform label float left    styleform input margin-left 200px      this gives space for the label on the left     styleform  clear clear both      prevent elements from stacking weirdly      HTML   lt div class  styleform  gt   lt form gt   lt label gt First Name  lt  label gt  lt input type  text  name  first    gt  lt div class  clear  gt  lt  div gt   lt label gt Last Name  lt  label gt  lt input type  text  name  first    gt  lt div class  clear  gt  lt  div gt   lt label gt Email  lt  label gt  lt input type  text  name  first    gt  lt div class  clear  gt  lt  div gt   lt  form gt   lt  div gt    An elaborated article I wrote can be found answering the question of IE7 float problem  IE7 float right problems

User · Answer

The traditional method is to use a table   Example    lt table gt     lt tbody gt        lt tr gt           lt td gt             First Name           lt  td gt           lt td gt              lt input type  text  name  first  gt           lt  td gt        lt  tr gt        lt tr gt           lt td gt             Last Name           lt  td gt           lt td gt              lt input type  text  name  last  gt           lt  td gt        lt  tr gt     lt  tbody gt   lt  table gt    However  many would argue that tables are restricting and prefer CSS   The benefit of using CSS is that you could use various elements  From divs  ordered and un-ordered list  you could accomplish the same layout   In the end  you ll want to use what you re most comfortable with   Hint  Tables are easy to get started with

User · Answer

I know this has already been answered  but I found a new way to align them nicely - with an extra benefit - see http   www gargan org en Web Development Form Layout with CSS   basically you use the label element around the input and align using that    lt label gt  lt span gt Name lt  span gt   lt input   gt  lt  label gt   lt label gt  lt span gt E-Mail lt  span gt   lt input   gt  lt  label gt   lt label gt  lt span gt Comment lt  span gt   lt textarea gt  lt  textarea gt  lt  label gt    and then with css you simply align   label       display block      position relative     label span       font-weight bold      position absolute      left  3px     label input  label textarea  label select       margin-left  120px           you do not need any messy br lying around for linebreaks - meaning you can quickly accomplish a multi-column layout dynamically the whole line is click-able  Especially for checkboxes this is a huge help  Dynamically showing hiding form lines is easy  you just search for the input and hide its parent -  the label  you can assign classes to the whole label making it show error input much clearer  not only around the input field

User · Answer

lt form gt       lt div gt           lt label for  username  gt UserName lt  label gt           lt input type  text  name  username  id  username  value    gt         lt  div gt   lt  form gt    In the CSS you have to declare both label and input as display  inline-block and give width according to your requirements  Hope this will help you

User · Answer

css I used to solve this problem  similar to Gjaa but styled better  p       text-align center             styleform label       float left      width  40       text-align right         styleform input       float left      width  30           Here is my HTML  used specifically for a simple registration form with no php code   lt form id  registration  gt       lt h1 gt Register lt  h1 gt       lt div class  styleform  gt       lt fieldset id  inputs  gt           lt p gt  lt label gt Name  lt  label gt              lt input id  name  type  text  placeholder  Name  autofocus required gt           lt  p gt           lt p gt  lt label gt Email  lt  label gt                lt input id  email  type  text  placeholder  Email Address  required gt           lt  p gt           lt p gt  lt label gt Username  lt  label gt             lt input id  username  type  text  placeholder  Username  autofocus required gt           lt  p gt           lt p gt                lt label gt Password  lt  label gt             lt input id  password  type  password  placeholder  Password  required gt           lt  p gt       lt  fieldset gt       lt fieldset id  actions  gt        lt  fieldset gt       lt  div gt       lt p gt             lt input type  submit  id  submit  value  Register  gt             lt  p gt    It s very simple  and I m just beginning  but it worked quite nicely

[html] How to align input forms in HTML

Examples related to html

Examples related to forms

Examples related to alignment