Shows a color wheel or similar interface.

<input list="ppk" name="list" />
<datalist id="ppk">
	<option label="ppk" value="ppk"></option>
	<option label="JavaScript" value="JavaScript"></option>
</datalist>

Shows the listed values as a suggestion/autocomplete box. Users can type in an alternative value, though.

IE and Opera show the entire datalist when the user focuses on the input. Firefox only shows matching options when the user types in a letter. I side with IE and Opera here.

See also the second test for old Safari/Chrome bugs.

Shows a calendar popup in Opera. Safari shows a (bad) arrow-based interface but doesn’t validate the value.

Value is automatically validated as an email address, and if it’s invalid form submission is halted.

• Chrome 9 shows a auto-suggest list, but does not validate the value. Chrome 10 does.

• IE10 uses a default range between 0 and 100 for the number.
• Safari and Chrome don’t validate, but when the value is not a number they revert to the previous proper value (including an empty value). Try it by filling in -9 (or any number), followed by "Hello world"
• Opera hides the value when it’s not a number.

I wonder why no browser just returns an error message “This field should contain a number” and stops the form submission. Much easier in the long run than the current somewhat-weird behaviour.

Shows a slider.

Opera makes the slider keyboard-accessible. Safari and Chrome don’t.

The spec says this type should do nothing special. Browsers assidiously comply.

Value is automatically validated as a URL, and if it’s invalid form submission is halted.

Problem is: what is actually a URL? I’ve heard people say that quirksmode is a valid URL. I don’t like it for beans, but they could be right.

<input type="text" autofocus>

The browser automatically focuses on this field when the page is loading.

<input type="file" multiple>

Allows users to upload multiple files at once.

<input pattern="[0-9]{4}[ ]?[A-Z]{2}" />

The value must conform to the regexp pattern, or submission is halted.

<input type="text" placeholder="Some text">

The placeholder text is shown as long as the field is unfocused and the user has not entered another value.

<input type="number" readonly>

User cannot enter a value in the form field.

<input type="text" required>

Form submission is halted if a required field does not have a value.

If you set step="3" and enter 11 in the field the following happens:

• IE10 rejects the value. It has no interface, so you can’t use it to show allowed values.
• Safari accepts the value, but pressing on the arrows brings you back to the expected 3-6-9-12 range.
• Chrome rejects the value, and pressing on the arrows does the same as in Safari.
• Opera rejects the value, but pressing on the arrows brings you to a 2-5-8-11-14 range. All values in this range are subsequently rejected. This is obviously a bug.