Form
Form shortcode arguments
| Classes |
| ||||||||
id | ID of the form. | ||||||||
name | Name of the form. | ||||||||
method | Form method: get/post. | ||||||||
action | Form action. |
Fields shortcode arguments
| Classes |
|
Field shortcode arguments
| Classes |
| ||||||
label | Label text for the field |
Basic form
<form>
<fields two>
<field label="Label">
<input>
</field>
<field label="Label">
<input>
</field>
</fields>
<button type="submit">Submit</button>
</form>Inline fields
<form>
<fields inline>
<field eight wide label="Name">
<input placeholder="First Name">
</field>
<field three wide>
<input placeholder="Middle name">
</field>
<field five wide>
<input placeholder="Last name">
</field>
</fields>
</form>Equal width fields
<form small>
<fields equal width>
<field label="Field">
<input>
</field>
<field label="Field">
<input>
</field>
<field label="Field">
<input>
</field>
</fields>
<fields>
<field label="Field">
<input>
</field>
<field label="Field">
<input>
</field>
<field label="Field">
<input>
</field>
</fields>
</form>Edge cases
<form text container segment>
<header dividing tag="h4">Shipping Information</header>
<field label="Billing Address">
<fields>
<div twelve wide field>
<input name="shipping((address))" placeholder="Street Address">
</div>
<div four wide field>
<input name="shipping((address-2))" placeholder="Apt #">
</div>
</fields>
</field>
</form>Notes
Same shortcodes are not able to nest so the div shortcode with field class can be used as a substitute.Shortcode arguments cannot contain square brackets, so double parenthesis can be used instead.
Shortcode demo
<form title="Description field">
<field>Text in a regular field.</field>
<field description>Text in a description field.</field>
</form>Compact description field
<form>
<field label="Password"><input type="password"></field>
<field compact description>Use at least one letter, one numeral, and seven characters.</field>
</form>Notes
Compact description field describes the previous field.
One response to “Form”