Events with HTML Form Controls

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.

index.html

<!DOCTYPE html>

<html>

<body>

<h1>The Onfocus event on the form</h1>

function myFunc() {

document.getElementById('demo').innerHTML = 'I have set focus on the input text';

}

</script>

</body>

</html>

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.

index.html

<!DOCTYPE html>

<html>

<body>

<h1>The Onblur event on the form</h1>

function myFunc(ele) {

document.getElementById('demo').innerHTML = 'I have lost focus on the input text ' + ele.id;

}

</script>

</body>

</html>

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.

index.html

<!DOCTYPE html>

<html>

<body>

<h1>The Onchange Event on the form</h1>

<option value = ''>Select One...</option>

<option value = 'Australia'>Australia</option>

<option value = 'New Zealand'>New Zealand</option>

<option value = 'United Kingdom'>United Kingdom</option>

</select>

function myFunc() {

document.getElementById('demo').innerHTML = 'Country of Residence: ' + event.target.value;

};

</script>

</body>

</html>

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.

index.html

<!DOCTYPE html>

<html>

<body>

<h1>The oninput Event on the form</h1>

function myFunc() {

document.getElementById('demo').innerHTML = event.target.value;

}

</script>

</body>

</html>

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.

index.html

<!DOCTYPE html>

<html>

<body>

<h1>The oncontextmenu Event</h1>

function myFunc() {

alert('Please Enter your First Name');

}

</script>

</body>

</html>

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.

index.html

<!DOCTYPE html>

<html>

<body>

<form action = 'process.php' onsubmit = 'myFunc()'> Enter name: <input type = 'text' name = 'fname' />

</form>

function myFunc() {

alert('You are about to submit the form.Hit OK to proceed');

}

</script>

</body>

</html>

1. Which of the following events is triggered when a user leaves a form element?

2. Which of the below methods is triggered as soon as a user changes a Textarea element?

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 3

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo