ptg16476052Creating Form Controls with the <input> Tag 32912
On any input type you can request multiple values with the multiple attribute:
There are several types for collecting different kinds of numbers: tel for collecting tele-
phone numbers, number for collecting specific numbers, and range for collecting a num-
ber when the exact value is not important.
Telephone numbers are difficult to validate because they vary depending on your loca-
tion and how specific you need to be. For instance, if you were asking for a U.S. phone
number to be used internationally, you would need to include a +1 at the beginning, fol-
lowed by 10 digits. However, if you were looking for a U.S. phone number from a prese-
lected area code, all you would need would be seven digits. If you have a specific format
you need your phone numbers in, you should use the pattern attribute discussed earlier
along with some explanation or placeholder text showing how the phone number should
be entered. The benefit of using the tel type for collecting phone numbers is that those
numbers can then be passed to mobile devices as phone numbers to either call or send
SMS text messages to. To collect a U.S. phone number with area code:
With the number type, you can specify the minimum value, the maximum value, and
even how the number picker should step through the values. Most browsers display the
number type with a drop-down menu with the possible values. To request a whole number
between 1 and 10:
If you want your readers to choose values with decimal points, add those values to the
min, max, step, or placeholder:
The range type is a little more confusing. It allows you to request a number when you
don’t care what the actual value is. This is perfect for customer surveys in which you
want to know how people feel on a sliding scale. Rather than forcing them to choose a
specific number—for instance: “rate this on a scale of 1 to 5”—you can provide a range
control with the top and bottom values beside it: