Inline form code example

Example 1: bootstrap form

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Example 2: inline input form css

<p>Read this sentence 
 </p><form style='display:inline;'>

Example 3: Inline form

1 
    2 <!-- Do NOT ALTER THE TEMPLATE.  WRITE THE CODE ONLY IN THE SPECIFIED PART -->
    3 
    4 
    5 <!DOCTYPE html>
    6 <html lang="en">
    7 <head>
    8 <meta charset="utf-8">
    9 <meta http-equiv="X-UA-Compatible" content="IE=edge">
   10 <meta name="viewport" content="width=device-width, initial-scale=1">
   11 <title>Example of Bootstrap 3 Inline Form Layout</title>
   12 
   13 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   14 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   15 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   16 
   17 
   18 <style type="text/css">
   19     .compact{
   20     	margin: 20px;
   21     }
   22 </style>
   23 
   24 </head>
   25 <body>
   26     
   27     
   28     <div class="compact">
   29     
   30     <form action="" class="form-inline" method="get" accept-charset="utf-8">
   31         
   32         
   33         
   34         <input type="email" name="inputEmail" class="form-control " required id="inputEmail" placeholder="Email"  value="" />
   35         
   36         <input type="password" name="inputPassword" class="form-control"  required id="inputPassword" placeholder="Password" value="" />
   37         
   38         <button id="login" type="submit" class="btn btn-primary">
   39         Login <span class="glyphicon glyphicon-log-in"></span></button> 
   40         
   41     </form>        
   42         
   43         
   44     </div>
   45     
   46 
   47 <!--  WRITE YOUR CODE HERE -->
   48 
   49 
   50     
   51 </body>
   52 </html>                            
   53

Tags:

Misc Example

Recent Posts