Most web applications use forms to get data from users. Whether the form is made of text boxes, toggles, buttons, checkboxes, or custom controls, web developers need to be purposeful about forms to make users happy and increase conversions.
Our friends at Udacity and Google have put together a course called Building High Conversion Web Forms that covers the main aspects of creating effective web forms.
The course contains a lot of useful information, starting with the amount of information on the form and covering input types, labels, using autocomplete to save users from typing, HTML validation, location services, and touch support. We highly recommend it.
This document extends those basic, general concepts to Wijmo input controls, and how to use them to build highly effective forms.
Pro-active Validation
HTML 5 includes a validation API and validation attributes that allow you to specify if fields are required, minimum and maximum values, pattern-based constraints, and custom validation. You can find out more about the HTML 5 validation API in Mozilla’s Data form validation page.
Wijmo supports HTML 5 validation and extends it by providing “pro-active” validation. If you set the “min” and “max” properties on a Wijmo InputNumber or InputDate control, users will not be able to enter values outside the valid range at all. If a string field has a pre-defined list of acceptable values, use a ComboBox and set the “isEditable” property to false to ensure the value will be one of the options provided.
Formatting and Globalization
All Wijmo controls are localizable, so numbers, dates, and times are formatted and parsed according to the culture selected for the application. The globalization does not interfere with validation, because unlike HTML, Wijmo input controls use actual numbers and dates, not strings.
Touch support
Wijmo has touch support built-in, so in most cases you can forget about that completely. For example, if you click a button to drop-down a list of strings or a calendar, Wijmo will not show a soft keyboard on your phone or tablet. This may seem like a small thing, but it makes a huge difference in usability.
Pseudo-classes
CSS pseudo-classes are keywords added to selectors that specifies a special state of the element to be selected. For example, “:hover” will apply a style when the user hovers over the element specified by the selector.
Pseudo-classes are important in forms because they let you apply styles to elements not only in relation to the content of the document tree, but also in relation to external factors like whether the element has the focus (“:focus”) or is in an invalid state (“:invalid”).
Some of the standard pseudo-classes are limited in their usefulness because they apply only to specific elements, and not to the elements ancestors. For example, many Wijmo input controls contain input elements; when the input elements have the focus, they get the “:focus” pseudo-class, but the control host that contains it does not.
For this reason, Wijmo adds some pseudo-classes of its own to make building effective forms easier:
- wj-state-focused: Added to control host elements when the control contains the focus (not necessarily when the host element has the focus).
- wj-state-invalid: Added to control host elements when the control contains an input element in an invalid state.
- wj-state-empty: Added to control host elements when the control contains an input element with no content (this is different from the “:empty” pseudo-class which is applied to elements that have no children.
Using the Wijmo Pseudo-classes
These pseudo-classes make it possible to build elements that behave like TextField components in Material Design Lite or paper-input elements in Polymer. These composite elements contain a label, an input control, and a validation message.
When the input control is empty and not focused, the label text moves over the input control, assuming the role of a “placeholder”. When the input control has the focus, or is not empty, the label moves to the top-left of the component. The result is a compact and attractive unit that is intuitive, easy-to-use, and very engaging on desktops and on mobile devices.
The image below shows a few input elements in various states:
The first field is being edited. Notice the blue underline. The second field contains an invalid e-mail address. Notice the red color and the message below the field. The second row of fields contains empty values, so the labels move over the input elements, playing the role of placeholders.
These components were created using HTML and CSS. Thanks to Wijmo’s pseudo-classes, no JavaScript code is required. Here is some of the markup to illustrate:
<div class="wj-labeled-input">
<wj-combo-box autocomplete="name"
is-required="true"
text="item.name"
id="name"
accesskey="n">
</wj-combo-box>
<label for="name">Name</label>
<div class="wj-error">We do need your name...</div>
</div>
<div class="wj-labeled-input">
<wj-combo-box autocomplete="email"
is-required="true"
input-type="email"
pattern="\\S+@\\S+\\.\\S+"
text="item.email"
id="email"
accesskey="e">
</wj-combo-box>
<label for="email">E-mail</label>
<div class="wj-error">We need a valid e-mail...</div>
</div>
Notice how the markup uses standard HTML features (autocomplete, accesskey, pattern) even though it uses Wijmo controls rather than regular input elements.
The “wj-labeled-input” class and the Wijmo pseudo-classes are used in the CSS to style the whole input elements, including the label, input control, and validation message. For example:
.wj-labeled-input label {
font-size: 16px;
top: 24px;
…
color: rgba(0, 0, 0, 0.258824);
transition-duration: .2s;
transition-timing-function: cubic-bezier(.4,0,.2,1);
}
/* move label out of the way when control is focused or not empty */
.wj-labeled-input .wj-state-focused + label,
.wj-labeled-input :not(.wj-state-empty) + label {
font-size: 12px;
top: 4px;
color: rgb(63,81,181);
}
This CSS can be used on any forms that contain any Wijmo input controls, and it can be easily customized to match any application styles. It was adapted from the CSS used to implement the TextField component in Google’s Material Design Lite.
View the Demo
Try this sample for yourself: InputLabels sample
MESCIUS inc.