HTML5 Development: Form & Keyboard Events

By Curtis Dicken

http://www.htmlgoodies.com/html5/tutorials/HTML5-Development-Form--Keyboard-Events-3885651.htm (Back to article)

Introduction

Recently we have covered some of the major event categories for HTML5. In this installment we'll take a look at the "miscellaneous" categories that we have not yet covered. We'll see what HTML5 offers in new form events as well as most of the form and keyboard events developers have become accustomed to in HTML4. We'll also discuss one notable event that didn't make the transition from HTML4 to HTML5.

Form Events

The Form events in HTML4 were a great way to quickly respond to user interaction with a form. They make things like instantly giving validation feedback to a user possible. With HTML5 those events have been almost doubled from 6 to 10. This includes one of the few events that were actually dropped and not deprecated from HTML4. Below are the form events of HTML5.

• onblur - This event comes from HTML4. It fires when an element loses focus like when a user tabs away from an element. This is most commonly used to validate input like checking spelling or maybe checking for reserved words in the user's input.
• onchange - This event fires when an element changes. It too was in HTML4 as well. Like onblur this is most commonly used for validation purposes. Developers often write custom validation functions to check for things like correctly formatted phone numbers. Using an event with an input element is as simple as calling your custom validation function from the onchange event and sending the value of the element using this.value like this: <input name="phone" onChange="validatePhone(this.value)">.
• oncontextmenu - This one is new for HTML5. It fires when a context menu is triggered on an element. Context menus are new to HTML5 and really haven't been implemented in any browsers yet. For now just file this event away for future use.
• onfocus - The event was in HTML4. It fires each time the element gets focus which basically means each time the user clicks on it. It's a very handy event for doing cool effects like removing default text when a user clicks on a text box.
• onformchange - This new HTML5 event fires each time an element value in your form changes. It very useful for instances where you need to perform an action when the user makes a selection or enters a value. A simple practical example would be running total that changes each time a user makes product and shipping selections. This event is most commonly used with the output element but can be applied to other elements as well.
• onforminput - This one is also a new HTML5 event. It fires when any form element's input changes. This event is best used for things like comparing two password text boxes to make sure they are the same. In many cases the same effect can be achieved using the oninput (defined next) but this event offers a more concise solution when dealing with multiple elements for validation.
• oninput - This one is another that is new to HTML5. It fires when an element's input changes. This event is best used for things like verifying that the user has entered some valid value in a text box like a properly formatted phone number.
• oninvalid - This one is the last new HTML5 event in our collection here. It fires when an element is invalid. Now, the specs are still a little vague on the ultimate scope of this event but we do know it will tie into attributes like required that ensure an input element has been completed by the user.
• onselect - This event is was in HTML4 and fires each time an element is selected. It has several uses like changing the appearance or content of the selected element.
• onsubmit - This event has been around since forms were first conceived. It fires when a form is submitted. It is the ultimate "catch-all" event used for things like double-checking a form's validity and all sorts of cleanup tasks.
• onreset - Sorry, this is the one that didn't make the cut. This event would fire when the form reset button was clicked in HTML4 so that developers could perform some cleanup or other actions. As the web evolved and forms became more than just a simple collection of input elements this event became less and less relevant. Because of its obsolescence it was decided to just drop the event rather than deprecate it.

Keyboard Events

There are only a handful of keyboard events in HTML. Though they can be very useful, the scope of their useful applications is fairly narrow. In most circumstances developers don't need to perform an action each time the user presses a key on the keyboard. Therefore, HTML5 has not introduced any new keyboard events and they would probably be hard pressed to even come up with a new event that makes sense anyway. Below are the only keyboard events that are found in both HTML4 and HTML5.

• onkeydown - This event fires each time the user presses down on a keyboard key. Again, not something you are likely to use every day but you may need it for an instance where you have some process running that uses a shortcut key to stop or change the process. Or an even simpler example could be popping up a help window when a specific keyboard key is pressed.
• onkeyup - Like its cousin onkeydown, this event fires when a keyboard key is released. However, unlike its cousin, this event has an even narrower scope of useful applications.
• onkeypress - This event is the combination of the two events above. It fires when a key has been pressed down and released. In your development life this event will be the one that you will most likely use of the three keyboard events.

Conclusion

In HTML5 there have been some much welcome improvements in how forms are handled. The new events for forms make validation much easier and more robust. If you have ever done much with form validation you will welcome the changes. Happy coding!