All Form Elements

all-form-elements.markdown

All Form Elements

All the form elements on one page so you can see default browser styling. Fork it to play with your own styling.

Forked from Chris Smith's Pen All Form Elements.

A Pen by HigherEducation.com on CodePen.

License.

index.html

<form>
  <div>
  <p>
    <label>
      text<br>
    <input type="text">
    </label>
  </p>
  <p>
    <label>
      password<br>
    <input type="password">
    </label>
  </p>
  <p>
    <label>
      number<br>
    <input type="number">
    </label>
  </p>
  <p>
    <label>
      email<br>
    <input type="email">
    </label>
  </p>
  <p>
    <label>
      url<br>
    <input type="text">
    </label>
  </p>
  <p>
    <label>
      tel<br>
    <input type="tel">
    </label>
  </p>
  <p>
    <label>
      search<br>
    <input type="search">
    </label>
  </p>
  <p>
    <label>
      textarea<br>
      <textarea></textarea>
    </label>
  </p>
  <p>
    <label>
      date<br>
    <input type="date">
    </label>
  </p>
  <p>
    <label>
      datetime<br>
    <input type="datetime">
    </label>
  </p>
  <p>
    <label>
      datetime-local<br>
    <input type="datetime-local">
    </label>
  </p>
  <p>
    <label>
      month<br>
    <input type="month">
    </label>
  </p>
  <p>
    <label>
      week<br>
    <input type="week">
    </label>
  </p>
  <p>
    <label>
      time<br>
    <input type="time">
    </label>
  </p>
  <p>
    <label>
      select<br>
      <select>
        <optgroup label="optgroup">
          <option>option 1</option>
          <option>option 2</option>
          <option>option 3</option>
        </optgroup>
      </select>
    </label>
  </p>
  <p>
    <label>
      select (multiple attr)<br>
      <select multiple>
        <optgroup label="optgroup">
          <option>option 1</option>
          <option>option 2</option>
          <option>option 3</option>
        </optgroup>
      </select>
    </label>
  </p>
  <p>
    <label>
      select (size attr)<br>
      <select size="4">
        <optgroup label="optgroup">
          <option>option 1</option>
          <option>option 2</option>
          <option>option 3</option>
        </optgroup>
      </select>
    </label>
  </p>
  <p>
    <label>
      datalist<br>
      <input list="datalist">
      <datalist id="datalist">
        <option value="option">
      </datalist>
    </label>
  </p>
  <p>
    <label>
      keygen<br>
      <keygen>
    </label>
  </p>
  <p>
    <label>
      output<br>
      <output>123</output>
    </label>
  </p>
  <p>
    <label>
      radio<br>
    <input type="radio">
    </label>
  </p>
  <p>
    <label>
      checkbox<br>
    <input type="checkbox">
    </label>
  </p>
  <p>
    <label>
      color<br>
    <input type="color">
    </label>
  </p>
  <p>
    <label>
      range<br>
    <input type="range">
    </label>
  </p>
  <p>
    <label>
      file<br>
    <input type="file">
    </label>
  </p>
  <p>
    <label>
      submit<br>
    <input type="submit">
    </label>
  </p>
  <p>
    <label>
      reset<br>
    <input type="reset">
    </label>
  </p>
  <p>
    <label>
      button (input tag)<br>
    <input type="button" value="Button">
    </label>
  </p>
  <p>
    <label>
      button (button tag)<br>
      <button>Button</button>
    </label>
  </p>
  </div>
  <fieldset>
    <legend>legend</legend>
    fieldset
  </fieldset>
</form>

style.css

html, body {
  margin:0;
  padding:0;
}

form div {
  display:flex;
  flex-wrap:wrap;
}

form p {
  margin:1em;
  padding:1em;
}

form label {
  color:#999;
  font-family:sans-serif;
}

fieldset {
  margin:2em;
}