CODEWITHSUNDEEP
html
Fyp16
Fyp16

Reputation: 131

Text field in same line HTML

How to make multiple text fields in the same line.

This is my code:

<div class="col-lg-2">
    <div class="form-group">
        <label>Working experience</label>
        <input type="text" class="form-control  " placeholder="Year"/>Year 
        <input type="text" class="form-control " placeholder="Month"/>Month
        <input type="text" class="form-control  " placeholder="Day" />Day
    </div>            
</div>

Upvotes: 0

Views: 7167

Answers (5)

Alexander
Alexander

Reputation: 4537

You could use inline form class.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <form class="form-inline">
    <div class="form-group">
      <label>Working experience</label>
      <input type="text" class="form-control" placeholder="Year">
      <input type="text" class="form-control" placeholder="Month">
      <input type="text" class="form-control " placeholder="Day">
    </div>
  </form>

Use Expand snippet to see actual result.

Upvotes: 0

Gokul nath
Gokul nath

Reputation: 1

Use Bootstrap:

<form class="form-inline" action="/action_page.php">
  <label>Working experience : </label>
  <div class="form-group">
      <input type="text" class="form-control" id="year" placeholder="Year" name="year">
  </div>

  <div class="form-group">
      <input type="text" class="form-control" id="month" placeholder="Month" name="month">
  </div>
  <div class="form-group">
      <input type="text" class="form-control" id="day" placeholder="Day" name="day">
  </div>
</form>

Upvotes: 0

Nishan256
Nishan256

Reputation: 97

You can try this way too.

<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>

<div class="col-lg-2">
    <div class="form-group" >
        <label style="width:25%; float:left;">Working experience</label>
         <div style="width:25%; float:left;">
            <input type="text" class="form-control  " placeholder="Year"/>Year
         </div>
         <div style="width:25%;  float:left;">
            <input type="text" class="form-control " placeholder="Month"/>Month
         </div>
         <div style="width:25%;  float:left;">
            <input type="text" class="form-control  " placeholder="Day"/>Day
         </div>
    </div>            
</div>
</body>

</html>

Upvotes: 0

S Jayesh
S Jayesh

Reputation: 201

It seems, you are using Bootstrap, if yes, then;

Add class .form-inline to the <form> element.

else, Add these css properties to <form>,

display: inline-block;
width: auto;

Upvotes: 0

Alex78191
Alex78191

Reputation: 3086

It's by default. input is inline element. 

<div class="col-lg-2">
  <div class="form-group">
    <label>Working experience</label>
    <input type="text" class="form-control  " placeholder="Year" />Year
    <input type="text" class="form-control " placeholder="Month" />Month
    <input type="text" class="form-control  " placeholder="Day"

Day
  </div>
</div>

In bootstrap you can put all of the fields that you want on a single line within a single form-group

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="form-group">
        <label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="year"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="month"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="day"/>
        </div>    
    </div>

Upvotes: 1

Related Questions