Bootstrap All Type Form Elements :-
Bootstrap All Type Form Elements :-
Contact forms are one of the most common
elements found on a web page, and they can be used to gather just about any
type of information required from your users. But since Bootstrap is only a
front-end framework, we need to introduce added functionality in order for to
make the contact form functional. This is helpful to you Try It. J
<Head>
<!-- Latest compiled and minified CSS
-->
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified Font
awesome CSS -->
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</Head>
HTML :
<div class="container">
<fieldset>
<form class="form-horizontal">
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label for="exampleInputEmail1">Email
address</label>
<input class="form-control"
id="exampleInputEmail1" type="email" />
</div>
<div class="form-group">
<label
for="exampleInputPassword1">Password</label>
<input class="form-control"
id="exampleInputPassword1" type="password" />
</div>
<div class="form-group">
<label class="control-label"
for="selectbasic">Select Basic</label>
<select id="selectbasic" name="selectbasic"
class="form-control">
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="selectbasic">Select
Option Group</label>
<select id="selectbasic" name="selectbasic"
class="form-control">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label class="col-lg-12" style="padding:0px;"
for="submitQuery">Submit Query ( Do Double Click )</label>
<div class="SubBrowser">
<div class="col-md-10"
style="padding-left:0px;">
<input list="browsers" class="form-control"
name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</div>
<input type="submit" class="col-md-2 btn">
</div>
</div>
<div class="form-group">
<label
for="submitQuery">Submit Range</label>
<input type="range" id="a"
value="50">
</div>
<div
class="form-group">
<label>Display a meter
gauge:</label>
<meter class="form-control"
value="2" min="0" max="10">2 out of
10</meter><br>
<meter class="form-control"
value="0.6">60%</meter>
</div>
<div
class="form-group">
<label>Progress</label>
<progress value="80"
class="form-control" max="100"></progress>
</div>
<div
class="form-group">
<label>Progress
2</label>
<div
class="progress">
<div class="progress-bar" role="progressbar"
aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label"
for="textarea">Text Area</label>
<textarea class="form-control" id="textarea"
name="textarea"></textarea>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input id="exampleInputFile" type="file" />
<p class="help-block"> Example block-level help text
here. </p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />
Check me out</label>
</div>
<button type="submit" class="btn
btn-default">Submit</button>
</form>
</fieldset>
</div>
<div class="container">
<form
action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
<form onsubmit="return
false" oninput="o.value = a.valueAsNumber +
b.valueAsNumber"><div class="row">
<div class="col-md-5"> <input
class="form-control" name="a" id="a"
type="number" step="any" style="width:96%;
float:left;"><span style="font-size: 20px; margin-left:
4px;"> + </span></div>
<div class="col-md-5"> <input
class="form-control" name="b" id="b"
type="number" step="any" style="width:96%;
float:left;"><span style="font-size: 20px; margin-left:
4px;"> =</span></div>
<div class="col-md-2"> <output name="o"
for="a b"></output></div>
</div></form>
</div>
CSS:
/*Form CSS*/
form {
border: 1px solid #ccc;
margin: 10px 0;
padding: 17px 40px;
}
.btn.submitQuery {
float: right;
}
.form-control.Query {
width: 89%;
float:left;
}
keygen{ width:100%;}
Show Demo :
http://mrsinghcafe.com/Effect/Form/index.html
!-------------------------------------------------------Huntertech-----------------------------------!
Thanks
Team
www.bel-technology.com
0 comments