Native Web Form Controls

This webpage documents all native HTML5 elements. Their support has improved in recent years, yet not all browsers support all the features. You can open this page in various browsers on a mobile, tablet, desktop, car, or whatever device you use to consume the web and you can view how the browser renders the element and its experience.

Button

<button>Button</button>

Progress

69%

<progress max="100" value="69">69%</progress>

<progress></progress>

Meter

at 350/1024

<meter min="0" max="1024" low="200" high="800" optimum="400" value="350">
  at 350/1024
</meter>

Select

<select>
  <option value="">-- Select --</option>
  <option value="1">Mercury</option>
  <option value="2">Venus</option>
  <option value="3">Earth</option>
</select>

Optgroup

<select>
  <optgroup label="Gas Giants">
    <option>Jupiter</option>
    <option>Saturn</option>
  </optgroup>
  <optgroup label="Ice Giants">
    <option>Uranus</option>
    <option>Neptune</option>
  </optgroup>
</select>

Fieldset

Choose your favorite constellation Orion
Dipper
Virgo

<fieldset>
  <legend>Choose your favorite constellation</legend>
  <input type="radio" id="orion" name="const" />
  <label for="orion">Orion</label> <br/>
  <input type="radio" id="dipper" name="const" />
  <label for="dipper">Dipper</label> <br/>
  <input type="radio" id="virgo" name="const" />
  <label for="virgo">Virgo</label>
</fieldset>

Textarea

<textarea></textarea>

<textarea rows="1" cols="25"></textarea>

Input Element

Checkbox

Unchecked

Checked

<div>
  <input type="checkbox" id="uc" />
  <label for="uc">Unchecked</label>
</div>
<div>
  <input type="checkbox" id="cs" checked />
  <label for="cs">Checked</label>
</div>

Radio

Curiosity

Perseverance

<div>
  <input type="radio" id="Curiosity" name="rover" checked />
  <label>Curiosity</label>
</div>
  
<div>
  <input type="radio" id="Perseverance" name="rover" />
  <label>Perseverance</label>
</div>

Range

<input type="range" />

<input type="range" step="0.005" />

<input type="range" min="-50" max="50" value="-20" />

<input type="range" list="data-range" value="80" />
<datalist id="data-range">
  <option value="20"></option>
  <option value="40"></option>
  <option value="60"></option>
  <option value="80"></option>
</datalist>

File

<input type="file" />

<input type="file" accept=".png,.jpeg,.jpg,.tiff,.gif" />

<input type="file" accept="audio/*" multiple />

<input type="file" accept="image/*" capture />

Color

<input type="color" />

<input type="color" value="#12c05b" />

<div class="el"><input type="color" list="color" /></div>
<datalist id="color">
  <option value="#173f5f"></option>
  <option value="#20639b"></option>
  <option value="#3caea3"></option>
  <option value="#f6d55c"></option>
  <option value="#ed553b"></option>
</datalist>

Text

<input type="text" />

<input type="text" value="disabled" disabled />

<input type="text" spellcheck="false" placeholder="placeholder" />

By default spellcheck is enabled

<input type="text" size="3" />

<input type="text" autocorrect="true" />

<input type="text" list="rocket" />
<datalist id="rocket">
  <option value="Saturn V"></option>
  <option value="Delta IV Heavy"></option>
  <option value="Falcon Heavy"></option>
  <option value="Starship"></option>
</datalist>

<form>
  <input type="text" required />
  <button type="submit">Submit</button>
</form>

<form>
  <input type="text" pattern="[a-zA-Z]{6,8} />
  <button type="submit">Submit</button>
</form>

<form>
<input type="text" minlength="8" maxlength="12" />
<button type="submit">Submit</button>
</form>

Password

<input type="password" />

<input type="password" inputmode="numeric" />

<form>
  <input type="text" pattern="[a-zA-Z1-90]{8,12}" minlength="8" maxlength="12" />
  <button type="submit">Submit</button>
</form>

Time

<input type="time" />

<input type="time" value="13:30:42" step="10" />

<input type="time" min="13:30" max="15:30" />

<input type="time" type="time" />
<datalist id="time">
  <option value="13:00"></option>
  <option value="13:30"></option>
  <option value="14:00"></option>
  <option value="14:30"></option>
</datalist>

Date

<input type="date" />

<input type="date" value="2020-03-21" step="3" />

<input type="date" min="2020-01-01" max="2020-04-01" />

<input type="date" list="date" />
<datalist id="date">
  <option value="2020-03-21"></option>
  <option value="2020-03-22"></option>
  <option value="2020-03-23"></option>
</datalist>

Datetime-local

<input type="datetime-local" />

<input type="datetime-local" value="2020-01-13T13:30:15" step="120" />

<input type="datetime-local" min="2020-01-01T13:30" max="2020-01-10T10:30" />

<input type="datetime-local" list="date-time" />
<datalist id="date-time">
  <option value="2020-01-01T10:21"></option>
  <option value="2020-01-03T13:30"></option>
  <option value="2020-01-05T17:40"></option>
</datalist>

Week

<input type="week" />

<input type="week" value="2020-W03" step="2" />

<input type="week" min="2020-W01" max="2020-W05" />

<input type="week" list="date-week" />
<datalist id="date-week">
  <option value="2020-W01"></option>
  <option value="2020-W03"></option>
  <option value="2020-W07"></option>
</datalist>

Month

<input type="month" />

<input type="month" value="2020-03" step="3" />

<input type="month" min="2020-01" max="2020-04" />

<input type="month" list="date-month"  />
<datalist id="date-month">
  <option value="2020-01"></option>
  <option value="2020-03"></option>
  <option value="2020-07"></option>
</datalist>

Email

<form>
  <input type="email" />
  <button type="submit">submit</button>
</form>

<form>
  <input type="email" multiple />
  <button type="submit">submit</button>
</form>

<input type="email" list="date-email" />
<datalist id="date-email">
  <option value="[email protected]"></option>
  <option value="[email protected]"></option>
  <option value="[email protected]"></option>
  <option value="[email protected]"></option>
</datalist>

Number

<input type="number" />

<input type="number" value="69" step="0.13" />

<input type="number" min="5" max="10" />

<input type="number" list="input-number" />
<datalist id="input-number">
  <option value="4"></option>
  <option value="13"></option>
  <option value="69"></option>
</datalist>

Search

<input type="search" />

<input type="search" spellcheck="false" />

<input type="search" list="input-search" />
<datalist id="input-search">
  <option value="Sojourner"></option>
  <option value="Opportunity"></option>
  <option value="Spirit"></option>
  <option value="Curiosity"></option>
  <option value="Perseverance"></option>
</datalist>

Tel

<input type="tel" />

<form>
  <input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="xxx-xxx-xxxx" />
  <button type="submit">submit</button>
</form>

Url

<input type="url" />

<input type="url" list="url" />
<datalist id="url">
  <option value="https://mohanvadivel.com/"></option>
  <option value="http://www.google.com/"></option>
  <option value="http://w3.org/"></option>
</datalist>