Open In App

HTML DOM Legend align Property

Improve
Improve
Like Article
Like
Save
Share
Report

The Legend align Property in HTML DOM is used to set or return the value of the align attribute of  <legend> Element. 

Note: This property is no longer supported in HTML5.

Syntax: 

  • It returns a legend align Property. 
Legendobject.align;
  • It sets the Legend to align Property. 
Legendobject.align="left|right|top|bottom"

Property values: This property accepts four parameters as mentioned above and described below: 

  • left: It sets the caption to the left of the element. It is a default value.
  • right: It sets the caption to the right of an element.
  • top: It sets the caption to the top of the element.
  • bottom: It sets the caption to the bottom of the element.

Return Value: It returns a  string value that represents the <legend> element alignment. 

Example 1: This Example returns a Legend align Property. 

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>DOM Legend align Property</title>
    <style>
        form {
            width: 70%;
        }
        label {
            display: inline-block;
            clear: left;
            width: 90px;
            margin: 5px;
            text-align: left;
        }
        input[type="text"] {
            width: 250px;
            margin: 5px 0px;
        }
        .gfg {
            font-size: 40px;
            color: green;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <h2>DOM Legend align Property</h2>
    <form id="myGeeks">
        <fieldset>
            <!-- Assigning legend id -->
            <legend id="GFG" align="left">STUDENT::</legend>
            <label>Name:</label>
            <input type="text">
            <br>
            <label>Email:</label>
            <input type="text">
            <br>
            <label>Date of birth:</label>
            <input type="text">
            <br>
            <label>Address:</label>
            <input type="text">
            <br>
            <label>Enroll No:</label>
            <input type="text">
        </fieldset>
    </form>
    <br>
    <button onclick="myGeeks()">Submit</button>
    <p id="sudo" style="font-size:25px;"></p>
 
    <script>
        function myGeeks() {
            // return legend align property
            let g =
                document.getElementById("GFG").align;
            document.getElementById(
                "sudo").innerHTML = g;
        }
    </script>
</body>
 
</html>


Output: 

 

Example 2: This Example sets the Legend to align Property. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Legend align Property</title>
    <style>
        form {
            width: 70%;
        }
        label {
            display: inline-block;
            clear: left;
            width: 90px;
            margin: 5px;
            text-align: left;
        }
        input[type="text"] {
            width: 250px;
            margin: 5px 0px;
        }
        .gfg {
            font-size: 40px;
            color: green;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <h2>DOM Legend align Property</h2>
    <form id="myGeeks">
        <fieldset>
            <!-- Assigning legend id -->
            <legend id="GFG" align="left">STUDENT::</legend>
            <label>Name:</label>
            <input type="text">
            <br>
            <label>Email:</label>
            <input type="text">
            <br>
            <label>Date of birth:</label>
            <input type="text">
            <br>
            <label>Address:</label>
            <input type="text">
            <br>
            <label>Enroll No:</label>
            <input type="text">
        </fieldset>
    </form>
    <br>
    <button onclick="myGeeks()">Submit</button>
    <p id="sudo" style="font-size:25px;"></p>
    <script>
        function myGeeks() {
            // set legend align Property
            let g =
                document.getElementById("GFG").align = "right";
            document.getElementById(
                "sudo").innerHTML =
                "The value of the align attribute was changed to " + g;
        }
    </script>
</body>
 
</html>


Output: 

 

Supported Browsers: The browsers supported by HTML DOM Legend align Property are listed below: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 15 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads