<form class="form" action="">
    <div class="form_field ">
        <label class="form_label" for="text-input">
    Text input
  </label>
        <input id="text-input" placeholder="Text input placeholder" class="form_input " type="text">
    </div>

    <div class="form_field form_field-check">
        <input class="form_check" type="checkbox" id="checkbox" name="checkbox">
        <label class="form_label" for="checkbox">
    Checkbox
  </label>
    </div>

    <div class="form_field ">
        <label class="form_label" for="textarea">
    Textarea
  </label>
        <textarea class="form_textarea " name="textarea" id="textarea" placeholder="Textarea placeholder"></textarea>
    </div>

    <div class="form_field">
        <label class="form_label" for="">
      Options checkboxes
    </label>
        <ul class="form_fieldgroup">
            <li class="form_field form_field-check">
                <input class="form_check" name="options-checkboxes" id="options-checkboxes-option-1" value="option-1" type="checkbox">
                <label class="form_label" for="options-checkboxes-option-1">
            Option 1
          </label>
            </li>
            <li class="form_field form_field-check">
                <input class="form_check" name="options-checkboxes" id="options-checkboxes-option-2" value="option-2" type="checkbox">
                <label class="form_label" for="options-checkboxes-option-2">
            Option 2
          </label>
            </li>
            <li class="form_field form_field-check">
                <input class="form_check" name="options-checkboxes" id="options-checkboxes-option-3" value="option-3" type="checkbox">
                <label class="form_label" for="options-checkboxes-option-3">
            Option 3
          </label>
            </li>
        </ul>
    </div>

    <div class="form_field">
        <label class="form_label" for="select">
      Select
    </label>

        <select class="form_select" name="select" id="select">
        <option value="option-1">
          Option 1
        </option>
        <option value="option-2">
          Option 2
        </option>
        <option value="option-3">
          Option 3
        </option>
    </select>
    </div>

    <div class="form_field">
        <label class="form_label" for="">
      Options radio
    </label>
        <ul class="form_fieldgroup">
            <li class="form_field form_field-check">
                <input class="form_check" name="options-radio" id="options-radio-option-1" value="option-1" type="radio">
                <label class="form_label" for="options-radio-option-1">
            Option 1
          </label>
            </li>
            <li class="form_field form_field-check">
                <input class="form_check" name="options-radio" id="options-radio-option-2" value="option-2" type="radio">
                <label class="form_label" for="options-radio-option-2">
            Option 2
          </label>
            </li>
            <li class="form_field form_field-check">
                <input class="form_check" name="options-radio" id="options-radio-option-3" value="option-3" type="radio">
                <label class="form_label" for="options-radio-option-3">
            Option 3
          </label>
            </li>
        </ul>
    </div>

    <div class="form_field form_field-actions">
        <input class="btn" type="submit" value="Submit">
        <input class="btn" type="reset" value="Reset">
    </div>

</form>
<form class="form" action="">
  {{render '@form--text-input'}}
  {{render '@form--checkbox'}}
  {{render '@form--textarea'}}
  {{render '@form--options-checkboxes'}}
  {{render '@form--select'}}
  {{render '@form--options-radio'}}
  {{render '@form--actions'}}
</form>
{
  "label": "Lorem ipsum",
  "labelLong": "Lorem ipsum dolor sit amet",
  "htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
  "htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
  "htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
  "url": "#",
  "videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc"
}

Generic form

There are some predefined form styles included in the framework. By default forms are simple and run from top to bottom. You can use the grid or other spacing utilities to further customize the form.

Form buttons

Form submit buttons are styled using the .btn class.

Forms in SilverStripe

Form Markup in the SilverStripe CMS is created by the system, for convenience there is a .ss-form class that when wrapping a form will style it automagically.

<div class="ss-form">
  $SilverStripeForm
</div>

See also the example in this documentation.