Label and Input Fields on the Same Line

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

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;
}

#form {    background-color: #FFF;    height: 600px;    width: 600px;    margin-right: auto;    margin-left: auto;    margin-top: 0px;    border-top-left-radius: 10px;    border-top-right-radius: 10px;    padding: 0px;    text-align:center;}label {    font-family: Georgia, "Times New Roman", Times, serif;    font-size: 18px;    color: #333;    height: 20px;    width: 200px;    margin-top: 10px;    margin-left: 10px;    text-align: right;    clear: both;    float:left;    margin-right:15px;}input {    height: 20px;    width: 300px;    border: 1px solid #000;    margin-top: 10px;    float: left;}input[type=button] {    float:none;}

<div id="form">    <form action="" method="post" name="registration" class="register">        <fieldset>            <label for="Student">Name:</label>            <input name="Student" id="Student" />            <label for="Matric_no">Matric number:</label>            <input name="Matric_no" id="Matric_no" />            <label for="Email">Email:</label>            <input name="Email" id="Email" />            <label for="Username">Username:</label>            <input name="Username" id="Username" />            <label for="Password">Password:</label>            <input name="Password" id="Password" type="password" />            <input name="regbutton" type="button" class="button" value="Register" />        </fieldset>    </form></div>

Label and Input fields on same line

Your code already tries to put both the label and the input on the same line, but your input's width: 90% makes it too large, so it goes on another line. Try reducing your input's width and it will work.
For example, try reducing your inputs' width to 70% and put your labels' width to 160px instead of 40px.

How do I align Label and Input on the same line to the right?

Keep in mind, that label is an inline element similar to span, so you need to set its css to display: inline-block to behave like a div

once you have done this, the easiest way to have them in the same line is to use display:flex and flex-wrap: nowrap on the parent div.

here is my favorite flex-cheat-sheet

I have simplified your example and you can see how this works clicking below on Run code snippet.

.pull-right {  display: flex;  flex-wrap: nowrap;}
.pull-right input{  border: 1px solid green;}.pull-right label{ border: 1px solid red; display: inline-block;}

<div class="pull-right">  <div class="search" style="height: 18px" ng-if="vm.showSearch()">    <form style="margin:0px" name="filter_actions" novalidate>      <div>        <input id="freeTextSearch" type="text"         class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)"         ng-model="Search"         style="text-indent: 5px;" minlength="1"         ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">        <a ng-show="Search"         ng-click="localSearch = ''; vm.filterTable(localSearch)">        <i style="vertical-align: middle; top:4px; right:35px; position: absolute"         class="glyphicon glyphicon-remove">      </i></a>      </div>    </form>  </div>  <div class="btn-group btn-group-xs" role="group" aria-label="...">    <label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;">your icons</i></label>  </div></div>

How do I make a <label> stay on the same line as it's <form>

It's easy, wrap your label and input inside a div and use flex.

https://www.w3schools.com/css/css3_flexbox.asp

Check the code below:

.label-wrap{
  display:flex;
}

<div class='label-wrap'>
  <label for="min">Minimum:</label><br>
  <input type="number" id="min" name="min" class="form-control" value="1">
</div>

Sample Image

label and input box on the same line

Do it with CSS:

label { clear: both; }

Put a <label> and <input type="text"> tag in the same row

Solution

House both label and input into a single div
Add display: flex to the parent so you can have more flexibility styling your fields on small screens. For example, you could move the label above the input on small screens when viewport space is limited using flex-direction: column
labels typically don't have ids. Instead, they point to form elements containing ids. I've fixed your labels in the following code
Duplicate ids are a no-no as well (also fixed)

.row {  display: flex;  align-items: center;  justify-content: flex-end;}
.input-field {  margin-left: 1em;  padding: .5em;  margin-bottom: .5em;}

<form id="survey-form">  <div class="row">    <label for="name">* Name:</label>    <input type="text" id="name" class="input-field" required placeholder="Enter your name">        </div>
  <div class="row">    <label for="email">* Email:</label>    <input type="email" id="email" class="input-field" required placeholder="Enter your email">      </div></form>

How to align the label and the input at the same line in Bootstrap 5?

<!DOCTYPE html>
<html>
  <head>
    <title>HTML CSS JS</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <div class="container pt-5">
      <form (ngSubmit)="login()">
      <div class="mb-3">
      <div class="d-inline-flex align-items-center">
          <label for="exampleInputEmail1" class="form-label" style="min-width: 100px !important">User</label>
          <input type="text" class="form-control" name="exampleInputEmail1" style="width: 40%" aria-describedby="emailHelp" [(ngModel)]="loginForm.user" required maxlength="4">
          
        </div>
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
      </div>
        
        
        <div class="mb-3">     
        <div class="d-inline-flex align-items-center">
          <label for="exampleInputPassword1" class="form-label" style="min-width: 100px !important">Password</label>
          <input type="password" class="form-control" name="exampleInputPassword1" style="width: 40%" [(ngModel)]="loginForm.password" required maxlength="4">
        </div>
        </div>
        
        <button type="submit" class="btn btn-primary">Connection</button>
      </form>
    </div>
  </body>
</html>

How can I put an input element on the same line as its label?

It's possible without JavaScript, see: http://jsfiddle.net/Khmhk/

This works in IE7+ and all modern browsers.

HTML:

<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>

CSS:

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

The reason why overflow: hidden is so magically useful in this instance is explained here.

display: table-cell is another option, see: http://jsfiddle.net/Khmhk/1/

This works in IE8+ and all modern browsers:

HTML:

<div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div>

CSS:

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}

label and input in same line on form-group

The col-sm-2 shouldn't be nested directly in col-md-12. Use the grid like this...

https://www.codeply.com/go/Gdt1BZs9Hg

<form class="col-12">
  <div class="form-row">
     <label class="col-sm-2 col-form-label"  for="name">Name</label>
     <input type="text" class="form-control col-sm-10" name="name" id="name" [(ngModel)]="person.name" disabled/>
  </div>
</form>

Notice that form-row must used to contain the col-. The col-sm-10 controls the width of the input, so you can change that as needed. Read more in the docs: https://getbootstrap.com/docs/4.0/components/forms/#form-grid

Also, note the correct use of the grid row > columns from the Bootstrap docs...

In a grid layout, content must be placed within columns and only
columns may be immediate children of rows... You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

How to put label and input box on the same line using bootstrap?

Use form-inline and remove the extra markup around the labels and inputs..

<form method="post" action="" class="form-inline">
    <label for="input01">Text input</label>
    <input type="text" class="form-control-static" id="input01">
    <label class="control-label" for="input01">Text input</label>
    <input type="text" class="input-xlarge" id="input01"> 
    <label class="control-label" for="input01">Text input</label>   
    <input type="text" class="input-xlarge" id="input01">          
</form>

http://www.bootply.com/7BrrI0uZiH

From the 2.x docs: http://getbootstrap.com/2.3.2/base-css.html#forms