Skip to content

Classless Form

For a classless approach, wrap your form in form.af-form. This enables automatic styling for additional form elements.

Markup

<form class="af-form">
  <label for="email">
    Email
  </label>
  <input type="email" id="email" name="email" />
  <label for="country">
    Country
  </label>
  <select id="country" name="country">
    <option>
      Choose...
    </option>
  </select>
  <label for="message">
    Message
  </label>
  <textarea id="message" name="message">
  </textarea>
  <button class="af-btn" type="submit">
    Submit
  </button>
</form>

What works without classes

Inside form.af-form, these elements work without classes:

input[type="text"], input[type="email"], input[type="password"], etc.
textarea
input[type="checkbox"]
input[type="radio"]
input[type="range"]
input[type="file"]

Note: label and input[type="checkbox"][role="switch"] already work without form.af-form (they have default styling). select requires either .af-form wrapper or .af-select class.

Live example