How to Use Labeled Inputs in a JavaScript Application

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.

But building great forms is not easy. There are many factors to account for, including the amount of information required from the user, auto-complete and validation, accessibility and mobile devices, and layout issues.

About four years ago, we posted a blog about Building Great Web Forms with Wijmo. The blog refers to a Building High Conversion Web Forms course created by Udacity and Google that covers the main aspects of creating compelling web forms. It goes on to talk about Wijmo's input controls and some cool CSS that leverages Wijmo's pseudo-classes to build forms with Android-style floating labels and validation messages with a wj-labeled-control CSS class.

Using Input Controls in A JavaScript Application

In the latest Wijmo build, we improved the wj-labeled-control CSS rules and moved then into wijmo.css, so now it is easier than ever to use it in your applications.

To understand how wj-labeled-control works, consider a simple form:

<form>
  <label for="email">E-mail</label>
  <input id="email" autocomplete="email" required pattern="\S+@\S+\.\S+"/>
  <br/>
  <label for="country">Country</label>
  <input id="country" required />
  <br/>
  <label for="notifications1">Send me notifications</label>
  <input id="notifications1" type="checkbox"/>
</form>

Which would create a form that looks like this:

This is functional, but the labels are not properly aligned, and the validation provided is rudimentary.

You could easily improve this form by using Wijmo input controls and the wj-labeled-input CSS class:

<form>
  <div class="wj-labeled-input wide">
    <input id="email" autocomplete="email" required pattern="\S+@\S+\.\S+">
    <label for="email">E-mail</label>
    <div class="wj-error" tabindex="-1">We need a valid e-mail...</div>
  </div>
  <div class="wj-labeled-input">
    <input id="country" items-source="countrie">
    <label for="country">Country</label>
  </div>
  <div class="wj-labeled-input-switch">
    <input id="notifications" type="checkbox">
    <label for="notifications">Send me notifications</label>
  </div>
</form>

You would turn the "country" input element into a Wijmo ComboBox using this code (if you were using a framework such as Angular, React, or Vue, you could specify the ComboBox directly in the markup):

new ComboBox('#country', {< 
  itemsSource: 'US,UK,Japan,Germany,France,Italy,Russia,China'.split(','), 
  isRequired: false, 
  isEditable: true,
  text: '' 
});

And you would get this form:

This looks cleaner already, and the checkbox styling looks nice. We used the "switch" style to show the checkbox as a switch control rather than as a traditional checkbox.

In general, switches are preferred over traditional checkboxes when they perform actions immediately (we should not have used one in this example, except I wanted to show this option). For more details on choosing switches or checkboxes, including examples, please see this Checkbox vs. Toggle Switch article.

Adding CSS to Input Forms

But our form is not very exciting yet. See what happens when the user clicks the e-mail input:

The placeholder moves out of the way (with a nice animation effect), and an underline appears below the input element. Now see what happens when the user starts typing into the e-mail input:

The e-mail input is not a valid e-mail address, so the field shows a validation message.

After entering the address, the user can enter the country by typing into the ComboBox or by picking from the drop-down list (they will not be allowed to enter any countries that are not on the list):

And there you have it. The form is complete:

The wj-labeled-input CSS can be used in all kinds of forms, providing users with a consistent look and feel. It works with Wijmo's input controls and with native input elements, including checkboxes (which can be styled as "switch" controls) and radio buttons.

And it supports Wijmo's themes, so your forms will look great no matter what theme you choose. For example, this is the same form rendered using the "office" theme:

We hope you enjoy the wj-labeled-input CSS and use it to create excellent forms!