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 .
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
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
defines a password field:
h6>Input Type Passwordh6>
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 Submith6>
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
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
defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
h6>Input Type Radioh6>
form>
input type="radio" id="html" name="fav_language" value="HTML">
label for="html">HTMLlabel>br>
input type="radio" id="css" name="fav_language" value="CSS">
label for="css">CSSlabel>br>
input type="radio" id="javascript" name="fav_language" value="JavaScript">
label for="javascript">JavaScriptlabel>
form>6: Input Type Checkbox
defines a checkbox.
h6>Input Type Checkboxh6>
form>
input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
label for="vehicle1"> I have a bikelabel>br>
input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
label for="vehicle2"> I have a carlabel>br>
input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
label for="vehicle3"> I have a boatlabel>
form>7: Input Type Button
defines a button:
h6>Input Type Buttonh6>
input class="btn btn-primary" type="button" onclick="alert('Hello World!')" value="Click Me!">8: Input Type Color
The is used for input fields that should contain a color.
h6>Input Type Colorh6>
form>
label for="favcolor">Select your favorite color:label>
input type="color" id="favcolor" name="favcolor">
form>9: Input Type Date
The 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 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 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 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 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 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 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 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 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 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 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 is used for input fields that should contain a URL address.
form>
label for="homepage">Add your homepage:label>
input type=
