HTML and CSS Reference
Figure 5-2. Chrome showing an error message when the user enters an invalid e-mail address
Notice that the error message is displayed only if the text box contains a value. If the text box is left
empty, no validation is performed. This behavior is similar to ASP.NET validation controls.
Setting the input type to url ensures that the value entered matches a URL pattern. You use the url type as
<input id="url" type="url" />
If you enter a valid Internet URL such as http://www.microsoft.com , th e input field doesn't give any
errors. Entering an invalid Internet URL, such as http://microsoft%com , causes the browser to display an
error message. Note, however, that the current implementation of the url input type in most browsers
doesn't perform strict checks on the URL format. For example, they allow whitespace to be part of the URL.
Numbers and Telephone Numbers
Numeric data is commonly accepted in web pages for things such as age, currency values, number of
employees in an organization, and so on. You can use the number input type in such cases. Additionally, the
number input type lets you specify an acceptable range for the number. For example, consider a web page
that accepts an employee's current salary. Here is how to use the number input type:
<input id="salary" type="number" />
Figure 5-3 shows how Chrome displays the number input type as an up-down control.
Figure 5-3. The number input type shown in Chrome