Text boxes

A text box is the most basic <input> element with many variants which alter the keyboard (but always produce a string anyway).

<input type="text" name="title" value="Interstellar" />
<input type="tel" name="phone" value="123456789" />
<input type="url" name="url" value="https://bit.ly/k00Lify" />
<input type="email" name="address" value="" />
<input type="number" name="length" value="0" />

Buttons

<input type="button" value="I don't work" />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />

The tag <button> works like <input type="submit"> within a <form>, but as just a regular button outside.

Radio buttons

Different radio buttons are grouped just by using the same name attribute. Each radio button represents a possible value for that field:

<label><input type="radio" name="color" value="red" />Red</label>
<label><input type="radio" name="color" value="blue" />Blue</label>
<label><input type="radio" name="color" value="yellow" />Yellow</label>

Checkboxes

A checkbox uses the checked attribute (with values "on" or "off") to set its value:

<input type="checkbox" name="married" checked="on" />

Selection of options

A <select> displays a drop-down list with options:

<select name="fruit">
  <option value="orange">Orange</option>
  <option value="lemon">Lemon</option>
  <option value="Strawberry">Strawberry</option>
  <option value="Kiwi">Kiwi</option>
  <option value="Peach">Peach</option>
  <option value="Banana">Banana</option>
</select>

Sliders

A slider can configure a value in a range:

<input type="range" id="volume" min="0" max="11" />

Color pickers

A color picker lets us to pick a color easily:

<input type="color" value="#e66465" />