5.3. 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.

5.3.1. Button

<button>Click Me</button>

5.3.2. 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

5.3.3. Text Input

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

5.3.4. Password

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

5.3.5. 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

5.3.6. 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

5.3.7. 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">

5.3.8. Range

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

5.3.9. Date Stuff

  • month

  • datetime-local

  • week

  • time

You have attempted of activities on this page