section#forms

  h2 Forms

  form
    fieldset
      legend Comment Form

      .form-element
        label(for='username') Username
        input(type='text', id='username', placeholder='Your username', class='form-input')

      .form-element
        label(for='comment') Write a comment
        textarea(id='comment', class='form-input', placeholder='This is a sample message')

      button(type='submit', class='button button-primary') Send

  :markdown
    ```html
      <form>
        <fieldset>
          <legend>Comment Form</legend>

          <div class='form-element'>
            <label for='username'>Username</label>
            <input type='text' id='username' placeholder='Your username' class='form-input'>
          </div>

          <div class='form-element'>
            <label for='comment'>Write a comment</label>
            <textarea id='comment' class='form-input' placeholder='This is a sample message'></textarea>
          </div>

          <button type='submit' class='button button-primary'>Send</button>

        </fieldset>
      </form>
    ```

  p Use <code>form-inline</code> class for inline form elements (works on desktop resolutions).

  form.form-inline
    fieldset

      .form-element
        label(for='username') Username
        input(type='text', id='username', placeholder='Your username', class='form-input')

      .form-element
        label(for='password') Password
        input(type='text', id='password', placeholder='Your password', class='form-input')

      button(type='submit', class='button button-primary') Send

  p If not using labels in an inline form add <code>form-no-labels</code> to form element.

  form.form-inline.form-no-labels
    fieldset

      .form-element
        input(type='text', id='username', placeholder='Your username', class='form-input')

      .form-element
        button(type='submit', class='button button-outlined') Send

  :markdown
    ```html
      <form class='form-inline'>
        <fieldset>
          <div class='form-element'>
            <label for='username'>Username</label>
            <input type='text' id='username' placeholder='Your username' class='form-input'>
          </div>

          <div class='form-element'>
            <label for='password'>Password</label>
            <input type='text' id='password' placeholder='Your password' class='form-input'>
          </div>

          <button type='submit' class='button button-primary'>Send</button>
        </fieldset>
      </form>
    ```

  h3 Required inputs
  p To denotate that filling an input is mandatory add <code>required</code> attribute to an <code>input</code>, <code>textarea</code> or <code>select</code>.

  input(type='text', placeholder='This input is required', required, class='form-input')

  :markdown
    ```html
      <input type='text' class='form-input form-element' placeholder='This input is required' required>
    ```

  h3 Disabled inputs
  p You can disable the following elements <code>input</code>, <code>select</code>, <code>textarea</code> and <code>button</code> by adding the <code>disabled</code> attribute.

  input(type='text', placeholder='This input is disabled', disabled, class='form-input')

  :markdown
    ```html
      <input type='text' class='form-input' placeholder='This input is disabled' disabled>
    ```

  h3 Input validity
  p Use <code>input-invalid</code> and <code>input-valid</code> classes for error and success states respectively.

  input(type='text', value='@anyet', class='form-input input-invalid')
  input(type='text', value='Philip Roberts', class='form-input input-valid ')

  :markdown
    ```html
      <input type='text' value='@anyet' class='form-input form-element input-invalid'>
      <input type='text' value='Philip Roberts' class='form-input form-element input-valid'>
    ```

  h3 Other form elements
  p Remember about wrapping both checkboxes and radio buttons in labels with <code>input-radio</code> and <code>input-checkbox</code> class.

  form
    fieldset
      input(type='file', class='form-input form-element')

      label.disabled.input-checkbox.form-element
        input(type='checkbox', disabled)
        | This is a disabled checkbox

      label.input-radio.form-element
        input(type='radio')
        | This is a radio button

      select.form-element
        option Option One

  :markdown
    ```html
      <form>
        <fieldset>
          <input type='file' class='form-input form-element'>

          <label for='checkbox' class='disabled input-checkbox form-element'>
            <input type='checkbox' disabled>
            This is a disabled checkbox
          </label>

          <label for='radio' class='input-radio form-element'>
            <input type='radio'>
            This is a radio button
          </label>

          <select class='form-element'>
            <option>Option one</option>
          </select>

        </fieldset>
      </form>
    ```