1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 19:26:10 +04:00
Files
tabler/_includes/cards/forms.html
2018-02-19 20:17:04 +01:00

117 lines
3.9 KiB
HTML

<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>