<label for="example-input">Username</label>
<input id="example-input" type="text" placeholder="Enter Username">
<label for="example-textarea">Comment</label>
<textarea id="example-textarea"></textarea>
<label for="example-select">Articles</label>
<div class="select">
<select id="example-select">
<option>A first not real article title</option>
<option>A second article, also not real</option>
<option>A third article for you</option>
</select>
</div>
<label for="example-multi-select">Articles</label>
<select id="example-select" multiple size="3">
<option>A first not real article title</option>
<option>A second article, also not real</option>
<option>A third article for you</option>
</select>
<div class="checkbox">
<input type="checkbox" id="checkbox-1">
<label for="checkbox-1">Option One</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-2">
<label for="checkbox-2">Option Two</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-3" disabled>
<label for="checkbox-3">Option Three</label>
</div>
<ul class="list-inline">
<li>
<div class="checkbox">
<input type="checkbox" id="checkbox-inline-1">
<label for="checkbox-inline-1">Option One</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" id="checkbox-inline-2">
<label for="checkbox-inline-2">Option Two</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" id="checkbox-inline-3" disabled>
<label for="checkbox-inline-3">Option Three</label>
</div>
</li>
</ul>
<div class="radio">
<input type="radio" id="radio-1" name="radio-1">
<label for="radio-1">Option One</label>
</div>
<div class="radio">
<input type="radio" id="radio-2" name="radio-1">
<label for="radio-2">Option Two</label>
</div>
<div class="radio">
<input type="radio" id="radio-3" name="radio-1" disabled>
<label for="radio-3">Option Two</label>
</div>
<ul class="list-inline">
<li>
<div class="radio">
<input type="radio" id="radio-inline-1" name="radio-2">
<label for="radio-inline-1">Option One</label>
</div>
</li>
<li>
<div class="radio">
<input type="radio" id="radio-inline-2" name="radio-2">
<label for="radio-inline-2">Option Two</label>
</div>
</li>
<li>
<div class="radio">
<input type="radio" id="radio-inline-3" name="radio-2" disabled>
<label for="radio-inline-3">Option Three</label>
</div>
</li>
</ul>
<input type="file" id="file">
The Javascript snippet below depends on the file API (see link).
<label for="file-custom" id="js-filename" class="btn">Choose File</label>
<input type="file" id="file-custom" class="sr-only" multiple>
<script>
(function() {
var file = document.getElementById('file-custom');
file.addEventListener('change', function() {
var fileCount = file.files.length;
if (fileCount > 0) {
if (fileCount > 1) {
document.getElementById('js-filename').innerHTML = fileCount + ' files selected';
} else {
document.getElementById('js-filename').innerHTML = file.files[0].name;
}
}
});
}());
</script>
<form action="#" method="post">
<div class="row form-group">
<div class="col col-md-2">
<label class="label-inline" for="username">Username</label>
</div>
<div class="col col-md-4">
<input id="username" type="text">
</div>
</div>
<div class="row form-group">
<div class="col col-md-2">
<label class="label-inline" for="password">Password</label>
</div>
<div class="col col-md-4">
<input id="password" type="password">
</div>
</div>
<div class="row">
<div class="col col-md-4 col-md-offset-2">
<input class="btn" type="submit" value="Login">
</div>
</div>
</form>
<form action="#" method="post">
<div class="row">
<div class="col col-md-6">
<div class="form-group">
<label for="firstname">First name</label>
<input id="firstname" type="text">
</div>
</div>
<div class="col col-md-6">
<div class="form-group">
<label for="lastname">Last name</label>
<input id="lastname" type="text">
</div>
</div>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input id="email" type="text">
</div>
<div class="form-group">
<label for="comment">Comment</label>
<textarea id="comment"></textarea>
</div>
<input type="submit" value="Send" class="btn">
</form>