Some New HTML5 Input Elements

SOME NEW HTML5INPUT ELEMENTS

PROF. DAVID ROSSITER

1/6

AFTER THIS PRESENTATIONYou'll be able to use somenew 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 ELEMENTSNumber 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<form action="http://ihome.ust.hk/~rossiter/cgi­bin/show_everything.php">  <label for="age">Your age:</label>  <input type="number" min="0" max="99" step="1" value="18" name="age" required><br>  <label for="birthday">Your birthday:</label>  <input type="date" name="birthday"><br>  <label for="wakeup">You want to wake up at:</label>  <input type="time" name="wakeup"><br>  <label for="color">Your favorite color:</label>  <input type="color" name="color"> <br>  <label for="mood">Your mood:</label>  Bad <input type="range" min="0" max="100" step="5" value="50" name="mood"> Good<br  <input type="submit" value="Submit!"> </form>

5/6

Your age: 18Your birthday:  dd/mm/yyyyYou want to wake up at:  ‐‐:‐‐Your favorite color:   

Your mood: Bad   GoodSubmit!

Select to open the examplehere

6/6