Lesson 2: Form validation CHAPTER 7 327
FIGURE 7-6 he placeholder text displayed until user inputs dataTValidating URL input
The <input type=”url”> element validates a URL by adding the required attribute and optional
placeholder. In addition, you can add the pattern attribute to provide a JavaScript regular
expression to fine-tune the required input. Consider the following form.
<form id="myForm">
website:
<input type="url" name="website"
required="required" pattern="https?://.+" />
<button type="submit" name="submit">Submit</button>
</form>The pattern states that the URL must start with http. The letter s is followed with a ques-
tion mark (?), which means that the letter s is optional. After that, the colon and two slashes
(://) are required. The period and plus sign combination means that you must provide one to
many characters. The last part could be fine-tuned to require at least one period or to set a
limit on the number of characters.
When the page is displayed and the user enters abc, validation fails with the message
shown in Figure 7-7.