Bootstrap input types example
July 03, 2022Hi 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 👍