HTML and CSS Reference
In-Depth Information
<input type="number"></input>
<input type="range" min="1" max="5">range</input>
Try the previous input tags, and you'll notice that the number type will have arrows on the right side and the
range type will render a simple slider, as shown in Figure
11-8
.
Figure 11-8.
How the Chrome browser handles the number and range input
What's really interesting with these new (and old) input formats are the new attributes associated with them such
as
placeholder
,
required
, and the really cool
pattern
. Each of these attributes has its own benefits; for example, the
placeholder
attribute allows the input field to display some sample text to signify what text format that user should
enter. This is helpful for specific text formatting such as credit cards, phone numbers, or even Social Security numbers.
As you've learned,
required
is a great attribute for ensuring a user will fill out a section in the form before submitting.
The browser will now check to see whether any inputs are required and flag them when the user attempts to submit the form.
The
pattern
attribute essentially allows you to use your own regular expressions (regex) from directly within
the HTML markup. Traditionally, this was handled only via JavaScript, and if you want your user to explicitly enter
something like a five-digit ZIP code, you can use a regex pattern to ensure that client-side validation is in place before
the user submits their data. Listing 11-9 outlines what I am discussing.
Listing 11-9.
Pattern Attribute Example
<!DOCTYPE html>
<html>
<body>
<form>
Zip code: <input type="tel" pattern="^\d{5}$" title="Five digit ZIP code" />
<input type="submit" />
</form>
</body>
</html>
Regular expressions are very powerful bits of code and can be conditioned to fit a wide variety of use cases. In
the previous example, you are using the regex pattern of
^\d{5}$
, which is ensuring that the user enters five digits for
proper U.S. ZIP code entry.
■
Note
What's also really cool with the inputs is that you can customize your CSS based on the pseudo classes that get
applied from the user interaction (or noninteraction). The following CSS example shows how you can present an error
area for the form elements that weren't validated:
input {
border: 1px solid #000000;
}
input:focus {
border: 2px dashed #666666;
}
