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 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

Shipping Information

<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
Text in a regular field.
Text in a description field.
<form title="Description field">
  <field>Text in a regular field.</field>
  <field description>Text in a description field.</field>
</form>
Compact description field
Use at least one letter, one numeral, and seven characters.
<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

Leave a comment

Your email address will not be published. Required fields are marked *