Form

Default form

HTML


<form method="GET" action="#" class="orc-c-form  orc-js-form">
  <input type="hidden" name="_method" value="GET">
  <input type="hidden" name="_token" value="">

  <div class="orc-c-form__body">


    <div class="orc-c-form__list">

      <div class="orc-c-field  orc-js-field">

        <label for="" class="orc-c-field__label ">Label</label>

        <div class="orc-c-field__body">

          <input type="" id="" class="orc-c-input " name="" placeholder="Placeholder" value="" title="The Cosmopolitan Las Vegas" />

        </div>
        <!-- end orc-c-field__body -->

        <div class="orc-c-field__note orc-js-field-note">This is a note about the field</div>

      </div>
      <!-- end orc-c-field -->

      <div class="orc-c-field  orc-js-field">

        <label for="" class="orc-c-field__label ">Label</label>

        <div class="orc-c-field__body">

          <input type="" id="" class="orc-c-input " name="" placeholder="Placeholder" value="" title="The Cosmopolitan Las Vegas" />

        </div>
        <!-- end orc-c-field__body -->

        <div class="orc-c-field__note orc-js-field-note">This is a note about the field</div>

      </div>
      <!-- end orc-c-field -->




    </div>
    <!--end orc-c-form__list-->

  </div>
  <!--end orc-c-form__body-->

  <div class="orc-c-form__footer">

    <div class="orc-c-btn-group ">

      <button class="orc-c-btn ">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




    </div><!--end orc-c-btn__inner-->

</button>
      <!-- end orc-c-btn -->


      <button class="orc-c-btn orc-c-btn--bare">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Button</span>




    </div><!--end orc-c-btn__inner-->

</button>
      <!-- end orc-c-btn -->




    </div>
    <!--end orc-c-btn-group-->




  </div>
  <!--end orc-c-form__footer-->

</form>
<!--end orc-c-form-->

When to use

Use in any generic instance of needing users to input information about themselves or their preferences.

When to consider an alternative

A contact form is better for the specific action of getting in touch. For inputting data for profile pages, use the profile form instead.

Class Name	Description
`orc-c-form` Required	Applied to the outer `<form>` element. This `form` element will help allow the data in the fields to be submitted. An `input` with a `type` of `hidden` and a `name` of `_token` needs to be added within this form as the first element for submission reasons.
`orc-js-form` JS	Applied to the `<form>` element so that JavaScript can target this form.
`orc-c-form___body` Required	Inner container of the `orc-c-form`.
`orc-c-field` Required	Form field within the `orc-c-form`. Consists of a field label, field body, and input in most cases.
`orc-js-field` JS	Class added to `orc-c-field` to have JavaScript target this element, mainly for form field validation
`orc-c-field__label` Required	Form field label used to describe the input within the field
`orc-c-field__body` Required	Form field container that houses the input and other form field content.
`orc-c-input` Required	Form field input. Inputs can be of various types. The contact form has types of “text”.
`orc-c-form__footer` Required	The bottom portion of the form that houses items like the button group
`orc-c-btn-group` Required	Button group containing the buttons to submit the contact form or any other actions needed within the form.

Default form `orc-c-form`

Usage

When to use

When to consider an alternative