El Noguer

Més informació (en anglès) sobre els nous formularis HTML 5.

Ja fa un temps que vaig parlar sobre de com canviarien els programes d’Internet amb el nou HTML5, sobre tot amb els canvis amb els formularis.

Dive Into HTML5 és un bon bloc per aprendre a programar amb  HTML5.

INPUT REQUIRED

Test <input required> in your own browser. Browsers may alter the default appearance of required fields. For example, this is what a required field looks like in Mozilla Firefox 4.0:

 

VALIDATORS

HTML5 also offers validation of web addresses entered into <input type="url"> fields, and numbers in <input type="number"> fields. The validation of numbers even takes into account the min and max attributes, so browsers will not let you submit the form if you enter a number that is too large.

 

DATE FIELDS

This is how Opera renders <input type="date">:

PLACEHOLDER

You’ve probably seen placeholder text before. For example, Mozilla Firefox includes placeholder text in the location bar that reads “Search Bookmarks and History”:

MOBILE BROWSER

For example, email addresses are text, right? Sure, but they’re a special kind of text. For example, virtually all email addresses contain the @ sign and at least one period (.), but they’re unlikely to contain any spaces. So when you use an iPhone and focus an <input type="email"> element, you get an on-screen keyboard that contains a smaller-than-usual space bar, plus dedicated keys for the @ and . characters.

Test type="email" for yourself.

 

SPINBOXES

Spinboxes are not the only way to represent numeric input. You’ve probably also seen “slider” controls that look like this:

Test type="range" for yourself.

You can now have slider controls in your web forms, too. The markup looks eerily similar to spinbox controls:

↶ The spitting image

<input type="range"
       min="0"
       max="10"
       step="2"
       value="6">

Tweet