What is HTML Events with Example?

Hello Friends,

You are welcome to our HTML series.

In the last session, we learned the entities and symbols of HTML.

We learned which entity names and numbers are there when we want to enter a symbol and it's not available on the keyboard, how that code is created and how we can add the code to the webpage.

In today's segment, we are going to learn HTML form and keyboard events.

Firstly, we will understand what is an event?

If I talk about an event,

Whenever an incident occurs, it is called an event.

Let's say,

I currently have the keyboard or the mouse and I click its right or left button.

It is an event, the event of clicking.

If I press a button on the keyboard, then it is also an event.

And if we assume it outside the computer scenario, if I am walking that is also an event, sleeping etc.

So,

These are the events in the real-life scenario and the same way if we consider our computer, browser or the html page, the changes that occur through the user interaction are usually called as an Event.

Let's say,

If there is a button given in the webpage and If I click on it, then it will be the event of clicking.

If I am scrolling the page, it is also an event.

Today, we will learn about different events available and how these events are handled.

So first available are the event attributes of the form.

After the form, we will move to the keyboard and in the segment, after that, we will learn the mouse events.

Currently,

First, we will learn from the event attribute.

If we are talking about the form there must be a form available to us.

Currently, I am opening the sublime text.

In a blank file, I will set HTML.

We will give the title "form event attributes".

Save

Form events.html.

Now firstly, we will create a form inside the body.

Form

Action

And method

Currently, we are not going to submit the form anywhere, we will only need and learn the events which we will perform on the input fields of the form.

That is why we don't need to submit the form and only the input fields present in it.

Currently, let me take the input field, let us say type text and we will give it a name "First name".

..

We will give it a label "First name"

Save

We will run this program

......

So, here our program is executed

Form event attributes

First name

And here the text field is shown.

We will make it a bit larger

Okay

So, the first name and the text field

The first event we will learn about is the "onblur".

The first thing that is needed whenever we work with an event is the JavaScript file,

We will learn JavaScript in detail when we come to that course.

But in today's segment, we will execute a function of JavaScript to understand Events and learn to create functions in JavaScript.

So, in this segment, we will learn the portion of functions in JavaScript.

We will first move to the sublime text

And inside the program, I will write a script

Let's say, Script

Now here I want to create a function

Let's say the background is currently white and I want to do something so that the background changes.

Let's say if it is white then it will turn yellow.

So, to change it with the help of JavaScript,

We will write a function for it

Let say,

function then change the background

Okay

Here we will write document dot body dot style dot background equals

Let's say I want to add color here

Let's say, I will make it yellow.

So save

So here we haven't executed anything and only generated a function & its name is "change background".

We refer to the complete web page by document

So if we want to grab any portion from the web page we can do that using a document, document is also the most parent class.

So, there is the body tag inside the document.

Document dot body, the body will capture the body tag.

So, document dot body dot style

What style is, it is to change the color of the background.

The property to change the background is through CSS.

So, we are calling CSS through JavaScript & we are changing the CSS and giving a yellow color background to the document or the complete portion of the web page.

This is the complete meaning of that total line.

If I want to call this function, how can I do that?

First of all, we are learning about the onblur event,

So we have to change the background color when I blur the text field.

The meaning of blur is

Let's say if I click here the "onfocus" event is getting fired.

If I remove the focus from the text field.

Let's say I click outside or I click tab from the text field or click enter etc.

In that scenario, the onblur event of the text field is getting captured.

I am repeating,

When does onblur get activated and when this event is fired?

So, when I am focused in the text field and I press the tab or click outside the field the onblur event is fired.

So,

For that, if I want to pass an event while removing the focus I will write "onblur".

Onblur is an attribute and is also used to fire onblur events.

Now,

I want to change the background color of the document or the webpage on "onblur".

So, I will write that function here

To call the function we write the function name followed by two parentheses, this is the syntax of functions.

So, this is the onblur and I want to change the background on onblur.

Save the code

Run

I am here, I pressed the tab

As soon as I press the tab or the focus is removed from the input field the background color changes and becomes yellow.

Again,

If I am clicking here and then outside, then also the onblur event is fired.

That means, the text field is not focused now the blur event is fired and it has become out of focus, in that case, the background becomes yellow.

This is our onblur event, onblur event is fired when we are focused on an input field and removes the focus from it.

The next event is the "onchange".

When there are inputs in the fields and they change, in that case, the onchange event is fired.

For this, we will go to the code

We have learned the onblur, so we will create the same input field.

..

Let's say the name of the input is the last name, and this time I have to use onchange.

.....

Okay

So currently, we have added the "onchange" attribute but haven't created a function on it.

So let's say I want to apply the function "change background" to "onchange" which means I want to change the background color when there is a change in the input fields.

So, I will remove the onblur from here and add this here.

Save and reload the page.

The moment I reload the field the last name appears here.

Now we have added the onchange event in the field.

What happens with onchange?

When any change occurs in this input field then the onchange event is fired.

In the onblur event, we learned, when we are focused on this and go out of focus, the background color changes.

Here in onchange if I am focused and go out of focus nothing will happen but if I type something in this let's say ABCD.

That means there is a change in the content of the input field, and on the change, the event is fired.

Soon as the change occurs and I click outside the field the background color changes to yellow.

Here the difference between onblur and onchange is,

In the case of onblur when we click out of the field the event is fired.

But

In onchange the event doesn't fire randomly by clicking outside or going out of focus but only if we have made any change in the input field like if we type something or changed the state only in that case the onchange event is activated.

Okay

The next is the onfocus

Onfocus is when we focus on the input field.

So let's say,

Here on the place of onchange I write onfocus and use the same method.

..

Save and Reload.

Now, the event we used is onfocus.

Earlier we learned onchange and onblur in which the color changes when we go from a focused thing to out of focus.

Now, as soon as I focus or click on the last name the event will fire.

The moment I clicked here the background color changed and became yellow, which means when we focus and go inside the field the event is firing.

This is the onfocus.

We can perform various activities with the help of the different events we are learning, I will explain the use of these at the end of the session.

So, that was the onfocus event, it gets fired when I focus on an event field.

Next is the "oninput", which gets fired when we type something in the input.

Let's say

Inside the same thing

This is my program, inside the program

...

Let's say I'm creating an email input field.

And here "oninput"

Let's say I want to show that I am currently typing something in this text field.

In that case, I am creating input "change border" through this there will be changes in the border.

So, function change border

Through "change border" we want to change the border, let us say we change the border of the input field or the body portion.

So let's say I want to make some changes in the border of the body content.

I will write the property as earlier, document dot body dot style dot border.

Save and Reload.

Here I get the email text field but here in the body portion, there is no border in it.

For that what we have to do let's say I want to add the border and I take 10 pixels solid border.

This line indicates that I am giving a border of 10 pixels to the body.

And this event will fire when I type something in the email.

Let's say this is the email field, it's looking bad we will....make it proper.

....

Reload

Okay

This is the email field, the moment I type in this email field the border will be generated.

Let's say I typed "a"

As I typed, the body gets a dark black border.

This is the indication the event is fired when we type something in the input field.

If I type anything else other than "a" the border changes every time I type something.

This means the border is added.

So that was the oninput.

So the difference we saw between onchange and oninput is,

When we type something and click outside or go out of focus the onchange event gets activated or fired but in oninput, the event gets fired as soon as we type something in the input field.

So, that was our oninput event.

Next is the "oninvalid"

Invalid means the input is not proper and it's invalid data.

So let's say we took an email

Reload it

We give its type as email

Run

.....

I am typing the same thing but I am commenting on the oninput one.

So,

Okay this has to be removed

So, no event is being fired while we input.

This is the "oninvalid", the element does not satisfy the predefined constraint.

Now, as we know whenever we type something in the email that should be in a proper format but when?

When we click on the submit button.

So, I need an input button, type equals submit

Submit

Run

When I click here

Okay

The moment I enter an incorrect input a message is shown that the input you made is wrong at (@) is missing.

So this is a predefined constraint for email that if we are not entering proper data it will show while clicking the submit button.

So the event is "oninvalid",

This means if my email is invalid...

So let us say I have to again get that border, the "changeborder" one I will use the same change border function.

Because this is for a dummy purpose we can perform any operation but if we are creating a proper form we use the type of CSS through which proper information can be provided to the user.

Currently, we can randomly apply any changes as we are learning the events.

Right now we are understanding what to do when the input is invalid.

So let's say

Reload

ABCD

As we know ABCD is an incorrect input for the email, due to the incorrect email the moment I click the submit button a border is applied to the body which indicates that the email is incorrect.

Usually, we show a red border or a message that says please enter a proper email address.

Currently, we are just checking and firing whether the email is invalid, if yes then change the border to dark black.

We are firing it when the input of the email is invalid.

If I properly write abcd at(@) mail dot(.) com in its place, the border will disappear and the form will also be randomly submitted.

It means that there is no problem with the email now.

So that was the "oninvalid".

The next is the "onreset"

The reset happens when we fire the reset button.

So let's say here I take the reset button also

.......

Type "reset"

Reset.

As we know, we can reset or remove the data we have filled in with the help of the reset button.

Ah..change background

(7-sec pause)

We do not need it as of now.

....

Save, okay

So, we can reset our data using reset.

Let's say,

I want to perform an operation when I reset the data.

So,

If we fire the change background function upon the reset.

So, if we want to fire the event on reset we will write "onreset change background" in the input field of reset itself.

Where the function has to be written is also an important part.

As you saw, when I wanted to remove the focus from the first name and fire an event at that time, in that case, I wrote "onblur" in the input of the first name.

After that,

When an error comes in the email,

Although, I am correcting the submit button error shown in the email that is why the added "oninvalid" inside the email and not in submit.

Here, as a programmer, we have to make the decision where the events we want to add are to be added.

If I place this "oninvalid" inside the submit button the event will not be fired because the web page or program will know which input field is invalid whether it's the first name, last name or the email.

We will not be able to take the decision if we put it in the submit button.

So, "oninvalid" is added to the input field that is likely to be invalid.

Currently, email is the one that can be invalid and is invalid because we took type as email.

So, we have fired the event in the same input which means the email input.

As of now, we have taken change background on reset in the reset input.

Let us save &

Reload

Here, I am entering some data and clicking on the reset button.

As you saw, the moment I clicked the reset button no colour was changed and no event got fired, so why is this happening?

This indicates I have written the reset in some wrong place.

When I click on reset the input fields are not getting reloaded or reset but the form is getting reset.

So to correct this I will have to add this "onreset" function in this form.

This means, if I write it inside any input field or inside the reset button it will not work.

Onreset the complete form is getting reset, so the onreset event will fire from inside the form.

So, I am adding onreset inside the form tag and changing the background.

Save

Reload

Now, upon clicking reset it will reset and along with it the color will also change just like this.

The fields reset and the background color changes when reset is done.

So, this is the "onreset".

Next is the "onsubmit".

Onsubmit means when we submit the form and an event needs to be fired.

Let's say currently the color is yellow.

I will create the same function for submit.

Change background on submit.

Inside the form "onsubmit"

..

Okay

So, here I wrote a function onsubmit change background on submit.

And let's say I change the color to light green.

Save.

Now, what will happen here is when I submit the form the background color will change to light green.

So let's say reload.

Here I am typing something.

We will add a valid email id to the "email".

Let's submit.

You saw when I submitted the form the color of the form became green for a blink.

Let's do the same

Concentrate on the screen

The color is getting green only for a moment.

Let's say here

.....

Submit

So when we do this the color gets green which means the form is submitted.

If the background color is not showing green, we will alert something here.

Alert is also

...

A popup appears from top to bottom on the webpage.

Currently, I have added an alert inside the submit.

The moment I submit an alert box is shown, this alert is a functionality of JavaScript that we will study in the course of JavaScript.

As soon as I clicked the submit button the alert box appeared and as we haven't written anything in it it says "THIS PAGE SAYS" and then null.

The alert box is here but we haven't written anything in it.

So that is our alert box.

So this function is fired when the form is getting submitted.

On submit the event is getting fired and a dialogue box is opening.

That was the submit.

So, in today's session we learned different event attributes of form.

Among them the main are

Blur: when we move from focus to out of focus.

Change: when we make a change in content and go out of focus.

Onfocus means when we focus on some text field.

Oninput means when we start typing something in the input.

Oninvalid: when the data of the input field is incorrect

Onreset: when we reset the form totally.

And

Onsubmit: when we submit the form.

So, all that we learned today we have to focus

When we fire or add an event where it has to be written.

We have to write the function we are creating in script within JavaScript.

But when we write the event we have to identify for which purpose the event is, is it for input like onfocus, oninput, oninvalid etc these were the input field events

If we are firing an event related to the form we need to write under the form.

So, that was today's segment.

In the next segment, we will learn about keyboard and mouse events.

Today we learned input field related events,

In the next, we will learn to fire the events using the keyboard and the mouse.

I request you to try all the input related events yourself.

And if you are facing any problem while performing the events and are not able to perform them.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

Till then

Thank you, guys.