Development Tips: Funky, Fun HTML5 Forms

Forms are the most critical—and often the mostoverlooked—factor in user interaction design. The quality of your form candictate whether it collects good data, erroneous data, or any data at all. Withnew 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 inyour own learning presentations.

HTML5has introduced a number of interesting changes. For the increasing number of ususing the HTML5 stack of technologies to create online learning, you will findthat obtaining “clean data” from your user is much easier with HTML5. Let’slook at a few of the new techniques HTML5 introduces relative to forms.

New input types

Foryears the only way to obtain text input from the user was via a text input. Thecode used looked something like this:

UserName: <input type="text" name="userName" id="userName" />

Thetype attribute determined the type of input that was displayed—except there wasonly one type of input that rendered like the example in Figure 1.

Figure 1: Traditional text input

Thename attribute identified the content to a server processing the form, and the IDwas there to access the form element via JavaScript. There are several new“types” that present a different visual representation, but the code is nearlythe same.

Date type and variants

Trythe following code:

Birthdate: <input type="date" name="bd" id="bd" />

Inmost 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

Afew other browsers will display the traditional input box (See Figure 1). Formsare an area where you can easily illustrate the disjointed support for HTML5 inbrowsers. Some browsers, such as Opera, already fully embrace this part of theHTML5 standard, while other browsers have yet to adopt much of it. Keep inmind, however, that this inconsistent result among browsers is a highlytemporary situation—and one that I anticipate will clear up over the next yearor two.

Thenew “date” type also has variants that include “time” and “datetime” to allowthe user to enter both date and time information.

Number type

Here’sanother 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 bothtype 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 ofthe challenges of mobile is data entry, and users welcome anything that makesdata entry easier—like these input objects.

Color type

Let’sdo one more new input type. This one is kind of fun (Figure 5 shows the resultin the Opera browser):

Color Choice:<br/><input type="color" />

Figure 5: The color picker displayed in the Opera browser

Ifyou obtained the value of the user’s choice, the picker returns the HTML hexvalue of the color. Note that by clicking the “Other” button within the colorpicker control, the user can pick any color from the system color palette onthe display.

HTML5 datalists

Inaddition to the new input types, HTML5 offers datalists. This is a convenientway to work with lists of finite data in the browser. Let’s dive into the codeand 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>

Ifyou examine the code, you’ll notice that the value of the list attribute in theinput element is the same as the value of the ID attribute in the datalistelement. This pairing links the input and the datalist together. In browsersthat support datalist, the user will see a context-sensitive list ofpossibilities for their input entry based on what they have typed so far. Takea look at Figure 6.

Figure 6: The user has typed “A,” revealing several possibleoptions from the datalist

Thisis an especially powerful tool if you create the datalist dynamically from adatabase, which you can do using AJAX (JavaScript) or a server-side programminglanguage.

User input validation

Foras long as people have been filling out forms on computers, data entry mistakesand even malicious data entry have been problems. HTML5 offers several newattributes to combat improper data entry. I should note that these are notperfect and are easily defeated by a skilled developer with malicious intent;however, they are useful in preventing most users from entering bad data into aform.

We’llstart with the required attribute:

Language: <input type="text" required="required" name="language"/> <input type="submit" />

Inthis example, if the user tries to submit the form without filling out therequired field, the submission will be rejected and a message similar to figure7 will be displayed to the user:

Figure 7: The browser is rejecting this submission becausethe language field is not filled out

Here’sa more complex, but very powerful, validation technique. Examine the codebelow:

Zip code: <input pattern="[0-9]{5}" /> <br/><input type="submit" />

Ifyou have never seen regular expressions before, the pattern attribute mightlook especially weird. Regular expressions, which are available in mostprogramming languages, are a standardized way of expressing patterns in code. Forexample, the pattern in the code above indicates that we’re attempting to matchfive digits between zero and nine. You can make a pattern to match almost anyseries 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 afive-digit entry that matches the indicated pattern, the browser will rejectthe entry (Figure 8).

Figure 8: The browser rejects this entry because it containsa 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.