A Form of Madness

1.   Placeholder text is displayed inside the input field as long as the field is empty. When you click on (or tab to) the input field and start typing, the placeholder text disappears. Here’s how you can include placeholder text in your own web forms:

<form>

  <input name="q" placeholder="Go to a Website">

  <input type="submit" value="Search">

</form>

 

Browsers that don’t support the placeholder attribute will simply ignore it. No harm, no foul. The placeholder attribute can only contain text, not HTML markup.

 

 

2.   When you press the space bar expecting to scroll the page, the page will not scroll if the focus is already in a form input field due to site’s autofocus script. (It types a space in the field instead of scrolling.) If you focus a different input field while the page is still loading, the site’s autofocus script may “helpfully” move the focus back to the original input field, disrupting your flow and causing you to type in the wrong place. HTML5 introduces an autofocus attribute on all web form controls. The autofocus attribute does exactly what it says on the tin: as soon as the page loads, it moves the input focus to a particular input field. But because it’s just markup instead of script, the behavior will be consistent across all web sites.

 

3.   If you want your autofocus fields to work in all browsers, not just these fancy-pants HTML5 browsers, you can do this:

<form name="f">

  <input id="q" autofocus>

  <script>

    if (!("autofocus" in document.createElement("input"))) {

      document.getElementById("q").focus();

    }

  </script>

  <input type="submit" value="Go">

</form>

 

The window.onload event doesn’t fire until after all your images have loaded. Placing the auto-focus script immediately after the form field that it references is the optimal solution. If you can’t insert a script in the middle of your page, you should set focus during a custom event like jQuery’s $(document).ready() instead of window.onload .

 

 

4.   HTML5 defines 13 new field types, the first of these is for email address:

<form>

  <input type="email">

  <input type="submit" value="Go">

</form>

 

Every single browser on Earth treats an unknown type attribute as type="text" — even IE 6. The HTML5 specification doesn’t mandate any particular user interface for the new input types. Most desktop browsers simply render it as a text box. Apple did something clever in the iPhone’s web browser. It recognizes several of the new HTML5 input types, and dynamically changes the on-screen keyboard to optimize for that kind of input. 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.

 

 

5.   The iPhone altered its virtual keyboard when you focus an <input type="url"> . The space bar has been completely replaced with three virtual keys: a period(. ), a forward slash, and a “.com ” button. (You can long-press the “.com ” button to choose other common suffixes like “.org ” or “.net ”.) Most modern desktop browsers simply render type="url" like a regular text box.

 

6.   HTML5 has provided a powerful number input:

 

<input type="number"

       min="0"

       max="10"

       step="2"

       value="6"> 

 

min="0" specifies the minimum acceptable value for this field. max="10" is the maximum acceptable value. step="2" , combined with the min value, defines the acceptable numbers in the range: 0, 2, 4, and so on, up to the max value. value="6" is the default value. The default step value is 1. You also get these handy JavaScript methods as well:

  a)   input.stepUp(n) increases the field’s value by n .

  b)   input.stepDown(n) decreases the field’s value by n .

  c)   input.valueAsNumber returns the current value as a floating point number. (The input.value property is always a string.)

On the iPhone, the browser optimizes the virtual keyboard for numeric input. In the desktop version of Opera, the same type="number" field is rendered as a “spinbox” control.

 

7.   You can now have slider controls in your web forms:

 

<input type="range"

       min="0"

       max="10"

       step="2"

       value="6"> 

 

All the available attributes are the same as type="number" .The only difference is the user interface. Instead of a field for typing, browsers are expected to render type="range" as a slider control.

 

8.   HTML5 finally defines a way to include a native date picker control without having to script it yourself. In fact, it defines six: date, month, week, time, date + time, and date + time - timezone.

 

9.   If you’re using Safari on Mac OS X, the input box for type=”search” has rounded corners. When you actually start typing into the type="search" box, Safari inserts a small “x ” button on the right side of the box. Clicking the “x ” clears the contents of the field.

 

10.   HTML5 also defines <input type="color"> , which lets you pick a color and returns the color’s hexadecimal representation.

 

11.  W hen the user tries to submit a form with an <input type="email"> field, the browser automatically offers RFC -compliant email validation, even if scripting is disabled. 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. To turn it off, use the novalidate attribute:

<form novalidate>

  <input type="email" id="addr">

  <input type="submit" value="Subscribe">

</form> 

 

 

12.   You can also specify that certain fields are required. Required fields must have a value before you can submit the form:

 

<form>

  <input id="q" required>

  <input type="submit" value="Search">

</form>