Bootstrap input types example

July 03, 2022

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.

All the best 👍