Form

Form shortcode arguments
Classes
Sizemini small medium large big huge massive
Fieldsequal width
Stateloading success error warning
Otherinverted
idID of the form.
nameName of the form.
methodForm method: get/post.
actionForm action.
Fields shortcode arguments
Classes
Countone two three ... ten
Otherinline grouped equal width
Field shortcode arguments
Classes
Statedisabled error
Widthone wide two wide three wide ... sixteen wide
Otherrequired
labelLabel 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 *