HTML Elements for Interaction

Building interactive web pages requires a variety of elements that allow your application to interact with the user. The HTML5 standard provides us with many different elements from which we can construct an application.

Button

<button>Click Me</button>

The Input Tag

Many of the elements used in constructing a user interface use the input tag. All of the input elements have a common set of attributes, the most important is the type attribute as that is what determines how the input element will look.

  • type
  • name
  • id
  • value

Text Input

<input type="text" value="changeme" size="40">

Password

<input type="password" value="secret" size="40">

Checkbox

<input type="checkbox" name="group1" value="audi">Audi<br />
<input type="checkbox" name="group1" value="bmw">BMW<br />
<input type="checkbox" name="group1" value="mercedes">Mercedes<br />
Audi
BMW
Mercedes

Radio

<input type="radio" name="group1" value="audi">Audi<br />
<input type="radio" name="group1" value="bmw">BMW<br />
<input type="radio" name="group1" value="mercedes">Mercedes<br />
Audi
BMW
Mercedes

Color

Depending on the browser you are using this will either look like a generic text box or it will appear as a colored block which when you click on it will bring up a color picker.

<input type="color">

Range

<input type="range" min=0 max=255 value=125>

Date Stuff

  • month
  • datetime-local
  • week
  • time
Next Section - Javascript Quiz