Access and secure data - Programming in HTML5 with JavaScript and CSS3 - page 196

This code produces the output shown in Figure 3-2 to the HTML page making up the
survey. This HTML code also adds an input button, as discussed later in the section, "Using the
button input type."
FIGURE 3-2 The url input box added to the survey
This code demonstrates the power of the url input type in validating that the text a user
entered is indeed a valid URL format. If a user typed something other than a URL or an in-
complete URL into the Your Favorite Website box, such as contoso.com , and then clicked the
Submit Query button, the result would be similar to the output shown in Figure 3-3.
FIGURE 3-3 Demonstrating the validation of the url input type
Click the button to invoke the validation. The url box is outlined in red, and a tooltip pops
up to explain the validation error. In this case, it has detected that a valid URL hasn't been
entered. If the user corrects the data by specifying the URL as http://www.contoso.com , the
validation error doesn't occur and the input can be submitted successfully.