mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
form elements
This commit is contained in:
codecalm
@@ -1,67 +1,69 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Static</label>
|
||||
<div class="form-control-plaintext">Username</div>
|
||||
<label class="form-label">Static</label>
|
||||
<div class="form-control-plaintext">Username</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Text</label>
|
||||
<div class="form-hint">Here's some more info.</div>
|
||||
<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
|
||||
<label class="form-label">Text</label>
|
||||
<div class="form-hint">Here's some more info.</div>
|
||||
<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
|
||||
<label class="form-label">Password</label>
|
||||
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Disabled</label>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.." value="Well, she turned me into a newt." disabled>
|
||||
<label class="form-label">Disabled</label>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
|
||||
value="Well, she turned me into a newt." disabled>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Readonly</label>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
|
||||
value="Well, how'd you become king, then?" readonly>
|
||||
<label class="form-label">Readonly</label>
|
||||
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
|
||||
value="Well, how'd you become king, then?" readonly>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
|
||||
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
|
||||
<label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
|
||||
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
|
||||
</div>
|
||||
|
||||
{% include parts/select.html %}
|
||||
{% include parts/select.html label="Select multiple" multiple=true %}
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input group</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
<span class="input-group-append">
|
||||
<button class="btn btn-primary" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
<label class="form-label">Input group</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
<span class="input-group-append">
|
||||
<button class="btn btn-secondary" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input group buttons</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-primary">Action</button>
|
||||
<button data-toggle="dropdown" type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"></button>
|
||||
{% include ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
</div>
|
||||
<label class="form-label">Input group buttons</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
<div class="input-group-append">
|
||||
<button type="button" class="btn btn-secondary">Action</button>
|
||||
<button data-toggle="dropdown" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"></button>
|
||||
{% include ui/dropdown-menu.html right=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include parts/input-icon.html %}
|
||||
{% include parts/input-icon-separated.html %}
|
||||
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">ZIP Code</label>
|
||||
<div class="row row-sm">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
</div>
|
||||
<div class="col-auto align-self-center">
|
||||
<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>" data-html="true">?</span>
|
||||
</div>
|
||||
</div>
|
||||
<label class="form-label">Input with help icon</label>
|
||||
<div class="row row-sm">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
</div>
|
||||
<div class="col-auto align-self-center">
|
||||
<span class="form-help" data-toggle="popover" data-placement="top"
|
||||
data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>"
|
||||
data-html="true">?</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,24 @@
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Username</label>
|
||||
{% include ui/form/input-group.html prepend="@" placeholder="username" %}
|
||||
<label class="form-label">Input group</label>
|
||||
{% include ui/form/input-group.html prepend="@" placeholder="username" class="mb-2" %}
|
||||
{% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" class="mb-2" %}
|
||||
{% include ui/form/input-group.html prepend="https://" append=".tabler.io" placeholder="subdomain" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Subdomain</label>
|
||||
{% include ui/form/input-group.html append=".tabler.io" placeholder="subdomain" %}
|
||||
<label class="form-label">Input with checkbox or radios</label>
|
||||
{% include ui/form/input-group.html prepend="checkbox" class="mb-2" %}
|
||||
{% include ui/form/input-group.html append="radio" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with prepended text</label>
|
||||
{% include ui/form/input-group.html prepend="https://tabler.io/users/" class="input-group-flat" input-class="pl-0" %}
|
||||
{% include ui/form/input-group.html prepend="https://tabler.io/users/" class="input-group-flat" input-class="pl-0" value="yourfancyusername" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Input with appended text</label>
|
||||
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" %}
|
||||
{% include ui/form/input-group.html append=".tabler.io" input-class="text-right pr-0" class="input-group-flat" value="yourfancydomain" %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
@@ -1,13 +1,25 @@
|
||||
<div class="input-group{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% if include.prepend %}
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">{{ include.prepend }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<input type="text" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %}{% if include.placeholder %} value="{{ include.value }}"{% endif %}>
|
||||
{% if include.append %}
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">{{ include.append }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if include.prepend %}
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
{% if include.prepend == "checkbox" or include.prepend == "radio" %}
|
||||
<input class="form-check-input m-0" type="{{ include.prepend }}" checked>
|
||||
{% else %}
|
||||
{{ include.prepend }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<input type="text" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}" {% if include.placeholder %} placeholder="{{ include.placeholder }}" {% endif %}{% if include.value %} value="{{ include.value }}"{% endif %}>
|
||||
{% if include.append %}
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">
|
||||
{% if include.append == "checkbox" or include.append == "radio" %}
|
||||
<input class="form-check-input m-0" type="{{ include.append }}" checked>
|
||||
{% else %}
|
||||
{{ include.append }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user