Introduction :
HTML, the core language of the World Wide Web is being used for designing Web pages for nearly a decade. With the continuous evolvement in the Web, Web designers and programmers find it difficult to make pages more flexible and dynamic in behavior. The dynamic behavior is particularly expected when displaying Web forms to the users. For example, HTML5 allows creating combo boxes, adding placeholder text on the page, providing client-side validations through JavaScript, and achieving dynamic behavior using Document Object Model (DOM) API.
Although Internet Explorer 9 and Google Chrome 19 support most HTML5 features, there are some that are supported only in Opera 11.
Introduction to HTML5 Forms
Among the other features of HTML5, there has been a great enhancement to Web forms. HTML5 Web forms are those sections on the Web page that contain special elements called as controls. The controls, such as check boxes, radio buttons, and text boxes provide a visual interface to the user to interact with them. A user provides data through these controls that is sent to the server for further processing. Thus, it is very important to create forms with lot of consideration for usability and accessibility by the users.
In HTML5, creation of form is made easier for Web developers by standardizing them with rich form controls. It also provides client-side validations that are now handled natively by the browsers. This not only reduces the load time of the pages, but also removes the need of the repetitive JavaScript codes to be included on the page.
Even the visual appearance of the forms is improved when displayed on different devices, such as iPhone, ipad, touch screens, and browsers. This enhances the users experience while interacting with them.
10.3 New Features in HTML5 Forms
HTML5 Web forms bring great improvements related to form creation for the Web developers and also for users interacting with them. The following are the changes introduced in HTML5 forms:
New form elements
New input types
New attributes
Browser-based validation
New Elements
HTML5 has introduced a range of new elements that are expanding the options for more number of elements related to input on the forms.
Table 10.1 lists the new elements in HTML5.
Element Description
progress Represents the completion progress of a task on the page
meter Represents a scale of known range
datalist Represents a set of options used with list attribute to make a drop-down control
output Represents the result of a calculation
New Input Types
The input element is a data field that allows the user to edit the data on the form. It has an attribute named type which controls the data type and characteristics of the input element.
Table 10.2 lists the new input types supported by HTML5 that specify the kind of input expected from the users on the Web page.
Type Description
email Represents the completion progress of a task on the page
search Represents a scale of known range
url Represents a set of options used with list attribute to make a drop-down control
tel Represents the result of a calculation
number Represents a numeric value in the input field
range Represents a numeric value to be selected from a range of numbers
date Represents a calendar which is shown at every click on the field
week Represents date in year-week format
Type Description
month Represents a value with year-month format
time Represents a value in hours and minutes format
datetime Represents a full date and time input field with a time zone
datetime-local Represents a full date and time with no time zone
color Represents a predefined interface for selecting color
New Attributes
HTML5 has introduced several new attributes that can be used with form and input elements. Attributes help the elements to perform their tasks.
Table 10.3 lists the new attributes in HTML5.
Table 10.3 lists the new attributes in HTML5.
Type Description
placeholder Represents a hint that help users to enter the correct data in the field
required A Boolean attribute that validates the entry in the field
multiple A Boolean attribute that allows multiple values to be entered in the field
autofocus Focuses the input element on page load
pattern Represents a regular expression for validating the field’s value
form Allows the elements to reference the form by including the form name
Browser-based Validation
HTML4 supported the use of custom JavaScript or libraries to perform validation on the client-side browsers. These validations ensure that the input fields are checked before the form is submitted to the server for further processing.
The new attributes in HTML5, such as required and pattern can be used with the input elements to perform validation. This relieves the Web developers from writing the custom JavaScript code for performing client-side validation on the Web pages. HTML5 also provides advanced validation techniques that can be used with JavaScript to set custom validation rules and messages for the input elements.
CSS Styling Techniques
A Web developer can enhance the form elements with the pseudo-class selectors, such as :required, :valid, and :invalid.
For example, the input fields which cannot be left blank while submitting the form can be displayed with an outline. To achieve this, input field with required attribute can be styled using CSS. Applying CSS styles make it easier for user to navigate and complete the form.
Code Snippet 1 shows the CSS code for formatting non-empty and incorrect data input in the input element fields on the form.
Code Snippet 1:
<style>
input:required {
outline: 1px red solid;
color: green ;
}
input:required:valid {
background-size:10px 10px;
background-position: right top;
background-repeat: no-repeat;
}
input:required:invalid {
background-size:10px 10px;
background-position: right top;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<form method=”get” action=”try.php”>
Name: <input type=”text” name=”name” required=”true” /><br/>
Email: <input type=”email” name=”emailid” required=”true” />
<input type=”submit” value=”submit” />
</form>
Forms API
HTML5 has introduced JavaScript API for forms. This API is used to customize validations and processing performed on the forms. The new form’s API provides new methods, events, and properties to perform complex validations combining fields or calculations.
Table 10.4 lists the events and methods.
Events and Methods Description
setCustomValidity (message) Sets the custom error message that is displayed when the form is submitted by the user
checkValidity() Checks the validity of the e-mail address entered by the user
oninvalid Allows script to run only when the element is invalid
onforminput Allows script to run when the form gets an input from the user
onformchange Represents a regular expression for validating the field’s value
form Allows script to run when the form changes
Working with New Input Types
The type attribute of the input element determines what kind of input will be displayed on the user’s browser. The default input is type=”text”.
The registration form in the session is using the following input types:
text
label
radio
textarea
checkbox
submit
HTML5 has introduced more data-specific user interface elements. Now, you will see the new input types in detail.
E-mail Addresses
The type=”email” is used for specifying one or more e-mail addresses. To allow multiple addresses in the e-mail field, separate each address with comma-separator.
In the registration form, the input type is changed from text to email as shown in Code Snippet 2.
Code Snippet 2:
<form method=”get” action=”test.html”>
<label for=”emailid”>Email:</label>
<input type=”email” value=”” id=”emailid” name=”emailaddress”
maxlength=”255” />
<input type=”submit” value=”submit”/>
</form>
In the code, <label> tag defines a label for the element on the form. The for attribute of <label> tag binds it with the related element, that is email element, on the form. The value of for attribute must match with the value of id attribute assigned to the element.
Also, the email contains two attributes, namely id and name. The id attribute specifies a unique id for the element. The value of the id attribute should be unique within the document. It can be used as a reference for styles in style sheet or to access elements using DOM API in JavaScript.
The name attribute specifies a name for the input element. It can be used for referencing the elements in a JavaScript or form data after a form is submitted to the server for processing. The look of the input is still like a plain text field, but changes are applied behind the scenes. Browsers, such as Firefox, Chrome, and Opera will display a default error message if user submits the form with some unrecognizable contents.
Telephone Number
The type=”tel” input element is used for accepting telephone numbers. As compared to email and url types, the tel type does not impose a particular pattern. It supports characters, numbers, and special characters except new lines or carriage returns. The reason for not imposing any pattern for tel type is that different countries support various lengths and punctuation in the phone numbers. Thus, there cannot be a standard format for them.
A user can enforce a pattern for tel input type by using placeholder or pattern attribute. A JavaScript code can also be provided for performing client-side validation on the tel input type.
Code snippet 4 shows the code for including tel input type on the registration form.
Code Snippet 4:
<label for=”telno”>Telephone Number:</label>
<input type=”tel” value=”” id=”telno” name=”telephone_no”
maxlength=”10” />
Number
The input type=”number” is used for accepting only number values. The input element displayed for number type is a spinner box. The user can either type a number or click the up or down arrow to select a number in the spinner box.
Code Snippet 5:
<label for=”stud_age”>Age:</label>
<input type=”number” value=”15” id=”stud_age”
name=”studentage” min=”15” max=”45” step=”1” />
<input type=”submit” value=”submit”/>
In the code, the number input type has attributes, such as min and max to specify the minimum and maximum value for the input.
Range
The input type=”range” is similar to number type and displays a slider control on the page. The range type is used when the exact value is not required in the input. In other words, the value from this type is not accurate. For example, an online survey form asking the clients to rate the products may not receive exact values in the ratings.
Code Snippet 6 shows the code for including range input type with attributes min and max.
Code Snippet 6:
<label>Survey for packages offered[scale: 1-10]:</label>
<input type=”range” name=”rating” min=”1” max=”10” />
<input type=”submit” value=”submit”/>
In the code, the range input type contains attributes, such as min, max, step, and value. The min and max attributes are used to specify the minimum and maximum value allowed for a range and are set to 1 and 10 respectively. The step attribute specify the intervals for incrementing the value. The value of step attribute is 1 by default. The value attribute specifies the default value for the range. The default value is the midpoint of the range specified.
Date and Time
HTML5 has introduced several new input types for date and time. The format for all these date and time types is according to the ISO standards. At present only Opera provides the support for date element by displaying a calendar control.
Date
This input type contains only date in year, month, and day format. The time part is not support by date type.
Code Snippet 7 shows the code of the date input type.
Code Snippet 7:
<label for=”stdate”>Date:</label>
<input type=”date” id=”stdate” name=”startdate”
min=”2000-01-01”/>
<input type=”submit” value=”Submit” id=”btnSubmit”></input>
In the code, all date input types have min and max attributes to set the range for the dates. The default value for date input type is based on the browsers. Different browsers take different dates as default. Thus, it is advisable to set the minimum and maximum value for the date type.
<label for=”stmonth”>Month:</label>
<input type=”month” id=”stmonth” name=”startmonth” />
<input type=”submit” value=”submit”/>
In the code, all date input types have min and max attributes to set the range for the dates. The default value for date input type is based on the browsers. Different browsers take different dates as default. Thus, it is advisable to set the minimum and maximum value for the date type.
No comments:
Post a Comment