So far, you've learned how to handle DOM events using event attributes and adding event listeners to HTML elements. In this chapter, you'll learn events on form elements like text input, checkboxes, select boxes, and radio buttons. HTML forms allow users to interact with a web application; thus, events on the forms form an integral part.

Onfocus Event

The onfocus event is fired when you set your mouse on HTML form elements such as <input> and <select> elements.

Onblur Event

Next is the onblur event, which is the opposite of the onfocus event, and it is triggered when an element loses its focus. Let's display the id of the input element in the <p> 'demo' tag in the above example when it loses its focus.

onchange Event

The onchange event occurs when you change a value of an element. It is used with HTML form elements such as <input>, <select>, and <textarea>. Let's try it with the <select> option.

oninput Event

Unlike the onchange event, the oninput triggers when you try to change a value in a <textbox> or <textarea>. Let's find out how it types the value of the <textbox> in the 'demo' paragraph tag as soon as you start typing the text.

Oncontextmenu Event

The oncontextmenu triggers when you right-click your mouse on a form element. You can use this event in other controls in any HTML element, not just on forms. Let's find out what happens when you right-click an <input> element where you're supposed to enter your name.

onsubmit Event

The onsubmit event is triggered when the user submits the form. This function is handy when you fill in all the form fields and submit the form for client-side validation, which you'll discover in the next chapter.