HTML5 FormsJanelle KrebsbachTyson Phillips

13 New Input Types

Placeholder Text<form>

<input name="q" placeholder=“Search Text"> <input type="submit" value="Search">

</form>

Autofocus Fields<form>

<input name="q" autofocus> <input type="submit" value="Search">

</form>

Data Lists<form>

<input type=“text” list=“states”><datalist id=“states” >

<option value=“AK” label=“Alaska”><option value=“AL” label=“Alabama”><option value=“AR” label=“Arkansas”>

</datalist></form>

Spin Boxes<form>

<input type="number" min="0" max="20" step="2" value="2">

</form>

Sliders<form>

<input type="range" min="0" max="20" step="2" value="2"><input type=“submit” value=“Go”>

</form>

Date Pickers<form>

<input type="date"><input type="datetime"><input type="datetime-local"><input type=“time"><input type="week"><input type="month"><input type="submit">

</form>

JavaScript Date Pickerfunction show_calendar(str_target, str_datetime) {

var arr_months = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];var n_weekstart = 1; // day week starts from (normally 0 or 1)

var dt_datetime = (str_datetime == null || str_datetime =="" ? new Date() : str2dt(str_datetime));var dt_prev_month = new Date(dt_datetime);dt_prev_month.setMonth(dt_datetime.getMonth()-1);var dt_next_month = new Date(dt_datetime);dt_next_month.setMonth(dt_datetime.getMonth()+1);var dt_firstday = new Date(dt_datetime);dt_firstday.setDate(1);dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);var dt_lastday = new Date(dt_next_month);dt_lastday.setDate(0);

…

Color Pickers<form>

<input type="color"></form>

Validation<form>

<input type="text" required><input type="hidden" required><input type="image" required>

</form>

<form novalidate><input type="text"><input type=“submit” value=“Submit”>

</form>

Validation Example

Modernizr – HTML5 Detection Library• Open source JavaScript library that detects

support for many HTML5 features.

References•“Web Forms – Dive into HTML 5”

http://diveintohtml5.org/forms.html•“Dectecting HTML5 Features” http

://diveintohtml5.org/detect.html