Forms are the most critical—and often the most overlooked—factor in user interaction design. The quality of your form can dictate whether it collects good data, erroneous data, or any data at all. With new and creative ways to assess learners with HTML5 forms and a little JavaScript, you’ll quickly find yourself wanting to adopt this technology and use it in your own learning presentations.
HTML5 has introduced a number of interesting changes. For the increasing number of us using the HTML5 stack of technologies to create online learning, you will find that obtaining “clean data” from your user is much easier with HTML5. Let’s look at a few of the new techniques HTML5 introduces relative to forms.
New input types
For years the only way to obtain text input from the user was via a text input. The code used looked something like this:
UserName: <input type="text" name="userName" id="userName" />
The type attribute determined the type of input that was displayed—except there was only one type of input that rendered like the example in Figure 1.
Figure 1: Traditional text input
The name attribute identified the content to a server processing the form, and the ID was there to access the form element via JavaScript. There are several new “types” that present a different visual representation, but the code is nearly the same.
Date type and variants
Try the following code:
Birthdate: <input type="date" name="bd" id="bd" />
In most browsers you will get a result like Figure 2 or Figure 3.
Figure 2: The date type displayed in Opera
Figure 3: The date type displayed in the Chrome browser
A few other browsers will display the traditional input box (See Figure 1). Forms are an area where you can easily illustrate the disjointed support for HTML5 in browsers. Some browsers, such as Opera, already fully embrace this part of the HTML5 standard, while other browsers have yet to adopt much of it. Keep in mind, however, that this inconsistent result among browsers is a highly temporary situation—and one that I anticipate will clear up over the next year or two.
The new “date” type also has variants that include “time” and “datetime” to allow the user to enter both date and time information.
Number type
Here’s another one to try (see Figure 4 for the result):
Favorite Number: <input type="number" name="favNum" id="favNum" min="0" max="100" />
Figure 4: The numeric stepper displayed in Google Chrome
Notice on this particular input object, the user can both type a number and use the stepper controls to indicate a number. By the way, when it comes to these elements, most mobile browsers support them well. One of the challenges of mobile is data entry, and users welcome anything that makes data entry easier—like these input objects.
Color type
Let’s do one more new input type. This one is kind of fun (Figure 5 shows the result in the Opera browser):
Color Choice:<br/> <input type="color" />
Figure 5: The color picker displayed in the Opera browser
If you obtained the value of the user’s choice, the picker returns the HTML hex value of the color. Note that by clicking the “Other” button within the color picker control, the user can pick any color from the system color palette on the display.
HTML5 datalists
In addition to the new input types, HTML5 offers datalists. This is a convenient way to work with lists of finite data in the browser. Let’s dive into the code and then we’ll discuss how it works:
Computer: <input list="computers" /> <datalist id="computers"> <option value="VIC-20" /> <option value="Commodore 64" /> <option value="Amiga" /> <option value="Atari 800" /> <option value="TRS-80" /> <option value="Apple ][e" /> <option value="Amstrad" /> </datalist>
If you examine the code, you’ll notice that the value of the list attribute in the input element is the same as the value of the ID attribute in the datalist element. This pairing links the input and the datalist together. In browsers that support datalist, the user will see a context-sensitive list of possibilities for their input entry based on what they have typed so far. Take a look at Figure 6.
Figure 6: The user has typed “A,” revealing several possible options from the datalist
This is an especially powerful tool if you create the datalist dynamically from a database, which you can do using AJAX (JavaScript) or a server-side programming language.
User input validation
For as long as people have been filling out forms on computers, data entry mistakes and even malicious data entry have been problems. HTML5 offers several new attributes to combat improper data entry. I should note that these are not perfect and are easily defeated by a skilled developer with malicious intent; however, they are useful in preventing most users from entering bad data into a form.
We’ll start with the required attribute:
Language: <input type="text" required="required" name="language"/> <input type="submit" />
In this example, if the user tries to submit the form without filling out the required field, the submission will be rejected and a message similar to figure 7 will be displayed to the user:
Figure 7: The browser is rejecting this submission because the language field is not filled out
Here’s a more complex, but very powerful, validation technique. Examine the code below:
Zip code: <input pattern="[0-9]{5}" /> <br/>
<input type="submit" />
If you have never seen regular expressions before, the pattern attribute might look especially weird. Regular expressions, which are available in most programming languages, are a standardized way of expressing patterns in code. For example, the pattern in the code above indicates that we’re attempting to match five digits between zero and nine. You can make a pattern to match almost any series of characters. For example, there are patterns to match email addresses, phone numbers, and much more. In the example above, if the user doesn’t make a five-digit entry that matches the indicated pattern, the browser will reject the entry (Figure 8).
Figure 8: The browser rejects this entry because it contains a non-digit and has too many characters
Want more?
Want to learn more about HTML5 and mLearning development? See Mark at DevLearn leading the workshop mLearning Development with HTML5, CSS, and JavaScript.