Attributes and Event Attributes of HTML

Attributes of HTML

HTML attribute can be said as specials word which is used inside opening tag and is responsible for controlling an element behaviors. There is different type of attribute that has been identified. These is include the required attribute, optional attribute, standard attribute, and event attribute.The attribute are usually appears as name-values pair and is separated by ‘=’ (equal sign). They are written within the start tags of an elements after the element names.

Different HTML Attributes

Lets us has a looks at different attribute and how they are works in details.

Core Attributes

  • The Style Attributes : This attributes are allow you to specify the Cascading Style Sheet(CSS) rule within any elements. Its can provides various Cascading Style sheet effect to the HTML element likes increasing font size. Its can also changes the font family and coloring.
  • The Title Attributes : Its depends on the carrier how its will behaves and although it is not usually displayed as a tooltip whenever the cursors come over the elements or if it has to display its when the elements is loading. Its also used to explains an elements on hovering the mouse over its.
  • ID : The users id can be used either when an elements carries an id attributes as a unique identifiers, which make its possibles to identify the elements and it is contents or this are used when there is two element which have the same name within a web pages.
  • The Class Attributes : The user need to specify the classes of the elements. More can be learned about this attributes when Cascading Style sheet(CSS) are being learned. The values here may also be a space-separated lists of class name. For examples: class = “className1 className2 className3” .

Internationalization Attribute

  • Dir : The dir attributes help you in indicating to the browsers the directions in which a texts should follows. This attributes can usually takes up two value. These can be to LTR and RTL. LTR means left to right and this are the defaults values, while RTL stands for the right to left.
  • The Lang Attributes : This attributes are helps in showcasing the main languages that are used in a documents. This attributes can be kepts in HTML so that its backward compatible with earlier version of HTML.
  • The XML-Lang Attributes : This attributes are supposed to be the replacements for the lang attributes. The values of XML-lang attributes must have the country codes as mentioned previously.

Generic Attribute

  • Align Attributes : This attributes are useful when you wishs to have some element of your pages at your dispositions. You can to be changes the alignments to left, rights or the center of the pages.
  • Src Attributes : We can be specify the address of the images as the attribute values inside the double quotes. You can uses the src attributes as belows to includes the image on the webpages.
<html>
    <head>
    <title>src Attribute</title>
    </head>
    <body>
    <img src="">
    </body>
    </html>
       
  • Alt Attributes : This can to be describes the images to a developers who are using its at the coding end. If the main images fail, then the alternate images can be used to display.
  • The Width and Height Attributes : This attribute can be used to adjusts the height and width of an images.
<html>
    <head>
    <title>Width and Height</title>
    </head>
    <body>
    <img src=" " width="300px" height="100px">
    </body>
    </html>
  • The Href Attributes : This attributes are used when user want to directs to a specific links to any address. This attributes are used alongs with a tags.The defaults options to open this pages in the same tabs. If you makes uses of the target attributes, then you can sets it value to _blanks.

Global Attributes

HTML is also provide global attribute which can be used with any HTML elements. The attribute is as belows.

  • Accesskey’s : Its specifies a shortcuts keys to activates or focus on any elements.
  • Translate’s :If this attributes are used, its specifies whether the contents of the elements are to be translated or not.
  • Class’s :Its specifies one or more classes name for an elements.
  • Title’s : This attributes are specifies extra informations about an elements.
  • Dir’s: Its specifies the text directions for any contents of an elements.

DOM Attribute Property

It will be returns the groups of node attribute. The NamedNodeMap also represent the collections of attributes object and it can be accessed by index numbers. This index number start at 0.

The syntax to uses this is: node.attributes .

If the user are using Internet Explorer 8 or any of the earlier version then the attribute property will return all possibles attribute for any elements and this can results in more value than expect.

<!DOCTYPE html>
    <html>
    <head>
    <title>
    HTML DOM attributes Property
    </title>
    </head>
    <body>
    <h2>
    HTML DOM attributes Property
    </h2>
    <button id = "CBA" onclick = "myeduCBA()">
    Click Here!
    </button>
    <br><br>
    <span>
    Button element attributes:
    </span>
    <span id="sudo"></span>
    <script>
    function myeduCBA() {
    // It returns the number of nodes
    var cba = document.getElementById("CBA").
    attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    }
    </script>
    </body>
    </html>
    The output for above program will be
    Button element attributes: 2

The output for above program will be Button element attributes: 2

Event Attributes of HTML

In this article, we shall discuss in detail about HTML Event Attributes. Events are the actions that are performed as a result of user action. Here we will go through a basic understanding of events and how it works in the browser on the user actions.

Top 5 HTML Event Attributes

The event handlers or event listeners play an important role in the HTML event attributes. Let’s see different types of event attributes that are global declared and applied to HTML elements also their work in detail. Four primary event attributes are majorly used. They are:

  1. Window Event
  2. Form Events
  3. Mouse Events
  4. Keyboard Events
  5. Drag and drop Events

1. Window Event

  • onafterprintEvent : This attribute is supported by all the Html tags and works when a page started printing and has a single value script.

Code

<!DOCTYPE html>
    <html>
    <head>
    <title> Windows onafterprint Event
    </title>
    </head>
    <body onafterprint="myfun()">
    <h5>Windows onafterprint Event </h5>
    <p>This attribute works in IE and Mozilla</p>
    <body >
    <script>
    function myfun() {
    alert("Document is being printed");
    }
    </script>
    </body>
    </html>
Windows onafterprint Event
This attribute works in IE and Mozilla
  • onbeforeprint : It works before printing. The event gets fired after the printing process. Below is the example code.

Code:

<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body onbeforeprint="get()">
    <h1> Attribute Demo</h1>
    <p style="color:#0000FF;">trigger to print.</p>
    <div class="show"></div>
    <script>
    function get() {
    document.body.style.background = "#00BFFF";
    }
    </script>
    </body>
    </html>
Attribute Demo
trigger to print.
  • onerror : This function is triggered when an error is thrown while no element exists.

Code.

  <!DOCTYPE html>
    <html>
    <body>
    <img src="p.jpg" onerror="myFun()">
    <p>hello world.</p>
    <script>
    function myFun() {
    alert("problem with image loading.");
    }
    </script>
    </body>
    </html>
Outputs:

2. Form Events

  • onfocus: This attribute is enabled when the user gives attention to the element on a web page or when input is focussed.

Code:





   <!DOCTYPE html>
    <html>
    <body>
    <p>This event gets triggered whwn an element
     is been focussed.</p>
    Name: <input type="text" id="name" onfocus=
    "onfoc(this.id)"><br>
    Location: <input type="text" id="loc" onfocus=
    "onfoc(this.id)">
    <script>
    function onfoc(a) {
    document.getElementById(a).style.background
     = "pink";
    }
    </script>
    </body>
    </html>
Output:

This event gets triggered whwn an element is been focussed.

Name:
Location:
  • onselect : It is triggered when a text has been selected in an input box. It throws a dialog box printing an alert message.

Code.

<!DOCTYPE html>
    <html>
    <head>
    <title>onselect demo</title>
    <script>
    function eduhtml() {
    alert("text highlighted!");
    }
    </script>
    </head>
    <body>
    <h1>GURUKUL ZONE Online tutorial</h1>
    Text Box: <input type="text" value=
    "GURUKUL ZONE Online tutorial" 
    onselect="eduhtml()">
    </body>
    </html>
onselect demo

GURUKUL ZONE Online tutorial

Text Box:

3. Key Board Attributes

  • OnKeyDown: It is triggered when a user presses a down Arrow key.
  • OnKeyPress:This event gets triggered when the user presses any key in the keyboard. Note: some browser doesn’t support pressing any key.
  • OnKeyUp: This attribute gets triggered when a user releases a cursor from the text field.

4.Mouse Event Attributes

  • onclick: It is triggered when a user presses the button over the mouse. An input example is given below to show the event while clicking the mouse.

Code:

<!DOCTYPE html>
    <html>
    <body>
    <h1>HTML onclick Event</h1>
    <p> Event plays a vital role in HTML.</p>
    <button onclick="oncf()">Click </button>
    <p id="sample"></p>
    <script>
    function oncf() {
    document.getElementById("sample").innerHTML =
     "Hello World";
    }
    </script>
    </body>
    </html>
Output:

HTML onclick Event

Event plays a vital role in HTML.

  • onmousemove: It is fired when a mouse is moved over an image in any direction.
  • Onmouseup: This event gives a notification when a user releases a button on an output.

5.Drag Event Attributes

  • Ondrag: This is used when an element is being dragged from the web page.
  • Ondragstart: This fires when the user begins to drag from the input field. The below example demonstrates about dragging the two-target area.
  • ondrop: Execute this attribute when a draggable element is dropped inelement