demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

HTML5 Forms: Numeric Input Types

html / forms

Estimated reading time: 2 minutes, 11 seconds

In traditional HTML, there are only a few options for entering numbers in a form:

  1. if the expected range of possible numbers entered is high (say 1 – 100), use an <input type=text /> and try to validate the entry.

  2. If the range is moderate (1 – 12), use a drop-down menu with pre-assigned options.

  3. If the range is low (0 – 2) use radio buttons.

Traditionally this limited set of options have been enhanced with .  With the new numeric inputs introduced by HTML5, the browser now has native support for many form features.

Number input

Let’s start with the simplest of these: the number input.

<input type=number>

Nothing could be simpler: a compatible browser or device will understand that a number should be entered into the field, and (ideally) limit user input to numerals. However, there are many more features in the number element to consider.

range input

Sometimes a form question is phrased in such a way that a slider is the best interface choice:

<input type=range name=slider id=slider min=0 max=10 value=5>

tel input

Takes a telephone number as an input.

<label for=phone accesskey=p>Phone number:</label>
<input name=phone id=phone type=tel maxlength=11 size=13>

date input

Utilized on any number of websites whenever a date is required (a concert, a flight, hotel booking, etc), traditionally generated via JavaScript. <input type=date> creates the same interface in-browser, no JavaScript required.

Related input types are: time, date time, datetime-local, day, month, and year.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.