Bootstrap Inputs
Bootstrap 4 works with following types of HTML controls
Code
Bootstrap works on
<!DOCTYPE html>
Bootstrap 4 works with following types of HTML controls
- input
- textarea
- checkbox
- radio
- select
- color
- date
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Code
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<fieldset>
<legend>Enter
Your Name :(Control Type 'text')</legend>
<input
type="text"
class="form-control"
id="myName">
</fieldset>
<br
/>
<fieldset>
<legend>Enter
Your Password :(Control Type 'password')</legend>
<input
type="password"
class="form-control"
id="myPassword">
</fieldset>
<fieldset>
<legend>Enter
Your Favourite Color :(Control Type 'color')</legend>
<input
type="color"
class="form-control"
id="myColor">
</fieldset>
<fieldset>
<legend>Enter
Your Date of Birth :(Control Type 'date')</legend>
<input
type="date"
class="form-control"
id="myColor">
</fieldset>
<fieldset>
<legend>Enter
Your Locality Time :(Control Type 'datetime-local')</legend>
<input
type="datetime-local"
class="form-control"
id="myDatetimeLocal">
</fieldset>
<fieldset>
<legend>Enter
Your Email :(Control Type 'emaill')</legend>
<input
type="emaill"
class="form-control"
id="myEmail">
</fieldset>
<fieldset>
<legend>Enter
Current Month :(Control Type 'month')</legend>
<input
type="month"
class="form-control"
id="myCMonth">
</fieldset>
<fieldset>
<legend>Enter
Your Age :(Control Type 'number')</legend>
<input
type="number"
class="form-control"
id="myAge">
</fieldset>
<fieldset>
<legend>Enter
A Range :(Control Type 'range')</legend>
<input
type="range"
class="form-control"
id="myRange">
</fieldset>
<fieldset>
<legend>Enter
A search Item :(Control Type 'search')</legend>
<input
type="search"
class="form-control"
id="mySearch">
</fieldset>
<fieldset>
<legend>Enter
Your Telephone Number :(Control Type 'tel')</legend>
<input
type="tel"
class="form-control"
id="myTelephone">
</fieldset>
<fieldset>
<legend>Enter
Current Time :(Control Type 'time')</legend>
<input
type="time"
class="form-control"
id="myTime">
</fieldset>
<fieldset>
<legend>Enter
Url of your Web Site :(Control Type 'url')</legend>
<input
type="url"
class="form-control"
id="myTime1">
</fieldset>
<fieldset>
<legend>Enter
week of the month :</legend>
<input
type="week"
class="form-control"
id="myWeek">
</fieldset>
</div>
</body>
</html>
Output :
Bootstrap works on
- Textarea
- Checkboxes
- Radio Buttons
- Select List
<!DOCTYPE html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<fieldset>
<legend>Enter
Comments :(Control Type 'textarea')</legend>
<textarea
class="form-control"
rows="6"
id="myComment"></textarea>
</fieldset>
<br
/>
<fieldset>
<legend>Select
Your Favourite Sports(Control Type 'Checkboxes')</legend>
<div
class="checkbox">
<label>
<input
type="checkbox">Chess</label>
</div>
<div
class="checkbox">
<label>
<input
type="checkbox">Cricket</label>
</div>
<div
class="checkbox">
<label>
<input
type="checkbox">Football</label>
</div>
<div
class="checkbox">
<label>
<input
type="checkbox">Hokey</label>
</div>
</fieldset>
<fieldset>
<legend>Select
Your Favourite Fruit(Control Type 'Radio')</legend>
<div
class="radio">
<label>
<input
type="radio"
name="myOption">Apple</label>
</div>
<div
class="radio">
<label>
<input
type="radio"
name="myOption">Mango</label>
</div>
<div
class="radio">
<label>
<input
type="radio"
name="myOption">Banana</label>
</div>
<div
class="radio">
<label>
<input
type="radio"
name="myOption">Lemon</label>
</div>
</fieldset>
<fieldset>
<legend>Which
Country do you live :(Control Type 'option')</legend>
<select
class="form-control"
>
<option>INDIA</option>
<option>USA</option>
<option>CHINA</option>
<option>RUSSIA</option>
</select>
</fieldset>
</div>
</body>
</html>
Output :
