CHAP 3. FORM API

 Forms should still be encapsulated in a 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

TypePurpose telTelephone number. (Currently Not support by any browser) address text field. urlWeb location URL. searchTerm to supply to a search engine. For example, the search bar atop a browser. rangeNumeric selector within a range of values, typically visualized as a slider. AN INPUT CATALOG Example

Exercise text tel date 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.  Runner:  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.   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.   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.) document.myFormName.myInputId.list = “contactList”

 The min and max Attributes  Allow a numerical input to be constrained to minimum and maximum values.   document.myFormName.myInputId.min = 0  The step Attribute  Specifies the granularity ofincrements or decrements in value as the range is adjusted.   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.   document.myFormName.myInputId.required = true USING THE HTML5 FORMS APIS (CONT.)

Exercise Placeholder Min: 0 Max: 100 Step: 5 Datalist White - 1st Year Gray - 2nd - 4th Year Navy - Veteran (5+ Years)

CUSTOM VALIDATION: PASSWORD VALIDATION New Password: Confirm Password: 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 your new password is entered identically in the two fields."); else pass1.setCustomValidity(""); } HTML JavaScript