What Is Bootstrap Input Type

The Bootstrap input type is a helpful function to accumulate information from users in the web application. It is a helpful field to manage and have much information on the websites. The bootstrap input type receives different format information like number, text, date, password, email. It is most helpful in the form of web applications.

Syntax

The syntax is:

<input type="type format name" >

The bootstrap input type with div attribute syntax is below.

<div class = "class name">
<form>
<input type="type the formate name" >
</form>
</div>

How does Bootstrap Input Type Work?

The bootstrap input receives the textual data from the user then the following bootstrap input type formats are used.

Input Type Text

The bootstrap input type is used for single-line text.

<form>
<div class="f-group">
UserName:
<input type="text" class="f-control" >
</div>
</form>

Input Type URL

 The bootstrap input type is applied for the URL address.

<form>
<div class="f-grp">
Add URLpage:
<input type="url" class="f-control" >
</div>
</form>

Input Type Password

The bootstrap input type is used for the password.

<form>
<div class="f-group">
Password:
<input type="password" class="f-control" >
</div>
</form>

Input Type Email

The bootstrap input type is used for email.

<form>
<div class="f-group">
Email:
<input type="email" class="f-control" >
</div>
</form>

Input Type File

The bootstrap input type is used to selecting the file from the device.

<form>
<div class="f-group">
Choose the File:
<input type="file" class="f-control" >
</div>
</form>

Input Type Number

The bootstrap input type is used for numbers.

<div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>

Input Type Checkbox

 The bootstrap input type is used to select more than one choice.

<form>
Countries:
<div class="checkbox">
<input type="checkbox" value=" Pakistan "> Pakistan
</div>
<div class="checkbox">
<input type="checkbox" value="USA" >USA
</div>
<div class="checkbox">
<input type="checkbox" value="China " >China
</div>
<div class="checkbox">
<input type="checkbox" value="Italy" >Italy
</div>
</form>

Input Type Date

The bootstrap input type is used to select the date.

<form>
<div class="f-group">
Birthday :
<input type="date" class="form-control" >
</div>
</form>

Input Type Radio Button

The bootstrap input type is used to choosing only one option.

<form>
Category:
<div class="radio">
<input type="radio" value="yess" >yess
</div>
<div class="radio">
<input type="radio" value="No">No
</div>
</form>

Input Type Range

The bootstrap input type is used to select the data range between minimum to maximum value.

<form>
<div class="form-group">
Select the range:
<input type="range" class="form-control" min="1" max="100">
</div>
</form>

Input Type Local Date and Time

The bootstrap input type is used to choose the local date and time.

<form>
<div class="form-group">
Birthday (D and T):
<input type="datetime-local" class="form-control" >
</div>
</form>

The bootstrap input type used the button to reset and protect the data then the following formats are used.

Input Type Button

The bootstrap input type is used for the button.

<input type="button" class="btnbtn-dngr" value="Click Here">

Input Type Submit

The bootstrap input type is applied to save the data.

<input type="Submit" class="btnbtn-dnger" value="Save">

Input Type Reset

The bootstrap input type is used to reset the form data.

<input type="reset">

The other bootstrap input type is used in advanced web applications.

Input Type Tel

The bootstrap input type is used for telephone numbers.

<form>
<div class="form-group">
TelePhone number:
<input type="tel" class="form-control"pattern="[0-9]{10}">
</div>
</form>

nput Type Color

The bootstrap input type is used for setting the color.

<form>
<div class="form-group">
Search:
<input type="colour" class="form-control" >
</div>
</form>

Input Type Search

The bootstrap input type is used for examining the content.

<form>
<div class="form-group">
Search:
<input type="search" class="form-control" >
</div>
</form>

Example 1

The certification form using the bootstrap input type. We are using tel, text, radio, submit, date, and reset bootstrap input type in the example

Code

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content= "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container-fluid">
<h3>Bootstrap Rgstration Form</h3>
<form>
<div class= "f-group">
User Name:
<input type= "text" class= "f-control" placeholder= "Enter  username">
</div>
<div class= "f-group">
Mobile Number:
<input type= "tel" class= "f-control" placeholder= "Enter  mobile name">
</div>
<div class= "f-group">
BirthDay:
<input type= "date" class= "f-control" placeholder= "Enter  birthdate">
</div>
<div class= "f-group">
Email:
<input type= "email" class= "f-control" placeholder= "Enter  email">
</div>
<div class= "f-group">
Category:
<div class="radio">
<label><input type="radio" value="Female" > Female </label>
</div>
<div class="radio">
<label><input type="radio" value="Male"> Male </label>
</div>
</div>
<div class="f-group">
<input type="file" class="f-control" >
</div>
<input class= "btnbtn-danger" type= "submit">
<input class= "btnbtn-danger" type= "reset">
</form>
</div>
</body>
</html>

Output

Example Login

The login form using a bootstrap input type. We are using email, password, checkbox, and submit a bootstrap input type in the example

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content= "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container-fluid">
<h3> Bootstrap login Form </h3>
<form>
<div class= "f-group">
Email:
<input type= "email" class= "f-control"  placeholder= "Enter  email">
</div>
<div class= "f-group">
Password:
<input type= "password" class= "f-control" placeholder= "Enter  password">
</div>
<div class= "checkbox">
<label>
<input type= "checkbox"> Remember me
</label>
</div>
<input class= "btnbtn-danger" type= "submit">
</form>
</div>
</body>
</html>

Output

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top