The HTML oninvalid event attribute is triggered when an input field is invalid while submitting the form in an HTML document.SyntaxFollowing is the syntax −ExampleLet us see an example of HTML oninvalid event Attribute −    body {       color: #000;       height: 100vh;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;       text-align: center;       padding: 20px;    }    textarea {       border: 2px solid #fff;       background: transparent;       font-size: 1rem;    }    ::placeholder {     ... Read More

The HTML oninput event attribute is triggered when the user enters input in an input/textarea HTML element in an HTML document.SyntaxFollowing is the syntax −ExampleLet us see an example of HTML on input event Attribute −    body {       color: #000;       height: 100vh;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;       text-align: center;       padding: 20px;    }    textarea {       border: 2px solid #fff;       background: transparent;       font-size: 1rem;    }    ::placeholder {       color: #000;       font-size: 1rem;    } HTML oninput Event Attribute Demo    function inputFn() {       document.querySelector('textarea').style.background = '#ffffff36';    } OutputNow enter your message in the text area to observe how oninput event attribute works.

The HTML onfocus event attribute is used when an HTML element gets focus in an HTML document.SyntaxFollowing is the syntax −ExampleLet us see an example of HTML onfocus event Attribute −Live Demo    body {       color: #000;       height: 100vh;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;       text-align: center;       padding: 20px;    }    textarea {       border: 2px solid #fff;       background: transparent;       font-size: 1rem;    }    ::placeholder {       color: #000;       font-size: 1rem;    } HTML onfocus Event Attribute Demo    function focusFn() {       document.querySelector('textarea').style.background = '#ffffff36';    } OutputNow enter your message in the text area to observe how onfocus event attribute works.

The HTML ondrag event attribute is triggered when the user drags an HTML element in an HTML document. The HTML image and link elements are dragged by default so there is no need to specify ondrag attribute on them.SyntaxFollowing is the syntax −ExampleLet us see an example of HTML ondrag event Attribute −Live Demo    body {       color: #000;       height: 100vh;       background-color: #FBAB7E;       background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);       text-align: center;    }    .drop-target {       display: inline-block;   ... Read More

The HTML oncontextmenu event attribute is triggered when the user right clicks on an HTML element to open the context menu in an HTML document.SyntaxFollowing is the syntax −ExampleLet us see an example of HTML oncontextmenu event Attribute −Live Demo    body {       color: #000;       height: 100vh;       background-color: #FBAB7E;       background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);       text-align: center;       padding: 20px;    }    .box {       background: #db133a;       width: 140px;       height: 140px; ... Read More

The HTML oncut event attribute is triggered when user cuts the content of an HTML element in an HTML document.SyntaxFollowing is the syntax −ExampleLet us see an example of HTML oncut event Attribute −Live Demo    body {       color: #000;       height: 100vh;       background-color: #FBAB7E;       background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);       text-align: center;       padding: 20px;    }    p {       font-size: 1.1rem;    } HTML oncut Event Attribute Demo I'm a paragraph HTML ... Read More

The HTML oncopy attribute is triggered when user copy the content of an HTML element in an HTML document.SyntaxFollowing is the syntax −ExampleLet us see an example of HTML oncopy event Attribute −Live Demo    body {       color: #000;       height: 100vh;       background-color: #FBAB7E;       background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);       text-align: center;       padding: 20px;    }    p {       font-size: 1.1rem;    } HTML oncopy Event Attribute Demo I'm a paragraph HTML element ... Read More

The HTML onchange attribute is triggered when you change the value of an HTML element in an HTML document.SyntaxFollowing is the syntax −ExampleLet us see an example of HTML onchange event Attribute −Live Demo    body {       color: #000;       height: 100vh;       background-color: #FBAB7E;       background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);       text-align: center;       padding: 20px;    }    .show {       font-size: 1.1rem;       margin: 1rem auto;    }    select {       height: 2rem; ... Read More

The HTML onclick attribute is triggered when you mouse click on an HTML element in an HTML document.SyntaxFollowing is the syntax −ExampleLet us see an example of HTML onclick event Attribute −Live Demo    body {       color: #000;       height: 100vh;       background-color: #FBAB7E;       background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);       text-align: center;       padding: 20px;    }    .btn {       background: #db133a;       border: none;       height: 2rem;       border-radius: 2px;   ... Read More

The HTML onblur attribute is used when an HTML element loses focus in an HTML document.SyntaxFollowing is the syntax −ExampleLet us see an example of HTML onblur event Attribute −Live Demo    body {       color: #000;       height: 100vh;       background-color: #FBAB7E;       background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);       text-align: center;       padding: 20px;    }    .btn {       background: #db133a;       border: none;       height: 2rem;       border-radius: 2px;       ... Read More