CHAP 3. FORM API

Forms should still be encapsulated in a <form> element where the basic submission attributes are set.

Forms still send the values of the controls to the server when the user or the application programmer submits the page.

All of the familiar form controls—text fields, radio buttons, check boxes, and so on—are still present and working as before (albeit with some new features).

Form controls are still fully scriptable for those who wish to write their own modifiers and handlers.

OVERVIEW OF HTML5 FORMS

HTML5 Forms encompasses a great number of new APIs and elements types, and support for them is all over the map now. In order to wrap our heads around all the new functionality, we will address it by breaking it into two categories New input types New functions and attributes

FUNCTIONAL FORMS

Type Purpose

tel Telephone number. (Currently Not support by any browser)

email Email address text field.

url Web location URL.

search Term to supply to a search engine. For example, the search bar atop a browser.

range Numeric selector within a range of values, typically visualized as a slider.

AN INPUT CATALOG

<input type="email">

Example

Exercise

texttel

emaildate

range

The placeholder Attribute Gives input controls an easy way to provide descriptive, alternate hint

text which is shown only when the user has not yet entered any values. <label>Runner: <input name="name" placeholder="First and

last name" required></label> document.myFormName.myInputId.placeholder = "First and last

name" The autocomplete Attribute

Tells the browser whether or not the value of this input should be saved for future.

<input type="text" name="creditcard" autocomplete="off "> document.myFormName.myInputId.autocomplete = "off "

The autofocus Attribute Lets a developer specify that a given form element should take input

focus immediately when the page loads. <input type="search" name="criteria" autofocus> document.myFormName.myInputId.autocomplete = true

USING THE HTML5 FORMS APIS

The list Attribute and the datalist Element Specify a list of possible values foran input.

USING THE HTML5 FORMS APIS (CONT.)

<datalist id="contactList"><option value="x@example.com" label="Racer X"><option value="peter@example.com" label="Peter"></datalist><input type="email" id="contacts" list="contactList">

document.myFormName.myInputId.list = “contactList”

The min and max Attributes Allow a numerical input to be constrained to minimum and maximum

values. <input id="confidence" name="level" type="range" min="0"

max="100" value="0"> document.myFormName.myInputId.min = 0

The step Attribute Specifies the granularity ofincrements or decrements in value as the

range is adjusted. <input id="confidence" name="level" type="range" min="0"

max="100" step="5" value="0"> document.myFormName.myInputId.step = 5

The required Attribute If any input control has the required attribute set, then a value must

be set on it before its form can be submitted. <input type="text" id="firstname" name="first" required> document.myFormName.myInputId.required = true

USING THE HTML5 FORMS APIS (CONT.)

Exercise

PlaceholderPlaceholderPlaceholderPlaceholder

Min: 0 Max: 100Step: 5

DatalistWhite - 1st YearGray - 2nd - 4th YearNavy - Veteran (5+ Years)

CUSTOM VALIDATION: PASSWORD VALIDATION

<form name="passwordChange"><p><label for="password1">New Password:</label><input type="password" id="password1" onchange="checkPasswords()"></p><p><label for="password2">Confirm Password:</label><input type="password" id="password2" onchange="checkPasswords()"></p></form>

function checkPasswords() { var pass1 = document.getElementById("password1"); var pass2 = document.getElementById("password2"); if (pass1.value != pass2.value) pass1.setCustomValidity("Your passwords do not match. Please recheck that yournew password is entered identically in the two fields."); else pass1.setCustomValidity("");}

HTML

JavaScript