Advance Form UI

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

Custom Form controls

Use .form-control .form-control-line.

														
<div class="row">
	<div class="col-md-6">
		<input type="text" class="form-control form-control-line mt-1" placeholder="Input Box">
		<select class="form-control form-control-line form-select  mt-1">
			<option selected>Select</option>
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="3">Three</option>
		</select>
		<textarea class="form-control form-control-line mt-1" rows="3" placeholder="Textarea"></textarea>
	</div>
	<div class="col-md-6">
		<input type="text" class="form-control form-control-line mt-1" value="Aniruddha" placeholder="Name">
		<select class="form-control form-control-line form-select  mt-1">
			<option>Select</option>
			<option  selected value="1">One</option>
			<option value="2">Two</option>
			<option value="3">Three</option>
		</select>
	</div>
</div>
													
Floating labels

Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels

Input
Textarea
Select
Value predefined
Validation
														
<div class="row">
	<div class="col-sm-6">
		<h6 class="h6">Input</h6>
		<div class="form-floating mb-5">
		<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
		<label for="floatingInput">Flaoting label Input</label>
		</div>
		<h6 class="h6">Textarea</h6>
		<div class="form-floating mb-5">
		<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
		<label for="floatingTextarea">Flaoting label Textarea</label>
		</div>
		<h6 class="h6">Select</h6>
		<div class="form-floating">
		<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
			<option selected>Flaoting label select</option>
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="3">Three</option>
		</select>
		<label for="floatingSelect">Works with selects</label>
		</div>
	</div>
	<div class="col-sm-6">
		<h6 class="h6">Value predefined</h6>
		<form class="form-floating mb-5">
			<input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
			<label for="floatingInputValue">Input with value</label>
		</form>
		<h6 class="h6">Validation</h6>
		<form class="form-floating">
			<input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
			<label for="floatingInputInvalid">Invalid input</label>
		</form>
	</div>
</div>