mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 09:54:24 +04:00
71 lines
2.7 KiB
HTML
71 lines
2.7 KiB
HTML
{% assign horizontal = include.horizontal | default: false %}
|
|
<form class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3{% if horizontal %} row{% endif %}">
|
|
<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">Email address</label>
|
|
<div{% if horizontal %} class="col"{% endif %}>
|
|
<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
|
|
<small class="form-hint">We'll never share your email with anyone else.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3{% if horizontal %} row{% endif %}">
|
|
<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %} required">Password</label>
|
|
<div{% if horizontal %} class="col"{% endif %}>
|
|
<input type="password" class="form-control" placeholder="Password">
|
|
<small class="form-hint">
|
|
Your password must be 8-20 characters long, contain letters and numbers, and must not contain
|
|
spaces, special characters, or emoji.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3{% if horizontal %} row{% endif %}">
|
|
<label class="{% if horizontal %}col-3 col-form-label{% else %}form-label{% endif %}">Select</label>
|
|
<div{% if horizontal %} class="col"{% endif %}>
|
|
<select class="form-select">
|
|
<option>Option 1</option>
|
|
<optgroup label="Optgroup 1">
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
</optgroup>
|
|
<option>Option 2</option>
|
|
<optgroup label="Optgroup 2">
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
</optgroup>
|
|
<optgroup label="Optgroup 3">
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
</optgroup>
|
|
<option>Option 3</option>
|
|
<option>Option 4</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="{% if horizontal %}row{% else %}mb-3{% endif %}">
|
|
<label class="{% if horizontal %}col-3 col-form-label pt-0{% else %}form-label{% endif %}">Checkboxes</label>
|
|
<div{% if horizontal %} class="col"{% endif %}>
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="checkbox" checked>
|
|
<span class="form-check-label">Option 1</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="checkbox">
|
|
<span class="form-check-label">Option 2</span>
|
|
</label>
|
|
<label class="form-check">
|
|
<input class="form-check-input" type="checkbox" disabled>
|
|
<span class="form-check-label">Option 3</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</div>
|
|
</form> |