Bootstrap input types example

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To make diffrents input, just pass text, number, email, and etc in type attribute in the input tag element.

Today, I am going to show you. how to create input types in bootstrap with code example.

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library

This article will guide you to adding input types in Bootstrap with example.

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVST QN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

1: Input Type Text

<input type="text"> defines a single-line text input field:

<form>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname">
</form>

2: Input Type Password

<input type="password"> defines a password field:

   <h6>Input Type Password</h6>
        <form>
            <label for="pwd">Password:</label><br>
            <input type="password" id="pwd" name="pwd">
        </form>

3: Input Type Submit

If you omit the submit button’s value attribute, the button will get a default text

 <h6>Input Type Submit</h6>
        <form>
            <label for="fname">First name:</label><br>
            <input type="text" id="lname" name="lname" value="Tiwari"><br><br>
            <input  class="btn btn-success" type="submit" value="Submit">
          </form>

4: Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default values:

    <form >
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname" value="John"><br>
            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" name="lname" value="Doe"><br><br>
            <input class="btn btn-danger" type="submit" value="Submit">
            <input class="btn btn-primary" type="reset">
    </form>

5: Input Type Radio

<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

 <h6>Input Type Radio</h6>
          <form>
            <input type="radio" id="html" name="fav_language" value="HTML">
            <label for="html">HTML</label><br>
            <input type="radio" id="css" name="fav_language" value="CSS">
            <label for="css">CSS</label><br>
            <input type="radio" id="javascript" name="fav_language" value="JavaScript">
            <label for="javascript">JavaScript</label>
          </form>

6: Input Type Checkbox

<input type="checkbox"> defines a checkbox.

        <h6>Input Type Checkbox</h6>
        <form>
            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
            <label for="vehicle1"> I have a bike</label><br>
            <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
            <label for="vehicle2"> I have a car</label><br>
            <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
            <label for="vehicle3"> I have a boat</label>
        </form>

7: Input Type Button

<input type="button"> defines a button:

      <h6>Input Type Button</h6>
        <input class="btn btn-primary" type="button" onclick="alert('Hello World!')" value="Click Me!">

8: Input Type Color

The <input type="color"> is used for input fields that should contain a color.

     <h6>Input Type Color</h6>
        <form>
            <label for="favcolor">Select your favorite color:</label>
            <input type="color" id="favcolor" name="favcolor">
          </form>

9: Input Type Date

The <input type="date"> is used for input fields that should contain a date.

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

10: Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

11: Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.

   <form>
            <label for="email">Enter your email:</label>
            <input type="email" id="email" name="email">
   </form>

12: Input Type File

The <input type="file"> defines a file-select field and a “Browse” button for file uploads.

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

13:Input Type Hidden

The <input type="hidden"> defines a hidden input field (not visible to a user).

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>

14: Input Type Month

The <input type="month">allows the user to select a month and year.

<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>

15: Input Type Number

The <input type="number"> defines a numeric input field.

<form>
  <label for="quantity">Quantity (between 1 and 100):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="100">
</form>

16: Input Type Range

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

17: Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

18: Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

19: Input Type Time

The <input type="time"> allows the user to select a time (no time zone).

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>

20: Input Type Url

The <input type="url"> is used for input fields that should contain a URL address.

<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>

21: Input Type Week

The <input type="week"> allows the user to select a week and year.

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>

Example.

Let’s look at the following example to understand how it basically works:

input-types-in-bootstrap.html

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Bootstrap input</title>
</head>

<body>
    <div class="container">
        <h6>Input text type </h6>
        <form>
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname"><br>
            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" name="lname">
        </form>
        <h6>Input Type Password</h6>
        <form>
            <label for="pwd">Password:</label><br>
            <input type="password" id="pwd" name="pwd">
        </form>
        <h6>Input Type Submit</h6>
        <form>
            <label for="fname">First name:</label><br>
            <input type="text" id="lname" name="lname" value="Tiwari"><br><br>
            <input class="btn btn-success" type="submit" value="Submit">
        </form>

        <h6>Input Type Reset</h6>
        <form>
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname" value="John"><br>
            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" name="lname" value="Doe"><br><br>
            <input class="btn btn-danger" type="submit" value="Submit">
            <input class="btn btn-primary" type="reset">
        </form>
        <h6>Input Type Radio</h6>
        <form>
            <input type="radio" id="html" name="fav_language" value="HTML">
            <label for="html">HTML</label><br>
            <input type="radio" id="css" name="fav_language" value="CSS">
            <label for="css">CSS</label><br>
            <input type="radio" id="javascript" name="fav_language" value="JavaScript">
            <label for="javascript">JavaScript</label>
        </form>
        <h6>Input Type Checkbox</h6>
        <form>
            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
            <label for="vehicle1"> I have a bike</label><br>
            <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
            <label for="vehicle2"> I have a car</label><br>
            <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
            <label for="vehicle3"> I have a boat</label>
        </form>
        <h6>Input Type Button</h6>
        <input class="btn btn-primary" type="button" onclick="alert('Hello World!')" value="Click Me!">
        <h6>Input Type Color</h6>
        <form>
            <label for="favcolor">Select your favorite color:</label>
            <input type="color" id="favcolor" name="favcolor">
        </form>
        <h6>Input Type Date</h6>
        <form>
            <label for="birthday">Birthday:</label>
            <input type="date" id="birthday" name="birthday">
        </form>
        <h6>Input Type Datetime-local</h6>
        <form>
            <label for="birthdaytime">Birthday (date and time):</label>
            <input type="datetime-local" id="birthdaytime" name="birthdaytime">
        </form>
        <h6>Input Type Email</h6>
        <form>
            <label for="email">Enter your email:</label>
            <input type="email" id="email" name="email">
        </form>
        <h6>Input Type File</h6>
        <form>
            <label for="myfile">Select a file:</label>
            <input type="file" id="myfile" name="myfile">
        </form>
        <h6>Input Type Hidden</h6>
        <form>
            <label for="fname">First name:</label>
            <input type="text" id="fname" name="fname"><br><br>
            <input type="hidden" id="custId" name="custId" value="3487">
            <input type="submit" value="Submit">
          </form>
        <h6>Input Type Month</h6>
        <form>
            <label for="bdaymonth">Birthday (month and year):</label>
            <input type="month" id="bdaymonth" name="bdaymonth">
          </form>
        <h6>Input Type Number</h6>
        <form>
            <label for="quantity">Quantity (between 1 and 100):</label>
            <input type="number" id="quantity" name="quantity" min="1" max="100">
          </form>
        <h6>Input Type Range</h6>
        <form>
            <label for="vol">Volume (between 0 and 50):</label>
            <input type="range" id="vol" name="vol" min="0" max="50">
          </form>
        <h6>Input Type Search</h6>
        <form>
            <label for="gsearch">Search Google:</label>
            <input type="search" id="gsearch" name="gsearch">
          </form>
        <h6>Input Type Tel</h6>
        <form>
            <label for="phone">Enter your phone number:</label>
            <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
          </form>
        <h6>Input Type Time</h6>
        <form>
            <label for="appt">Select a time:</label>
            <input type="time" id="appt" name="appt">
          </form>
        <h6>Input Type Url</h6>
        <form>
            <label for="homepage">Add your homepage:</label>
            <input type="url" id="homepage" name="homepage">
          </form>
        <h6> Input Type Week</h6>
        <form>
            <label for="week">Select a week:</label>
            <input type="week" id="week" name="week">
          </form>
          </div>


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>


</body>

</html>

Check the output of the above code example.

Bootstrap, Input, Types Bootstrap, Input, Types Bootstrap, Input, Types Bootstrap, Input, Types

All the best 👍

Follow me on Twitter