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>

Click Me

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

5.3.10. Drop Down Menus

<select id="priority">
    <option>High</option>
    <option>Medium</option>
    <option>low</option>
</select>

High Medium low

You have attempted of activities on this page