saftutorials.com
Bootstrap Input

Bootstrap Input supported al HTML5 Input type like input, textarea, checkbox, radio, select.


Bootstrap support most common HTML form control, text-based input fields like text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.


Inputs

Input type Text

<input type="text" class="form-control" placeholder="Text input">


Input type Password

<input type="password" class="form-control" placeholder="Password input">

Input type Radio
<input type="radio" class="form-control" value="1"> Input Radio
Input Radio

Input type Checkbox
<input type="checkbox" class="form-control" value="1"> Input Checkbox
Input Checkbox

Inline checkboxes and radios

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
 <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</body>
</html>


Selects

Note that many native select menus—namely in Safari, Chrome have rounded corners that can't be modified via border-radius properties.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>
</body>
</html>

.
Select with multiple attributes. 
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
</select>
</body>
</html>


Bootstrap form Static control

When need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form class="form-horizontal">
 <div class="form-group">
   <label class="col-sm-2 control-label">Email</label>
   <div class="col-sm-10">
     <p class="form-control-static">email@example.com</p>
   </div>
 </div>
 <div class="form-group">
   <label for="password4" class="col-sm-2 control-label">Password</label>
   <div class="col-sm-10">
     <input type="password" class="form-control" id="password4" placeholder="Password">
   </div>
 </div>
</form>
</body>
</html>

email@example.com



Bootstrap input Disabled state

Add the disabled attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input class="form-control" id="disable" type="text" placeholder="Disabled input here..." disabled>
</body>
</html>


Bootstrap input Readonly state

Add the readonly attribute for an input to prevent modification of the input value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
</body>
</html>



Bootstrap Input Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="form-group has-success">
 <label class="control-label" for="inputSuccess1">Input with success</label>
 <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
 <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
 <label class="control-label" for="inputWarning1">Input with warning</label>
 <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
 <label class="control-label" for="inputError1">Input with error</label>
 <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
 <div class="checkbox">
   <label>
     <input type="checkbox" id="checkboxSuccess" value="option1">
     Checkbox with success
   </label>
 </div>
</div>
<div class="has-warning">
 <div class="checkbox">
   <label>
     <input type="checkbox" id="checkboxWarning" value="option1">
     Checkbox with warning
   </label>
 </div>
</div>
<div class="has-error">
 <div class="checkbox">
   <label>
     <input type="checkbox" id="checkboxError" value="option1">
     Checkbox with error
   </label>
 </div>
</div>
</body>
</html>


Bootstrap Input with Icon

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess2">Input with success</label>
 <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
 <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
 <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning2">Input with warning</label>
 <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
 <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
 <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError2">Input with error</label>
 <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
 <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
 <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
 <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
 <div class="input-group">
   <span class="input-group-addon">@</span>
   <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
 </div>
 <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
 <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
</body>
</html>
(success)
(warning)
(error)
@
(success)


Optional icons form with horizontal and inline forms

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form class="form-horizontal">
 <div class="form-group has-success has-feedback">
   <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
   <div class="col-sm-9">
     <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
     <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
     <span id="inputSuccess3Status" class="sr-only">(success)</span>
   </div>
 </div>
 <div class="form-group has-success has-feedback">
   <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
   <div class="col-sm-9">
     <div class="input-group">
       <span class="input-group-addon">@</span>
       <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
     </div>
     <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
     <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
   </div>
 </div>
</form>
</body>
</html>


Bootstrap Input Control sizing 

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="form-control input-lg">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select class="form-control input-sm">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</body>
</html>





Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic