How to make label and input appear on the same line on an HTML form

Question

I am creating a registration form for a website  I want each label and its corresponding input element to appear on the same line    Here s my code    x000D   x000D   form   x000D   background-color   FFF  x000D   height  600px  x000D   width  600px  x000D   margin-right  auto  x000D   margin-left  auto  x000D   margin-top  0px  x000D   border-top-left-radius  10px  x000D   border-top-right-radius  10px  x000D   padding  0px  x000D    x000D   x000D  label   x000D   font-family  Georgia   Times New Roman   Times  serif  x000D   font-size  18px  x000D   color   333  x000D   height  20px  x000D   width  200px  x000D   margin-top  10px  x000D   margin-left  10px  x000D   text-align  right  x000D   clear  both  x000D    x000D   x000D  input   x000D   height  20px  x000D   width  300px  x000D   border  1px solid  000  x000D   margin-top  10px  x000D   float  left  x000D    x000D   lt div id  form  gt  x000D   x000D    lt form action    method  post  name  registration  class  register  gt  x000D     x000D     lt fieldset gt  x000D   x000D      lt label for  Student  gt  Name   lt  label gt  x000D      lt input name  Student    gt  x000D      lt label for  Matric no  gt  Matric number   lt  label gt  x000D      lt input name  Matric no    gt  x000D      lt label for  Email  gt  Email   lt  label gt  x000D      lt input name  Email    gt  x000D      lt label for  Username  gt  Username   lt  label gt  x000D      lt input name  Username    gt  x000D      lt label for  Password  gt  Password   lt  label gt  x000D      lt input name  Password  type  password    gt  x000D      x000D      lt input name  regbutton  type  button  class  button  value  Register    gt  x000D     lt  fieldset gt  x000D   x000D    lt  form gt  x000D   lt  div gt    x000D   x000D   x000D

User · Answer

I am using Angular 6 with Bootstrap 4 and find this way works    lt div class  form-group row  gt       lt div class  col-md-2  gt           lt label for  currentPassword  gt Current Password  lt  label gt       lt  div gt       lt div class  col-md-6  gt           lt input type  password  id  currentPassword  gt       lt  div gt   lt  div gt

User · Answer

What you were missing was the float  left  here is an example just done in the HTML   lt div id  form  gt   lt form action    method  post  name  registration  class  register  gt       lt fieldset gt           lt label for  Student  style  float  left  gt Name  lt  label gt           lt input name  Student    gt           lt label for  Matric no  style  float  left  gt Matric number  lt  label gt           lt input name  Matric no    gt           lt label for  Email  style  float  left  gt Email  lt  label gt           lt input name  Email    gt           lt label for  Username  style  float  left  gt Username  lt  label gt           lt input name  Username    gt           lt label for  Password  style  float  left  gt Password  lt  label gt           lt input name  Password  type  password    gt           lt input name  regbutton  type  button  class  button  value  Register    gt       lt  fieldset gt   lt  form gt      The more efficient way to do this is to add a class to the labels and set the float  left  to the class in CSS

User · Answer

I found  display flex  style is a good way to make these elements in same line  No matter what kind of element in the div  Especially if the input class is form-control other solutions like bootstrap  inline-block will not work well   Example    lt div style  display flex  flex-direction  row  justify-content  center  align-items  center  gt       lt label for  Student  gt Name  lt  label gt       lt input name  Student    gt   lt  div gt    More detail about display flex   flex-direction    row  column  justify-content   flex-end  center  space-between  space-around  align-items       stretch  flex-start  flex-end  center

User · Answer

Wrap the label and the input within a bootstraps div    lt div class   row  gt     lt div class  col-md-4  gt Name  lt  div gt     lt div class  col-md-8  gt  lt input type  text  gt  lt  div gt   lt  div gt

User · Answer

Aside from using floats  as others have suggested  you can also rely on a framework such as Bootstrap where you can use the  horizontal-form  class to have the label and input on the same line    If you re unfamiliar with Bootstrap  you would need to include    the link to the Bootstrap CSS  the top link where it says  lt  -- Latest compiled and minified CSS --     in the head  as well as add some divs   div class  form-group  div class  col-      along with class  col-sm-2 control-label  in each label  as Bootstrap shows  which I included below  I also reformatted your button so it s Bootstrap compliant  and added a legend  to your form box  since you were using a fieldset    It s very straight forward and you wouldn t have to mess with floats or a ton of CSS for formatting  as you listed above      lt div id  form  gt       lt div class  row  gt         lt form action    method  post  name  registration  class  register form-horizontal  gt           lt fieldset gt           lt legend gt Address Form lt  legend gt          lt div class  form-group  gt           lt label for  Student  class  col-sm-2 control-label  gt Name  lt  label gt             lt div class  col-sm-6  gt               lt input name  Student  class  form-control  gt             lt  div gt         lt  div gt          lt div class  form-group  gt           lt label for  Matric no  class  col-sm-2 control-label  gt Matric number   lt  label gt             lt div class  col-sm-6  gt               lt input name  Matric no  class  form-control  gt             lt  div gt         lt  div gt          lt div class  form-group  gt           lt label for  Email  class  col-sm-2 control-label  gt Email   lt  label gt             lt div class  col-sm-6  gt               lt input name  Email  class  form-control  gt             lt  div gt         lt  div gt          lt div class  form-group  gt           lt label for  Username  class  col-sm-2 control-label  gt Username   lt  label gt             lt div class  col-sm-6  gt               lt input name  Username  class  form-control  gt             lt  div gt         lt  div gt          lt div class  form-group  gt           lt label for  Password  class  col-sm-2 control-label  gt Password   lt  label gt             lt div class  col-sm-6  gt               lt input name  Password  type  password  class  form-control  gt             lt  div gt         lt  div gt          lt div gt           lt button class  btn btn-info  name  regbutton  value  Register  gt Submit lt  button gt         lt  div gt          lt  fieldset gt       lt  form gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

Assuming you want to float the elements  you would also have to float the label elements too   Something like this would work   label          Other styling           text-align  right      clear  both      float left      margin-right 15px       x000D   x000D   form   x000D      background-color   FFF  x000D      height  600px  x000D      width  600px  x000D      margin-right  auto  x000D      margin-left  auto  x000D      margin-top  0px  x000D      border-top-left-radius  10px  x000D      border-top-right-radius  10px  x000D      padding  0px  x000D      text-align center  x000D    x000D  label   x000D      font-family  Georgia   Times New Roman   Times  serif  x000D      font-size  18px  x000D      color   333  x000D      height  20px  x000D      width  200px  x000D      margin-top  10px  x000D      margin-left  10px  x000D      text-align  right  x000D      clear  both  x000D      float left  x000D      margin-right 15px  x000D    x000D  input   x000D      height  20px  x000D      width  300px  x000D      border  1px solid  000  x000D      margin-top  10px  x000D      float  left  x000D    x000D  input type button    x000D      float none  x000D    x000D   lt div id  form  gt  x000D       lt form action    method  post  name  registration  class  register  gt  x000D           lt fieldset gt  x000D               lt label for  Student  gt Name  lt  label gt  x000D               lt input name  Student  id  Student    gt  x000D               lt label for  Matric no  gt Matric number  lt  label gt  x000D               lt input name  Matric no  id  Matric no    gt  x000D               lt label for  Email  gt Email  lt  label gt  x000D               lt input name  Email  id  Email    gt  x000D               lt label for  Username  gt Username  lt  label gt  x000D               lt input name  Username  id  Username    gt  x000D               lt label for  Password  gt Password  lt  label gt  x000D               lt input name  Password  id  Password  type  password    gt  x000D               lt input name  regbutton  type  button  class  button  value  Register    gt  x000D           lt  fieldset gt  x000D       lt  form gt  x000D   lt  div gt  x000D   x000D   x000D    Alternatively  a more common approach would be to wrap the input label elements in groups    lt div class  form-group  gt       lt label for  Student  gt Name  lt  label gt       lt input name  Student  id  Student    gt   lt  div gt     x000D   x000D   form   x000D      background-color   FFF  x000D      height  600px  x000D      width  600px  x000D      margin-right  auto  x000D      margin-left  auto  x000D      margin-top  0px  x000D      border-top-left-radius  10px  x000D      border-top-right-radius  10px  x000D      padding  0px  x000D      text-align center  x000D    x000D  label   x000D      font-family  Georgia   Times New Roman   Times  serif  x000D      font-size  18px  x000D      color   333  x000D      height  20px  x000D      width  200px  x000D      margin-top  10px  x000D      margin-left  10px  x000D      text-align  right  x000D      margin-right 15px  x000D      float left  x000D    x000D  input   x000D      height  20px  x000D      width  300px  x000D      border  1px solid  000  x000D      margin-top  10px  x000D    x000D   lt div id  form  gt  x000D       lt form action    method  post  name  registration  class  register  gt  x000D           lt fieldset gt  x000D               lt div class  form-group  gt  x000D                   lt label for  Student  gt Name  lt  label gt  x000D                   lt input name  Student  id  Student    gt  x000D               lt  div gt  x000D               lt div class  form-group  gt  x000D                   lt label for  Matric no  gt Matric number  lt  label gt  x000D                   lt input name  Matric no  id  Matric no    gt  x000D               lt  div gt  x000D               lt div class  form-group  gt  x000D                   lt label for  Email  gt Email  lt  label gt  x000D                   lt input name  Email  id  Email    gt  x000D               lt  div gt  x000D               lt div class  form-group  gt  x000D                   lt label for  Username  gt Username  lt  label gt  x000D                   lt input name  Username  id  Username    gt  x000D               lt  div gt  x000D               lt div class  form-group  gt  x000D                   lt label for  Password  gt Password  lt  label gt  x000D                   lt input name  Password  id  Password  type  password    gt  x000D               lt  div gt  x000D               lt input name  regbutton  type  button  class  button  value  Register    gt  x000D           lt  fieldset gt  x000D       lt  form gt  x000D   lt  div gt  x000D   x000D   x000D    Note that the for attribute should correspond to the id of a labelable element  not its name  This will allow users to click the label to give focus to the corresponding form element

User · Answer

Another option is to place a table inside the form   see below  I know tables are frowned upon by some people but I think they work nicely when it comes to responsive form layouts    lt FORM METHOD  POST  ACTION  http   www cs tut fi cgi-bin run  jkorpela echo cgi  gt   lt TABLE BORDER  1  gt     lt TR gt       lt TD gt Your name lt  TD gt       lt TD gt         lt INPUT TYPE  TEXT  NAME  name  SIZE  20  gt       lt  TD gt     lt  TR gt     lt TR gt       lt TD gt Your E-mail address lt  TD gt       lt TD gt  lt INPUT TYPE  TEXT  NAME  email  SIZE  25  gt  lt  TD gt     lt  TR gt   lt  TABLE gt   lt P gt  lt INPUT TYPE  SUBMIT  VALUE  Submit  NAME  B1  gt  lt  P gt   lt  FORM gt

User · Answer

This thing works well It put radio button or checkbox with label in same line without any css    lt label gt  lt input type  radio  value  new  name  filter  gt NEW lt  label gt   lt label gt  lt input type  radio  value  wow  name  filter  gt WOW lt  label gt

User · Answer

aaa  HTML I would suggest you wrap them in a div  since you will likely end up floating them in certain contexts   lt div class  quot input-w quot  gt       lt label for  quot your-input quot  gt Your label lt  label gt       lt input type  quot text quot  id  quot your-input quot    gt   lt  div gt    CSS Then within that div  you can make each piece inline-block so that you can use vertical-align to center them - or set baseline etc   your labels and input might change sizes in the future     input-w label   input-w input       float  none     if you had floats before  otherwise inline-block will behave differently        display  inline-block      vertical-align  middle         jsFiddle UPDATE  mid 2016   with mobile-first media queries and flex-box This is how I do things these days  HTML  lt label class  input-w  for  this-input-name  gt     lt span class  label  gt Your label lt  span gt     lt input class  input  type  text  id  this-input-name  placeholder  hello  gt   lt  label gt    lt label class  input-w  for  this-other-input-name  gt     lt span class  label  gt Your label lt  span gt     lt input class  input  type  text  id  this-other-input-name  placeholder  again  gt   lt  label gt    SCSS html      https   www paulirish com 2012 box-sizing-border-box-ftw    box-sizing  border-box         before    after       box-sizing  inherit           if you don t already reset your box-model  read about it   input-w     display  block    width  100      should be contained by a form or something   margin-bottom  1rem     media  min-width  500px        display  flex      flex-direction  row      align-items  center         label   input       display  block      width  100       border  1px solid rgba 0 0 0  1        media  min-width  500px          width  auto        display  flex               label       font-size  13px       media  min-width  500px             margin-right  1rem           min-width  100px     maybe to match many               input       padding   5rem      font-size  16px       media  min-width  500px          flex-grow  1        max-width  450px     arbitrary              jsFiddle

User · Answer

For Bootstrap 4 it could be done with class  form-group  style  display  flex     lt div class  form-group  style  display  flex  gt       lt label gt Topjava comment  lt  label gt       lt input class  form-control  type  checkbox   gt   lt  div gt

User · Answer

x000D   x000D   form   x000D      background-color   FFF  x000D      height  600px  x000D      width  600px  x000D      margin-right  auto  x000D      margin-left  auto  x000D      margin-top  0px  x000D      border-top-left-radius  10px  x000D      border-top-right-radius  10px  x000D      padding  0px  x000D      text-align center  x000D    x000D  label   x000D      font-family  Georgia   Times New Roman   Times  serif  x000D      font-size  18px  x000D      color   333  x000D      height  20px  x000D      width  200px  x000D      margin-top  10px  x000D      margin-left  10px  x000D      text-align  right  x000D      margin-right 15px  x000D      float left  x000D    x000D  input   x000D      height  20px  x000D      width  300px  x000D      border  1px solid  000  x000D      margin-top  10px  x000D    x000D   lt div id  form  gt  x000D       lt form action    method  post  name  registration  class  register  gt  x000D           lt fieldset gt  x000D               lt div class  form-group  gt  x000D                   lt label for  Student  gt Name  lt  label gt  x000D                   lt input name  Student    gt  x000D               lt  div gt  x000D               lt div class  form-group  gt  x000D                   lt label for  Matric no  gt Matric number  lt  label gt  x000D                   lt input name  Matric no    gt  x000D               lt  div gt  x000D               lt div class  form-group  gt  x000D                   lt label for  Email  gt Email  lt  label gt  x000D                   lt input name  Email    gt  x000D               lt  div gt  x000D               lt div class  form-group  gt  x000D                   lt label for  Username  gt Username  lt  label gt  x000D                   lt input name  Username    gt  x000D               lt  div gt  x000D               lt div class  form-group  gt  x000D                   lt label for  Password  gt Password  lt  label gt  x000D                   lt input name  Password  type  password    gt  x000D               lt  div gt  x000D               lt input name  regbutton  type  button  class  button  value  Register    gt  x000D           lt  fieldset gt  x000D       lt  form gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I ve done this several different ways but the only way I ve found that keeps the labels and corresponding text input data on the same line and always wraps perfectly to the width of the parent is to use display inline table   CSS   container     display  inline-table    padding-right  14px    margin-top 5px    margin-bottom 5px     fieldName     display  table-cell    vertical-align  middle    padding-right  4px     data     display  table-cell      HTML   lt div class  container  gt       lt div class  fieldName  gt           lt label gt Student lt  label gt       lt  div gt       lt div class  data  gt           lt input name  Student    gt       lt  div gt   lt  div gt   lt div class  container  gt       lt div class  fieldName  gt           lt label gt Email lt  label gt       lt  div gt       lt div class  data  gt         lt input name  Email    gt       lt  div gt   lt  div gt

[html] How to make <label> and <input> appear on the same line on an HTML form?

Examples related to html

Examples related to css

Examples related to forms