Form

Normal Form

A standard form with labeled input fields.

Basic form

General Info Form


Example Code 
  <form>
    <h3>Basic form</h3>
    <fieldset>
        <legend>General Info Form</legend>
        <p>
          <label for="username">Username</label>
          <input id="username" type="text" name="username" placeholder="Text" aria-label="Text">
        </p>

        <p>
          <label for="email">Email</label>
          <input id="email" type="email" name="email" placeholder="Email" aria-label="Email" autocomplete="email">
        </p>

        <p>
          <label for="age">Age</label>
          <input id="age" type="number" name="number" placeholder="Number" aria-label="Number">
        </p>

        <p>
          <label for="password">Password</label>
          <input type="password" name="password" placeholder="Password" aria-label="Password">
        </p>

        <p>
          <label for="mobile">Mobile</label>
          <input id="mobile" type="tel" name="tel" placeholder="Tel" aria-label="Tel" autocomplete="tel">
        </p>

        <p>
          <label for="site">Personal Site</label>
          <input id="site" type="url" name="url" placeholder="Url" aria-label="Url">
        </p>

        <p>
          <label for="birthdate">Birth Date</label>
          <input id="birthdate" type="date" name="date" aria-label="Date">
        </p>

        <p>
          <label for="timezone">Timezone</label>
          <input id="timezone" type="datetime-local" name="datetime-local" aria-label="Datetime local">
        </p>

        <p>
          <label for="month">Birth Month</label>
          <input id="month" type="month" name="month" aria-label="Month">
        </p>

        <p>
          <label for="birthtime">Birth Time</label>
          <input id="birthtime" type="time" name="time" aria-label="Time">
        </p>

        <p>
          <label for="card"> Card type </label>
          <select id="card" name="user-card">
            <option value="visa">Visa</option>
            <option value="mc">Mastercard</option>
            <option value="amex">American Express</option>
          </select>
        </p>

        <p>
          <label for="message">Message</label>
          <textarea>This is message</textarea>
        </p>
    </fieldset>
  </form>

Form State

Different form validation states: error and valid.



Example Code 
  <form>
    <label>
      Required Field
      <input id="valid-field" type="text" required value="" />
    </label>

    <label>
      Valid Field
      <input id="valid-field" class="valid" type="text" value="valid value" />
    </label>

    <label>
      Valid Select
      <select aria-invalid="false" name="user-card">
        <option value="visa">Visa</option>
        <option value="mc">Mastercard</option>
        <option value="amex">American Express</option>
      </select>
      <small>Valid card!</small>
    </label>

    <label>
      Error Field
      <input id="error-field" aria-invalid="true" type="text" value="error value" />
      <small>This field is error</small>
    </label>

    <br/>

    <div>
      <button type="submit">Submit</button>
      <input class="btn" type="submit" value="Submit with input" />
      <button class="btn-outline">Reset</button>
      <button class="btn-danger">Remove</button>
    </div>
  </form>

Select


Example Code 
<label>
    Select your favorite cuisine...
<select name="favorite-cuisine" aria-label="Select your favorite cuisine..." required>
  <option selected disabled value="">
    Select your favorite cuisine...
  </option>
  <option>Italian</option>
  <option>Japanese</option>
  <option>Indian</option>
  <option>Thai</option>
  <option>French</option>
</select>
</label>

Select Multiple


Example Code 
<label>
    Select your favorite snacks...
<select aria-label="Select your favorite snacks..." multiple size="6">
  <option disabled>
    Select your favorite snacks...
  </option>
  <option>Cheese</option>
  <option selected>Fruits</option>
  <option selected>Nuts</option>
  <option>Chocolate</option>
  <option>Crackers</option>
</select>
</label>

Disabled Select


Example Code 
<label>Select a meal type...
  <select name="meal-type" aria-label="Select a meal type..." disabled>
    <option>Select a meal type...</option>
    <option>...</option>
  </select>
</label>

Checkboxes and Radio Buttons


Example Code 
  <label>
    <input type="checkbox" value="1" checked />
    Check me 1
  </label>

  <label>
    <input type="checkbox" value="1" />
    Check me 2
  </label>
  <label>
    <input type="radio" name="version" value="v1" checked />
    Version 1
  </label>

  <label>
    <input type="radio" name="version" value="v2" />
    Version 2
  </label>

  <label>
    <input type="radio" name="version" value="v3" />
    Version 3
  </label>

Switch


Example Code 
      <label class="switch">
        <input name="terms" type="checkbox" role="switch" />
        I agree to the Terms
      </label>
      <label class="switch">
        <input name="terms" type="checkbox" role="switch" checked />
        I agree to the default checked
      </label>
      <label class="switch">
        <input name="terms" type="checkbox" role="switch" disabled />
        I agree to the default disabled
      </label>

Range

<label>
    Brightness
    <input type="range" min="0" max="100" />
</label>