Embed Size (px)
DESCRIPTION
Chapter 30. The HTML 5 Forms Processing. Learning Objectives. What the three form elements are How to use the HTML 5 < datalist > tag to specify a list of words’ form fields to assist with autocomplete operations - PowerPoint PPT Presentation
Citation preview
CHAPTER 30
T H E HT M L 5
FO R M S P
R O C E S S I NG
LEARNING OBJECTIVES• What the three form elements are• How to use the HTML 5 <datalist> tag to specify a list of words’ form fields
to assist with autocomplete operations• How to use the HTML 5 <keygen> tag to generate a private and public
encryption key pair• How to use the HTML 5 <output> tag to integrate the result of a calculation
into a form’s display• How to use the HTML 5 form attribute values• What the HTML 5 input values are
HTML 5 FORM ELEMENTS• A form element is a tag or tag pair that you can place within the
<form> and </form> tag pair. HTML 5 adds three form elements to examine: <datalist>, <keygen>, and <output>.
CREATING A DATA LIST• A data list, in HTML 5, is a list of entries, similar to entries within a
pull-down list, but without the pull-down. The browser uses the list to auto-complete user input as you type. Autocomplete is an input technique where a program, such as a browser, attempts to anticipate a user’s remaining input. To create a data list, you must specific options within the <datalist> and </datalist> tag pair:<datalist id="states"><option>Alabama</option><option>Arizona</option><option>Arkansas</option><option>California</option><option>Nevada</option></datalist>
STATES DATA LIST EXAMPLE<!DOCTYPE html><html><body><form action="http://www.WebsiteDevelopmentBook.com/Chapter06/FileUploader.php" enctype="multipart/form-data" method="post"><datalist id="states"><option>Alabama</option><option>Arizona</option><option>Arkansas</option><option>California</option><option>Nevada</option></datalist>
State: <input type="text" list="states" /><input type="submit" value="Submit" /></form></body></html>
CREATING A PRIVATE AND PUBLIC KEY PAIR• By default, unless you are using an https:// connection, the content
that a form sends to a remote server is not encrypted. To move toward encrypted content, HTML 5 has introduced the <keygen> tag, which directs the browser to create and store a private key and to send a public key to the server. At the time of this writing, the <keygen> tag is still in flux with varied browser support:
<keygen name=“keyname” />
USING THE OUTPUT OF A CALCULATION• The HTML 5 <output> and </output> tag pair lets you display the result, or output, of
a calculation. The following HTML file, OutputDemo.html, illustrates the tag’s use:<!DOCTYPE html><html><body><form oninput="add.value = parseInt(x.value) + parseInt(y.value)">x <input type="text" name="x" value="0" />y <input type="text" name="y" value="0" /><br/><br/>
Addition: <output name="add" for="x y"></output><br/></form></body></html>
• As you can see, the page displays two input fields. After you type values for each field, the form will display the results of an addition of the two values, as shown. Again, not all browsers may support the <output> tag.
HTML 5 FORM ATTRIBUTES• In addition to providing three new form elements, HTML 5 provides
several attributes for either the <form> or <input> tags. The sections that follow examine each attribute. Again, before you use these attributes within a real world application, take time to test your code within a variety of browsers.
DIRECTING THE BROWSER TO AUTOCOMPLETE A FIELD OR FORM• As you surf the Web, there may be times when your browser
attempts to autocomplete text in fields as you type, based on your previous responses. Under HTML 5, you can enable or disable such processing for an entire form or for fields on a field-by-field basis:
<form autocomplete=“off”><input type=“text” name= “username” autocomplete= “off”>
DISABLING FORM VALIDATION• By default, when you use different HTML 5 field types and
attributes, your browser tries to validate form fields. Depending on the form’s purpose, you may want to disable such validation using the <form> tag novalidate attribute:
<formnovalidate>
SPECIFYING A FIELD TO RECEIVE THE INPUT FOCUS WITHIN A FORM• By default, when you create an HTML form, the browser assigns the
first field in the form with the keyboard focus. Using the HTML 5 autofocus attribute, you can specify the field that you desire to first receive the focus:
Username: <input type=“text” name= “username”></input /><br/>Password: <input type=“password” name= “UserPassword” /><br/>Nickname: <input type=“text” name= “nickname” autofocus />
USING THE <INPUT> TAG FORM ATTRIBUTE• Normally, developers group a form’s <input> tags within the
<form>and </form> tag pair. If, for some reason, you have an <input> tag that resides outside of a form, you can use the form attribute to specify the tag’s corresponding form:
Nickname: <input type=“text” name= “nickname” form=“formName” / >
OVERRIDING A FORM’S SUBMIT-METHOD ATTRIBUTE• As you have learned, when a browser submits a form’s data, the
browser performs either a get or put operation:<form
action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post">
• Depending on the processing you are performing, there may be times when you will want to override a form’s specified submission method. In such cases, use the <input> tag formmethod attribute:
<input type=“submit” formmethod=“get” />
OVERRIDING A FORM’S VALIDATION PROCESSING• As you have learned, HTML 5 provides the <form> tag novalidate
attribute that specifies whether or not the form’s contents should be validated. Depending on your form’s processing, there may be times when you will want to provide a button that allows submission without validation. In such cases, use the <input> tag formnovalidate attribute:
Field: <input type=“email” formnovalidate />
CONTROLLING THE DISPLAY OF A SERVER’S RESPONSE• When you submit a form to a remote server, should the server send a response, the
page displays the response. Depending on your form’s purpose, there may be times when you will want to display the server response within a different window. To do so, use the formTarget attribute. The following HTML file, FormTarget.html, uses the FormEcho script on this book’s companion website. The page provides a submit button, which will use the attribute to display the script’s results in a new window:<!DOCTYPE html><html><body><form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post">Value: <input type="text" name="UserEntry" /><br/><br/><input type="submit" value="Back" /><input type="submit" formTarget="new" value="New window" /></form></body></html>
SPECIFYING AN INPUT TAG’S HEIGHT AND WIDTH• As you have learned, using an element’s height and width attributes, you can
specify the item’s size within an HTML page. When you specify the HTML 5 type=”image” attribute, you can specify an <input> tag’s height and width. The following HTML file, InputSize.html, specifies the size of an <input> element:<!DOCTYPE html><html><body><form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post"><input type="image" src="pickme.jpg" width="100" height="50" /><input type="image" src="cool.jpg" width="100" height="50" /></form></body></html>
SPECIFYING MIN AND MAX VALUES• Often, a field will prompt a user for a numeric or date field for which
you want to restrict the user to a range of values. Using the min and max attributes, you can specify the ranges, as shown here:
Age: <input type="number" min=“0” max=“120” />Age: <input type="range" min=“0” max=“120” />
SPECIFYING MULTIPLE VALUES FOR A FILE-UPLOAD OPERATION• In Chapter 6, you learned that using the <input> tag type=“file”
attribute, you can allow the user to select a file for an upload operation. Using the HTML 5 multiple attribute, you can allow the user to select multiple files:
File(s):<input type="file" name="file" id="file" multiple />
SPECIFYING A REGULAR EXPRESSION PATTERN FOR TEXT INPUT• Often, when you prompt users for input using a form, such as a phone number or e-mail
address, you will want them to put the data within a specific format. Using the HTML 5 pattern attribute, you can specify a regular expression the user’s input must meet in order to be considered valid. A regular expression is a sequence of characters that can be used to match an entry based upon predefined rules. The following statements, for example, illustrate how you might use the attribute for a phone number:<!DOCTYPE html><html><body><form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post">Phone <input name="phone" type="text" pattern="^[2-9]\d{2}-\d{3}-\d{4}$" /><br/><br/><input type="submit" /></form></body></html>
USING A DATA LIST REFERENCE• As you have learned, an HTML 5 data list defines a list of entries the
browser uses to match keyboard input for a field. Using the list attribute, you can refer to a pre-existing data list:
State: <input type="text" list="states" />
SPECIFYING A FIELD PLACEHOLDER• Normally, when a page displays a form, the browser displays blank values for each
text field. The HTML 5 placeholder attribute lets you specify a value that the browser initially displays within a field. The value might, for example, show a sample of the data format the field expects. The following HTML file, UsePlaceholder.html, uses two placeholder values:<!DOCTYPE html><html><body><form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post">Default: <input type="text"/><br/>Placeholder: <input type="text" placeholder="(###)-###-####" /><br/><input type="submit" /></form></body></html>
SPECIFYING THAT A FIELD IS REQUIRED• Most forms have one or more values for which the user must provide values.
Normally, after the user submits the form, a JavaScript routine on the page detects missing fields and notifies you to provide them. HTML 5, in contrast, provides the required attribute, which tells the browser that a field is required. The following HTML 5 file, UseRequired.html, uses a required field:<!DOCTYPE html><html><body><form action="http://www.WebsiteDevelopmentBook.com/FormEcho.php" method="post">Default: <input type="text"/><br/>Placeholder: <input type="text" required /><br/><br/><input type="submit" /></form></body></html>
SPECIFYING A STEP ATTRIBUTE• Depending on the type of values for which your form is prompting,
there may be times when you want to specify a list of numbers separated by a specific value, such as 0, 5, 10, 15, and so on. Only a few browsers currently support the step attribute:
<input type="number" name="Fives" step="5">
UNDERSTANDING HTML 5 INPUT • As you have learned in Chapter 6, within an <input> tag you can
use the type attribute to specify the kind of value a field accepts, such as text, password, radio buttons, check boxes, and so on. HTML 5 adds the following <input> tag types specified in Table 30.1.
REAL WORLD DESIGN – HTML 5 FORMS• To help you get started with HTML 5 form attributes and elements,
the W3Schools web site provides two excellent tutorials. The first, at http://www.w3schools.com/html/html5_form_elements.asp, examines HTML 5 form elements. The second, at http://www.w3schools.com/html/html5_form_attributes.asp, presents form attributes introduced with HTML 5.
SUMMARY• Across the Web, sites make extensive use of forms to prompt you
for input. Chapter 6, “Getting User Input With Forms,” examines form processing and user input operations in detail.
• This chapter introduces the form-based features provided in HTML 5. • Unfortunately, many of these features are still evolving, and their
support is varied. That said, the features provide you with insights to browser capabilities in the future.
• Should you use the techniques this chapter presents, it is important that you test each using a variety of browsers to ensure that your browser provides the necessary support.
