How to create Forms [Vertical, Horizontal and Inline Form] using bootstrap

in #utopian-io • 8 years ago (edited)

What Will I Learn?

  • You will learn some class that provided by bootstrap to create a form
  • You will learn how to create vertical form
  • You will learn how to create horizontal form
  • You will learn how to create inline form

Requirements

  • You have basic about HTML
  • You have basic about CSS
  • You have basic about JavaScript
  • You should Install or host the bootstrap file. If you don't want do that, you can add the bootstrap CDN.
  • Text Editor and a Browser

Difficulty

  • Basic

Tutorial Contents

In web design, Form is a very important thing. Almost all websites use forms. Therefore, Bootstrap provides three types of form layouts. They are Vertical Form (default form), Horizontal Form and Inline Form. For more detail, Lets pay attention steps bellow :

  • Open your Text Editor Software [in this tutorial I use visual studio code]

  • Create new file and save as html extention. For ex form.html

  • As we know for using bootstrap we should use HTML5 Doctype. Add the HTML5 element on your file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pagination</title>
</head>
<body>
</body>
</html>
  • For using bootstrap framework we should install or host bootstrap file first. If we don't want to do that, you can also add Bootstrap CDN as a replacement. You can visit bootstrap official website to get it. add and put it in <head> element
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  • After adding all element above, Now we can start to code bootstrap.

  • To create a form. Open the <form> tag as usual

<form>
</form>
  • Wrap labels and form controls in <div class="form-group">.
 <div class="form-group">
</div>
  • Add the label in <div class="form-group">. And don't forget to add for atribut in <label> tag with the value is id of its textual
<label for="email">Email:</label>
  • Then add a textual under <label> element. To have a width of 100% we should add .form-control to all textual element.
<input type="email" class="form-control" id="email" placeholder="Enter your email">
  • Add more form group under the email. For example I add password from under email.
   <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter your password">
    </div>
  • As usual, Every form has a button to submit all input from user. So create a button Under all textual. To create button, Bootstrap has provided .btn class
<button type="submit" class="btn">Submit</button>

  • Save the File and try to run on your browser.

  • We already created a form with default style from bootstrap.It is Vertical Form. Now try to create Inline Form. To create Inline Form we need to add .form-inline class like this

<h2>Inline form</h2>
  <form class="form-inline">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter your email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter your password">
    </div>  
    <button type="submit" class="btn">Submit</button>
  </form>

image.png

  • The Vertical and Inline Form are already Created. Now try to create Horizontal Form. To create Horizontal form we should add .form-horizontal class in <form> tag
<form class="form-horizontal">
  • Then add .control-label and .col-sm-2 class in all <label> element.
 <label class="control-label col-sm-2" for="email">Email:</label>
  • The Last Put all textual in <div class="col-sm-10"> element. Like this

  • Save and try to run the file.

  • Finish, The full code you can copy bellow :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Form</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Vertical (Default) form</h2>
  <form>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter your email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter your password">
    </div>  
    <button type="submit" class="btn">Submit</button>
  </form>
  <h2>Inline form</h2>
  <form class="form-inline">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter your email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter your password">
    </div>  
    <button type="submit" class="btn">Submit</button>
  </form>
  <h2>Horizontal form</h2>
  <form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter your email">
    </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Password:</label>
      <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter your password">
    </div>
    </div> 
    <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn">Submit</button>
</div> 
  </form>
</div>
</body>
</html>

LIVE DEMO

Curriculum


Posted on Utopian.io - Rewarding Open Source Contributors

#tutorials #opensource #bootstrap #aceh
8 years ago in #utopian-io by
$22.67
  • Past Payouts $22.67
  • - Author $16.01
  • - Curators $6.66
22 votes
Reply 3
Sort:  
  • Trending
    • [-]
     8 years ago 

    Thank you for the contribution. It has been approved.

    You can contact us on Discord.
    [utopian-moderator]

    $0.00
      Reply
      [-]
       8 years ago 

      Hey @sogata I am @utopian-io. I have just upvoted you!

      Achievements

      • Seems like you contribute quite often. AMAZING!

      Suggestions

      • Contribute more often to get higher and higher rewards. I wish to see you often!
      • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

      Get Noticed!

      • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

      Community-Driven Witness!

      I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

      mooncryption-utopian-witness-gif

      Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

      $0.00
        Reply

        Coin Marketplace

        STEEM 0.04
        TRX 0.32
        JST 0.083
        BTC 64171.76
        ETH 1736.48
        USDT 1.00
        SBD 0.44