ࡱ > 1 U X $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T _ G bjbj . r=\r=\> v 8 R T 4 l ! ! : *" *" " S S S H J J J J J J Ǎ \ J S O S S S J *" " , _ e e e S *" " H e S H e e r p s *" dQK [ jr 4 u 0 xr # d | # s s : # P S S e S S S S S J J e v S S S S S S S # S S S S S S S S S > : ESSENTIAL HTML5 WEB FORM CONTROLS HTML has always supported form controls using the element, such as text boxes: or radio buttons: You create such controls using the element with the type attribute set to the type of control you want (check box, radio button, text field), and the name and id attribute set to the name of the control as youll reference it in code (in a scripting language like JavaScript or a server-side language like PHP). HTML5 extends the number of form controls available to you, adding such controls as a date-time picker and a numeric range control. We will create an example page, webforms.html, that displays the new controls. The only browser that displays the new controls so far is the Opera browser. We will also create a small PHP server-side program that displays the value you entered into the date time picker control when you click the Submit button in this example to show how you can extract data from these controls on the server. For reference, you can read what W3C has to say about the web form controls at HYPERLINK "http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#attr-input-type" www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#attr-input-type Web Form Controls Element: Required attribute: You specify which web form control you want with the type attribute. TypeControl Typebutton A buttoncheckbox A check boxcolorA colour wheeldateA date controldatetimeA date and time controldatetime-localA date and time controlemailA text fieldfileA label and a buttonhiddenN/AimageEither a clickable image or a buttonmonthA month controlnumberA text field or spinner controlpasswordText field that obscures data entryradioA radio buttonrangeA slider control or similarresetA buttonsearchSearch fieldsubmitA buttontelA text fieldtextText fieldtime A time controlurl A text fieldweek A week control Getting to Know the Web Form Controls API You know that you create web form controls with the element, setting the type attribute as shown in the above table. But what other attributes are available for each control? For example, when you use a range control - which lets the user specify values using a slideryou can use min and max attributes in the element in addition to the type attribute. Allowed Control Attributes: In addition, each control has built-in functions, which can be called in JavaScript when you access the control as an object. Built-in Control Data Attributes and Functions Finally, many controls have built-in events that occur when the user enters data. Control Events Whereas some controls return simple text strings, others return formatted data. You can see the data types returned by each control in the table below: Control Data Types TypeData Typebutton N/Acheckbox A set of zero or more values from a predefined listcolorAn sRGB color with 8-bit red, green and blue componentsdateA date (year, month, day) with no time zonedatetimeA date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTCdatetime-localA date and time (year, month, day, hour, minute, second, fraction of a second) with no time zoneemailAn email address or list of email addressesfileZero or more files each with a MIME type and optionally a filenamehiddenAn arbitrary stringimageA coordinate, relative to a particular images size, with the extra semantic that it must be the last value selected and initiates form submissionmonthA date consisting of a year and a month with no time zonenumberA numerical valuepasswordText with no line breaks (sensitive information)radioAn enumerated valuerangeA numerical value, with the extra semantic that the exact value is not importantresetN/AsearchText with no line breakssubmitAn enumerated value, with the extra semantic that it must be the last value selected and initiates form submissiontelText with no line breakstextText with no line breakstime A time (hour, minute, seconds, fractional seconds) with no time zoneurl An absolute IRI (Internationalized Resource Identifier)week A date consisting of a week-year number and a week number with no time zone The following exercises can be completed using any suitable text editor for example, using Code View in Dreamweaver or Notepad++. We will be using Dreamweaver. Create a new folder in your MySites folder called Essential HTML5 if this folder does not already exist. Locate, download, unzip and copy the files that are located on BREO to your Essential HTML5 folder. Define a new Dreamweaver site called Essential HTML5 and set the root folder as the Essential HTML5 folder which you have just created. Create a new HTML5 document and save the page as webforms.html. Exercise Starting the Web Forms Example In this exercise, were going to put the new HTML5 controls to work in an example, webforms.html. Using Code View in Dreamweaver or Notepad++, enter the following code to create the HTML table that will enclose the web form controls, and add the Submit button.