Form
[form] shortcode arguments
id:
ID of the form.name:
Name of the form.method:
Form method: get/post.action:
Form action.classes:
Size -
[mini|small|medium|large|big|huge|massive]Fields -
[equal width]State -
[loading|success|error|warning]Other -
[inverted][fields] shortcode arguments
classes:
Count -
[one|two|three|...]Other -
[inline|grouped|equal width][field] shortcode arguments
classes:
State -
[disabled|error]Width -
[three wide|ten wide|...]Other -
[required]label:
Label text for the fieldBasic 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”