قالب ووردبريس
تصميم جديد
media
خبر جديد وحصر للموقع الان
April 10, 2018
April 14, 2018
أخر الاخبار
media
خبر جديد وحصر للموقع الان
form
The indispensable form controls
Ajax form
We use a free service BASIN which provide a Simple form backend for designers and developers, which you can collect submission data and track conversions with no backend coding required. check simple code below:
<form accept-charset="UTF-8" action="https://usebasin.com/f/3587049dbc33" enctype="multipart/form-data" method="POST">
<label for="email-address">Email Address</label>
<input type="email" id="email" name="email" required>
<textarea rows="4" cols="50" name="comment" required>
</textarea>
<button type="submit">Submit</button>
</form>
BASIN homepage
general
The following form controls classes are supported:
.label.input.textarea.select.checkbox.radio.button.help
Each of them should be wrapped in a .control container.
When combining several controls in a
form, use the .field class as a
container, to keep the spacing consistent.
This username is available
This email is invalid
Form field
The field container is a simple container for:
- a text
label - a form
control - an optional
helptext
This is a help text
This container allows form fields to be spaced consistently.
Form control
The control is a versatile container meant to
enhance single form controls. Because it has the same height as a control elements, it can
only contain the following elements:
inputselectbuttonicon
With icons
You can append one of 2 modifiers on a control:
-
has-icons-left - and/or
has-icons-right
You also need to add a modifier on the icon:
-
icon is-leftifhas-icons-leftis used -
icon is-rightifhas-icons-rightis used
The size of the input will define the size of the icon container.
Form addons
If you want to
attach controls together, use the has-addons modifier on the field container:
Horizontal form
If you want a
horizontal form control, use the is-horizontal modifier on the field container, in which you include:
-
field-labelfor the side label -
field-bodyfor the input/select/textarea container
You can use is-grouped or has-addons for the child elements.
This field is required
