SOME NEW HTML5

INPUT ELEMENTS
PROF. DAVID ROSSITER
1/6

AFTER THIS PRESENTATION

You'll be able to use some
new HTML5 input elements

2/6

ELEMENTS & ATTRIBUTES WE WILL LOOK AT

<input type="number">
<input type="date">
<input type="color">
<input type="range">
<input type="time">

3/6

NEW HTML5 INPUT ELEMENTS

Number Input

<input type="number">

Date Input

<input type="date">

Time Input

<input type="time">

Color Picker

<input type="color">

Slider

<input type="range">

4/6

EXAMPLE
<formaction="http://ihome.ust.hk/~rossiter/cgibin/show_everything.php">
<labelfor="age">Yourage:</label>
<inputtype="number"min="0"max="99"step="1"value="18"name="age"required><br>
<labelfor="birthday">Yourbirthday:</label>
<inputtype="date"name="birthday"><br>
<labelfor="wakeup">Youwanttowakeupat:</label>
<inputtype="time"name="wakeup"><br>
<labelfor="color">Yourfavoritecolor:</label>
<inputtype="color"name="color"><br>
<labelfor="mood">Yourmood:</label>
Bad<inputtype="range"min="0"max="100"step="5"value="50"name="mood">Good<br
<inputtype="submit"value="Submit!">
</form>

5/6

Yourage: 18
Yourbirthday: dd/mm/yyyy
Youwanttowakeupat: :
Yourfavoritecolor:
Yourmood:Bad

Good

Submit!

Select here to open the example

6/6