HTML Output Fields

As well as input types, HTML5 provides read-only outputs:

• output: a text result of a calculation or user action
• progress: a progress bar with value and max attributes
• meter: a scale which can change between green, amber, and red depending on the values set for the value, min, max, low, high, and optimum attributes.

Input Labels

Fields should have an associated , which you can wrap around the element:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Or link the field’s id to the label using a for attribute:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Labels are important for accessibility. You may have encountered forms which use a placeholder to save screen space:

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

The placeholder text disappears once the user types something — even a single space. It’s better to show a label than force the user remember what the field wanted!

Input Behaviors

Field types and constraint attributes change the browser’s input behavior. For example, a number input shows a numeric keyboard on mobile devices. The field may show a spinner and keyboard up/down cursor presses will increment and decrement values.

Most field types are obvious, but there are exceptions. For example, credit cards are numeric, but the increment/decrement spinner is useless and it’s too easy to press up or down when entering a 16-digit number. It’s better to use a standard text type, but set the inputmode attribute to numeric, which shows an appropriate keyboard. Setting autocomplete="cc-number" also suggests any pre-configured or previously entered card numbers.

Using the correct field type and autocorrect offers benefits which would be difficult to achieve in JavaScript. For example, some mobile browsers can:

• import credit card details by scanning a card using the camera
• import one-time-codes sent by SMS

Automatic Validation

The browser ensures an input value adheres with the constraints defined by the type, min, max, step, minlength, maxlength, pattern, and required attributes. For example:

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

Attempting to submit an empty value prevents form submission and shows the following message in Chrome:

The spinners will not permit values outside the 1 to 100 range. Similar validation messages appear if you type a string which is not a number. All without a single line of JavaScript.

You can stop browser validation by:

• adding a novalidate attribute to the
  element
• adding a formnovalidate attribute to the submission button or image

Creating Custom JavaScript Inputs

If you’re writing a new JavaScript-based date entry component, please stop and step away from your keyboard!

Writing custom input controls is difficult. You have to consider the mouse, keyboard, touch, speech, accessibility, screen dimensions, and what happens when JavaScript fails. You’re also creating a different user experience. Perhaps your control is superior to the standard date picker on desktop, iOS, and Android, but the unfamiliar UI will confuse some users.

There are three primary reasons developers choose to create JavaScript-based inputs.

1. Standard controls are difficult to style

CSS styling is limited and often requires hacks, such as overlaying an input with its label’s ::before and ::after pseudo-elements. The situation is improving, but question any design which prioritizes form over function.

2. Modern types are not supported in old browsers

In essence, you’re coding for Internet Explorer. IE users won’t get a date picker but can still enter dates in YYYY-MM-DD format. If your client insists, then load a polyfill in IE only. There’s no need to burden modern browsers.

3. You require a new input type which has never been implemented before

These situations are rare, but always start with appropriate HTML5 fields. They’re fast, and they work even before the script has loaded. You can progressively enhance fields as necessary. For example, a sprinkling of JavaScript can ensure a calendar event’s end date occurs after a starting date.

In summary: avoid re-inventing HTML controls!

CSS Validation Styling

You can apply the following pseudo-classes to input fields to style them according to the current state:

You can style an input’s placeholder text with the ::placeholder pseudo-element:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

The selectors above have the same specificity, so the order can be important. Consider this example:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Invalid inputs have red text, but it’s only applied to inputs with a disabled attribute — so all enabled inputs are black.

The browser applies validation styles on page load. For example, in the following code every invalid field is given a red border:

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

The user is confronted by a daunting set of red boxes before they interact with the form. Showing validation errors after the first submit or as a value is changed would offer a better experience. That’s where JavaScript steps in …

JavaScript and the Constraint Validation API

The Constraint Validation API provides form customization options which can enhance the standard HTML field checking. You could:

• stop validation until the user interacts with a field or submits the form
• show error messages with custom styling
• provide custom validation that’s impossible in HTML alone. This is often necessary when you need to compare two inputs — such as when you enter an email address or a telephone number, check “new” and “confirm” password fields have the same value, or ensure one date comes after another.

Form Validation

Before using the API, your code should disable default validation and error messages by setting the form’s noValidate property to true (the same as adding a novalidate attribute):

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

You can then add event handlers — such as when the form submits:

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

The handler can check the whole form is valid using the checkValidity() or reportValidity() methods, which return true when all the form’s inputs are valid. (The difference is that checkValidity() checks whether any inputs are subject to constraint validation.)

The Mozilla docs explain:

An invalid event is also triggered on every invalid field. This does not bubble: handlers must be added to every control that uses it.

<span>/* blue placeholder on email fields */
</span><span>input<span><span>[type="email"]</span>::placeholder</span> {
</span>  <span>color: blue;
</span><span>}
</span>

A valid form could now incur further validation checks. Similarly, an invalid form could have invalid fields highlighted.

Field Validation

Individual fields have the following constraint validation properties:

• willValidate: returns true if the element is a candidate for constraint validation.

• validationMessage: the validation message. This will be an empty string if the field is valid.

• valitity: a ValidityState object. This has a valid property set true when the field is valid. If it’s false, one or more of the following properties will be true:

  ValidityState description .badInput the browser cannot understand the input .customError a custom validity message has been set .patternMismatch the value does not match the specified pattern attribute .rangeOverflow the value is greater than the max attribute .rangeUnderflow the value is less than the min attribute .stepMismatch the value does not fit step attribute rules .tooLong the string length is greater than the maxlength attribute .tooShort the string length is less than the minlength attribute .typeMismatch the value is not a valid email or URL .valueMissing a required value is empty

Individual fields have the following constraint validation methods:

• setCustomValidity(message): sets an error message for an invalid field. An empty string must be passed when the field is valid or the field will remain invalid forever.
• checkValidity(): returns true when the input is valid. The valitity.valid property does the same thing, but checkValidity() also triggers an invalid event on the field which could be useful.

The validateForm() handler function could loop through every field and apply an invalid class to its parent element where necessary:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Assume your HTML defined an email field:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

The script applies an invalid class to the

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>