mirror of
https://github.com/tabler/tabler.git
synced 2026-07-30 06:54:39 +04:00
codecalm
59 lines
2.3 KiB
HTML
59 lines
2.3 KiB
HTML
{% assign horizontal = include.horizontal | default: false %}
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<form>
|
|
<div class="form-group mb-3 {% if horizontal %}row{% endif %}">
|
|
<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">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="form-group mb-3 {% if horizontal %}row{% endif %}">
|
|
<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">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="form-group mb-3 {% if horizontal %}row{% endif %}">
|
|
<label class="form-label{% if horizontal %} col-3 col-form-label{% endif %}">Select</label>
|
|
<div {% if horizontal %}class="col"{% endif %}>
|
|
<select class="form-select">
|
|
<option>Option 1</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group {% if horizontal %}row{% else %}mb-3{% endif %}">
|
|
<label class="form-label{% if horizontal %} col-3 col-form-label pt-0{% 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="form-footer">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div> |