Color :
HTML5 provides a predefined interface for selecting the colors using input type=”color”. The input value from the color input field is a hexadecimal number. For example, #00FF00 represents a hexadecimal RGB color value.
At present, the color input type is supported on Opera browser and some new smart phones.
Code Snippet 12 shows the usage of color input type to display a color picker on the Web page.
Code Snippet :
<label>Color:</label>
<input type=”color” name=”mycolor” />
<input type=”submit” value=”submit”/>
New Form Attributes
Earlier, Web developers needed to write JavaScript snippets for performing the validations on the data entered by the users in form fields. HTML5 has provided several new attributes that perform the validations without writing JavaScript snippets for them. These attributes perform the following tasks:
Check data provided by users with the regular expression pattern assigned to the fields
Inform users with appropriate errors
Check that the required fields are not left empty by the users
Enable multiple values for the fields, if provided
These attributes can be used to support scripting drawbacks, without actually hard coding them in the Web pages. Browsers that do not understand these new attributes will ignore them.
10.5.1 Required
This is a boolean attribute that informs the browser to submit the form only when the required fields are not left empty by the users. The input type elements, such as button, range, and color cannot be set for required attribute as they have a default value.
Different Web browsers such as Opera, Chrome, and Firefox provide different error messages, such as ‘This is a required field’, or ‘Please fill out this field’ for required attribute.
Code Snippet 13 shows assignment of required attribute to the name field on the registration form.
<label>Name: <em> <img src=”star.jpg” width=”9” height=”10”
alt=”” border=”0”> </em>
</label> <br>
<input type=”text” value=”” name=”first” size=”8” tabindex=”1”
required =”true”/>
<input type=”text” value=”” name=”last” size=”14” tabindex=”2”
required=”true”/>
<input type=”submit” value=”submit”/>
Placeholder
This attribute displays a short hint or text inside a form element. This informs the user about what data needs to be entered in that field. The placeholder text toggles, which means it appears in the field and disappears when the user clicks inside the field. Earlier, Web developers provided this functionality through JavaScript snippets which is now done in the browsers with the help of placeholder attribute. At present, all the browsers such as Chrome, Safari, Opera, and Firefox support the placeholder attribute.
If the size of the hint exceeds the field size, then use title attribute to describe text for the field.
Code Snippet 14 shows the assignment of placeholder attribute to the name field on the registration form.
<label>Name: <img src=”required_star.gif” height=”10px”
width=”10px”/></label> <br>
<input type=”text” value=”” name=”first” size=”8” tabindex=”1”
required=”true” placeholder=”First Name”/>
<input type=”text” value=”” name=”last” size=”14” tabindex=”2”
required=”true” placeholder=”Last Name” /><br/>
Pattern
This attribute uses regular expressions for validating the fields. The data entered by the user must match with the pattern specified in the regular expression. This helps to limit the input accepted from the user.
While including regular expressions through pattern attribute, it informs the users about the excepted pattern for the data. This can be achieved in the current browsers using the title attribute, which is displayed as a tool tip when the users move the pointer over the field.
You need to validate a zip code of five numbers on the form. There is no pre-defined input type to restrict the input to numbers of specified length. Thus, pattern attribute can be used to create user-defined check values for the field. Also, a title attribute can be used to customize the error message displayed for the field.
Code Snippet 15 shows the assignment of pattern attribute to the phone number field on the registration form.
<label>Phone number:<img src=”required_star.gif” height=”10px”
width=”10px”/></label>
<input type=”tel” value=”” size=”4” maxlength=”5” tabindex=”11”
required=”true” placeholder=”Code”pattern=”[+0-9]{1,4}”
title=”Format:(+)99(99)”/>
<label>-</label>
<input type=”tel” value=”” size=”10” maxlength=”12”
tabindex=”13” required=”true” placeholder=”Number” pattern=”[0-9]{8,}” title=”Minimum 8 numbers”/>
In the code, [+0-9] pattern indicates that only special character ‘+’ as well as numbers are allowed. Also, {1, 4} refers to the length of the numbers, that is between 1 and 4. Similarly, {8,} means minimum eight numbers are allowed in the tel input type field.
Multiple
This is a boolean attribute that allows multiple values for some input types. This was available only for select input type in the earlier version of HTML.
HTML5 allows multiple attribute with input types, such as email and file. If assigned, it allows selection of multiple files, or include several e-mail addresses in the email field separated by comma separator.
At present, browsers such as Chrome, Opera, and Firefox support multiple attribute for email and file element.
Code Snippet 16 shows the assignment of multiple attribute to the e-mail address field on the registration form.
Code Snippet :
<label>Email Address:<img src=”required_star.gif” height=”10px” width=”10px”/></label>
<input type=”email” value=”” name=”emailid” maxlength=”255” tabindex=”5” required=”true” placeholder=”Email Address” multiple/>
In the code, multiple attribute will allow insertion of multiple e-mail addresses in the field. Every e-mail address will be validated individually by the browser.
Autofocus
Earlier, Web developers were using JavaScript code to set the focus to the input field on page load. The purpose was to force the focus over the input field, even if the user selected some other element while page is still loading. As a result of the JavaScript code, control moves to the input field upon completion of page load. This way, regardless of what the user selected, the focus would always be on the input field.
To provide an easier solution for this behavior, HTML5 has introduced autofocus attribute for the form elements. The autofocus attribute will focus on the input field on page load. However, depending upon the situation, it will not move the focus away if the user has selected some other field. Only one element can be focused with autofocus attribute on a particular page while loading.
Code Snippet 17 shows the assignment of autofocus attribute to the first name field on the registration form.
<label>Name:</label>
<br>
<input type=”text” value=”” name=”first” size=”8” tabindex=”1”
placeholder =”First Name” autofocus/>
<input type=”submit” value=”submit”/>
<br>
<label>First Name</label>
Form
Earlier, all the form controls need to be provided between the opening and closing <form> tag. In HTML5, elements can be inserted at any place in the document and they can reference the form using the form attribute .
Code Snippet 18:
<body>
<input type=”text” name=”mytext” id=”mytext” form=”myform”/>
. . .
. . .
<form id=”myform”>
. . .
. . .
</form>
</body>
In the code, the form is declared with an id attribute. The value of the id attribute is assigned to the input element using form attribute.
No comments:
Post a Comment