HTML form with side by side input fields

Question

I have a html form that is basically vertical but i really have no idea how to make two text fields on the same line  For example the following form below i want the First and Last name on the same line rather then one below the other        lt form action   users  method  post  gt  lt div style  margin 0 padding 0  gt                 lt div gt                   lt label for  username  gt First Name lt  label gt                   lt input id  user first name  name  user first name   size  30  type  text    gt                lt  div gt                lt div gt                   lt label for  name  gt Last Name lt  label gt                   lt input id  user last name  name  user last name   size  30  type  text    gt               lt  div gt               lt div gt                   lt label for  email  gt Email lt  label gt                   lt input id  user email  name  user email   size  30  type  text    gt               lt  div gt               lt div gt                   lt label for  pass1  gt Password lt  label gt                   lt input id  user password  name  user password   size  30  type  password    gt               lt  div gt               lt div gt                   lt label for  pass2  gt Confirm Password lt  label gt                    lt input id  user password confirmation  name  user password confirmation   size  30  type  password    gt                lt  div gt

User · Accepted Answer

The default display style for a div is  block   This means that each new div will be under the prior one   You can   Override the flow style by using float as  Sarfraz suggests   or  Change your html to use something other than divs for elements you want on the same line  I suggest that you just leave out the divs for the  last name  field   lt form action   users  method  post  gt  lt div style  margin 0 padding 0  gt     lt div gt       lt label for  username  gt First Name lt  label gt       lt input id  user first name  name  user first name   size  30  type  text    gt        lt label for  name  gt Last Name lt  label gt       lt input id  user last name  name  user last name   size  30  type  text    gt     lt  div gt        rest is same

User · Answer

You should put the input for the last name into the same div where you have the first name                lt div gt       lt label for  username  gt First Name lt  label gt       lt input id  user first name  name  user first name   size  30  type  text    gt       lt input id  user last name  name  user last name   size  30  type  text    gt   lt  div gt    Then  in your CSS give your  user first name and  user last name height and float them both to the left  For example    user first name      max-width 100px    max-width for responsiveness       float left      user lastname name      max-width 100px      float left

User · Answer

Put style  float left  on each of your divs    lt div style  float left   gt               Example    lt div style  float left   gt     lt label for  username  gt First Name lt  label gt     lt input id  user first name  name  user first name   size  30  type  text    gt   lt  div gt    lt div style  float left   gt     lt label for  name  gt Last Name lt  label gt     lt input id  user last name  name  user last name   size  30  type  text    gt   lt  div gt    To put an element on new line  put this div below it    lt div style  clear both   gt  amp nbsp  lt  div gt    Of course  you can also create classes in the CSS file    left    float left      clear    clear both      And then your html should look like this    lt div class  left  gt     lt label for  username  gt First Name lt  label gt     lt input id  user first name  name  user first name   size  30  type  text    gt   lt  div gt    lt div class  left  gt     lt label for  name  gt Last Name lt  label gt     lt input id  user last name  name  user last name   size  30  type  text    gt   lt  div gt    To put an element on new line  put this div below it    lt div class  clear  gt  amp nbsp  lt  div gt    More Info    CSS Float Clear Tutorial

User · Answer

For the sake of bandwidth saving  we shouldn t include  lt div gt  for each of  lt label gt  and  lt input gt  pair  This solution may serve you better and may increase readability   lt div class  form  gt               lt label for  product name  gt Name lt  label gt               lt input id  product name  name  product name   size  30  type  text  value  4  gt               lt label for  product stock  gt Stock lt  label gt               lt input id  product stock  name  product stock   size  30  type  text  value  -1  gt               lt label for  price amount  gt Amount lt  label gt               lt input id  price amount  name  price amount   size  30  type  text  value  6 0  gt   lt  div gt    The css for above form would be   form  gt  label     float  left    clear  right      form  gt  input     float  right      I believe the output would be as following

User · Answer

You could use the  display  inline-flex   this would produce this  inline-flex

User · Answer

I would go with Larry K s solution  but you can also set the display to inline-block if you want the benefits of both block and inline elements   You can do this in the div tag by inserting   style  display inline-block     Or in a CSS stylesheet with this method   div   display inline-block      Hope it helps  but as earlier mentioned  I would personally go for Larry K s solution  -

[html] HTML form with side by side input fields

Examples related to html

Examples related to css

Examples related to forms