Learn Form Events Attribute

Tips (Total 4)

1. List of Form Events Attribute

2. HTML onblur Event Attribute

3. HTML onchange Event Attribute

4. HTML oncontextmenu Event Attribute

# Tips-1) List of Form Events Attribute

Form Events

Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements):

Attribute	Value	Description
onblur	script	Fires the moment that the element loses focus
onchange	script	Fires the moment when the value of the element is changed
oncontextmenu	script	Script to be run when a context menu is triggered
onfocus	script	Fires the moment when the element gets focus
oninput	script	Script to be run when an element gets user input
oninvalid	script	Script to be run when an element is invalid
onreset	script	Fires when the Reset button in a form is clicked
onsearch	script	Fires when the user writes something in a search field (for <input="search">)
onselect	script	Fires after some text has been selected in an element
onsubmit	script	Fires when a form is submitted

# Tips-2) HTML onblur Event Attribute

The HTML onblur event attribute specifies a script to be executed when an element loses focus. This event is triggered when a user moves away from an element that currently has focus, such as clicking outside of a text input field or navigating to another element using the Tab key .

Example of HTML onblur Event Attribute

Here validates an input field when the user leaves it.

index.html

Example: HTML

 <input type="text" name="fname" id="fname" onblur="myFunction()">

Output should be:

Definition and Usage of HTML onblur Event Attribute

The onblur attribute fires the moment that the element loses focus.

Onblur is most often used with form validation code (e.g. when the user leaves a form field).

Tip: The onblur attribute is the opposite of the onfocus attribute.

Browser Support of HTML onblur Event Attribute

try

Syntax of HTML onblur Event Attribute

<element onblur="script">

Attribute Values of HTML onblur Event Attribute

Value	Description
script	The script to be run on onblur

Technical Details of HTML onblur Event Attribute

Supported HTML tags:	All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

How to validate an input field when the user leaves it

When you leave the input field, a function is triggered which transforms the input text to upper case.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

Enter your name: <input type="text" name="fname" id="fname" onblur="myFunction()">

<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

<script>
function myFunction() {
  let x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

Output should be:

How to use "onblur" together with the "onfocus" attribute

When you enter the input field, a function is triggered which sets the background color to yellow. When you leave the input field, a function is triggered which sets the background color to red.

index.html

Example: HTML

 <input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Output should be:

# Tips-3) HTML onchange Event Attribute

The onchange event attribute in HTML triggers a script when the value of an element is altered and the element subsequently loses focus. This attribute is commonly used with form elements such as <input>, <select>, and <textarea>.

Example of HTML onchange Event Attribute

Here executes a JavaScript when a user changes the selected option of a <select> element.

index.html

Example: HTML

 <select onchange="myFunction()">

Output should be:

Definition and Usage of HTML onchange Event Attribute

The onchange attribute fires the moment when the value of the element is changed.

Tip: This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus. The other difference is that the onchange event also works on <select> elements.

Browser Support of HTML onchange Event Attribute

img

Syntax of HTML onchange Event Attribute

<element onchange="script">

Attribute Values of HTML onchange Event Attribute

Value	Description
script	The script to be run on onchange

Technical Details of HTML onchange Event Attribute

Supported HTML tags:	<input type="checkbox">, <input type="file">, <input type="password">, <input type="radio">, <input type="range">, <input type="search">, <input type="text">, <select> and <textarea>

How to execute a JavaScript when a user changes the selected option of a <select> element

When you select a new car, a function is triggered which outputs the value of the selected car.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">
  <option value="Audi">Audi
  <option value="BMW">BMW
  <option value="Mercedes">Mercedes
  <option value="Volvo">Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>

</body>
</html>

Output should be:

How to execute a JavaScript when the user changes the content of an input field

Modify the text in the input field, then click outside the field to fire the onchange event

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>Modify the text in the input field, then click outside the field to fire the onchange event.</p>

Enter some text: <input type="text" name="txt" value="Hello" onchange="myFunction(this.value)">

<script>
function myFunction(val) {
  alert("The input value has changed. The new value is: " + val);
}
</script>

</body>
</html>

Output should be:

# Tips-4) HTML oncontextmenu Event Attribute

The oncontextmenu event attribute in HTML is used to specify a JavaScript function or script to be executed when the user right-clicks on an element, triggering the context menu. This event allows developers to customize or prevent the default browser context menu behavior

Example of HTML oncontextmenu Event Attribute

It will execute a JavaScript when a context menu is triggered.

index.html

Example: HTML

 <div oncontextmenu="myFunction()" contextmenu="mymenu">

Output should be:

Definition and Usage of HTML oncontextmenu Event Attribute

The oncontextmenu attribute fires when the user right-clicks on an element to open the context menu.

Note: Although the oncontextmenu event is supported in all browsers, the contextmenu attribute is currently only supported in Firefox.

Browser Support of HTML oncontextmenu Event Attribute

img

Syntax of HTML oncontextmenu Event Attribute

<element oncontextmenu="script">

Syntax of HTML oncontextmenu Event Attribute

<element oncontextmenu="script">

Syntax of HTML oncontextmenu Event Attribute

<element oncontextmenu="script">