Native Form Controls

View on Github

This is how the following form elements look like in your system and browser.
No styles where added to the elements.
When the browser does not support the specified control it fallbacks to a <input type="text">.

Buttons

Everything that is a button or behaves as a button.
Markup Output
<button type="button">Button</button>
<button type="button" disabled>Button</button>
<button type="reset">Reset</button>
<button type="reset" disabled>Reset</button>
<button type="submit">Submit</button>
<button type="submit" disabled>Submit</button>
<input type="button" value="Button">
<input type="button" value="Button" disabled>
<input type="reset">
<input type="reset" disabled>
<input type="submit">
<input type="submit" disabled>
<input type="image" src="android-icon-48x48.png">
<input type="image" src="android-icon-48x48.png" disabled>

Inputs

Inputs besides the ones used as buttons.
Markup Output
<input type="checkbox" name="checkboxGroup" value="val1">
<input type="checkbox" name="checkboxGroup" value="val2">
<input type="checkbox" name="checkboxGroup" value="1" disabled>
<input type="checkbox" name="checkboxGroup" value="2" disabled>
<input type="color">
<input type="color" disabled>
<input type="date">
<input type="date" disabled>
<input type="datetime-local">
<input type="datetime-local" disabled>
<input type="email">
<input type="email" disabled>
<input type="file">
<input type="file" multiple>
<input type="file" disabled>
<input type="hidden"> Nothing to see here!
<input type="month">
<input type="month" disabled>
<input type="number">
<input type="number" disabled>
<input type="number" step="10">
<input type="number" step="10" disabled>
<input type="number" min="-5" max="5" step="0.5">
<input type="number" min="-5" max="5" step="0.5" disabled>
<input type="password">
<input type="password" disabled>
<input type="radio" name="radioGroup" value="1">
<input type="radio" name="radioGroup" value="2">
<input type="radio" name="radioGroup" value="1" disabled>
<input type="radio" name="radioGroup" value="2" disabled>
<input type="range">
<input type="range" disabled>
<input type="range" min="-5" max="5" step="0.5">
<input type="range" min="-5" max="5" step="0.5" disabled>
<input type="search">
<input type="search" list="search-suggestions">
<datalist id="search-suggestions">
   <option label="MERC" value="Mercedes"></option>
   <option label="RACE" value="Ferrari"></option>
   <option label="FIAT" value="Fiat"></option>
   <option label="MTS" value="Mitsubishi"></option>
</datalist>
Paired with a datalist element.
<input type="search" disabled>
<input type="tel" pattern="[0-9]{10}">
<input type="text">
<input type="text" placeholder="Placeholder text">
<input type="time">
<input type="time" disabled>
<input type="url">
<input type="url" disabled>
<input type="week">
<input type="week" disabled>

Misc

Everything else
Markup Output
<progress></progress>
<progress max="100" value="45"></progress>
<meter min="0" max="500" value="350">350 degrees</meter> 350 degrees
<fieldset>
   <legend>FIELDSET LEGEND</legend>
   <button type="submit">Submit</button>
   <input type="text">
</fieldset>
FIELDSET LEGEND
<fieldset disabled>
   <legend>FIELDSET LEGEND</legend>
   <button type="submit">Submit</button>
   <input type="text">
</fieldset>
FIELDSET LEGEND
<select>
   <option value="1">Option 1</option>
   <option value="1">Option 2</option>
   <option value="1">Option 3</option>
</select>
<select>
   <optgroup label="Group 1">
     <option value="1">Option 1</option>
     <option value="1">Option 2</option>
     <option value="1">Option 3</option>
   </optgroup>
   <optgroup label="Group 2">
     <option value="1">Option 1</option>
     <option value="1">Option 2</option>
     <option value="1">Option 3</option>
   </optgroup>
   <optgroup label="Group 3" disabled>
     <option value="1">Option 1</option>
     <option value="1">Option 2</option>
     <option value="1">Option 3</option>
   </optgroup>
</select>