tabler-ui/src/_includes/cards/forms.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

<div class="card">
	<div class="card-body">

		<form>
			<div class="form-group">
				<label class="form-label">Email address</label>
				<input type="email" class="form-control" placeholder="name@example.com">
			</div>
			<div class="form-group">
				<label class="form-label">Example select</label>
				<select class="form-control">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
			</div>
			<div class="form-group">
				<label class="form-label">Example select</label>
				<select class="form-control">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
			</div>
			<div class="form-group">
				<label class="form-label">Example multiple select</label>
				<select multiple class="form-control">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
			</div>
			<div class="form-group">
				<label class="form-label">Example textarea</label>
				<textarea class="form-control" rows="3"></textarea>
			</div>
			<div class="form-group">
				<label for="validationDefault03">City</label>
				<input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
				<div class="invalid-feedback">
					Please provide a valid city.
				</div>
			</div>
			<div class="row">
				<div class="col-sm-7 form-group">
					<label for="validationDefault04">State</label>
					<input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
					<div class="invalid-feedback">
						Please provide a valid state.
					</div>
				</div>
				<div class="col-sm-5 form-group">
					<label for="validationDefault05">Zip</label>
					<input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
					<div class="invalid-feedback">
						Please provide a valid zip.
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="form-label">Example file input</label>
				<input type="file" class="form-control-file">
			</div>
			<div class="form-group">
				<label class="form-label">Password</label>
				<input type="password" class="form-control">
				<small class="form-text text-muted">
					Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
				</small>
			</div>
			<div class="form-group">
				<label class="form-label">Custom select</label>
				<select class="">
					<option selected>Open this select menu</option>
					<option value="1">One</option>
					<option value="2">Two</option>
					<option value="3">Three</option>
				</select>
			</div>
			<div class="form-group">
				<label class="form-label">Custom file input</label>
				<label class="custom-file custom-file-block">
					<input type="file" id="file2" class="custom-file-input">
					<span class="custom-file-control"></span>
				</label>
			</div>
			<div class="form-group">
				<div class="custom-controls-stacked">
					<label class="custom-control custom-radio">
						<input name="radio-stacked" type="radio" class="custom-control-input">
						<span class="custom-control-indicator"></span>
						<span class="custom-control-description">Toggle this custom radio</span>
					</label>
					<label class="custom-control custom-radio">
						<input name="radio-stacked" type="radio" class="custom-control-input">
						<span class="custom-control-indicator"></span>
						<span class="custom-control-description">Or toggle this other custom radio</span>
					</label>
				</div>
			</div>
			<div class="form-group">
				<label class="custom-control custom-checkbox">
					<input name="radio-stacked" type="checkbox" class="custom-control-input">
					<span class="custom-control-indicator"></span>
					<span class="custom-control-description">Toggle this custom radio</span>
				</label>
			</div>
		</form>

	</div>
</div>