HTML DOM Input Color defaultValue Property

The DOM Input Color defaultValue Property in HTML DOM is used to set or return the default value of a Color picker. It is the value specified in the value attribute.

Syntax:

It returns the defaultValue property.

colorObject.defaultValue

It is used to set the defaultValue property.

colorObject.defaultValue = value

Property Values:

value: It specifies the default value of the Color picker.

Return Value: It returns the value of the color picker in the form of a string.

Example 1: This example returns the defaultValue of the Input Color property.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>

        HTML DOM Input Color defaultValue Property

    </title>

</head>
 
<body style="text-align:center;">

    <h1>

        GeeksForGeeks

    </h1>

    <h2>

        HTML DOM Input Color defaultValue Property

    </h2>

    <form id="myGeeks">

        <label>

            Select your favorite color:

        </label>

        <input type="color"

               value="#009900"

               name="Geek_color"

               id="color" disabled>

    </form>

    <button onclick="myGeeks()">

        Click Here!

    </button>

    <p id="GFG" style="color:green;

            font-size:24px;">

    </p>

    <script>

        function myGeeks() {

            let x =

                document.getElementById(

                    "color").defaultValue;
 
            document.getElementById(

                "GFG").innerHTML = x;

        }

    </script>

</body>

</html>

Output:

Example 2: This Property illustrates how to set the Property.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>

        HTML DOM Input Color defaultValue Property

    </title>

</head>
 
<body style="text-align:center;">

    <h1>

        GeeksForGeeks

    </h1>

    <h2>

        HTML DOM Input Color defaultValue Property

    </h2>

    <form id="myGeeks">

        <label>

            Select your favorite color:

        </label>

        <input type="color"

               value="#009900"

               name="Geek_color"

               id="color" disabled>

    </form>

    <button onclick="myGeeks()">

        Click Here!

    </button>

    <p id="GFG" style="color:green;

            font-size:24px;">

    </p>

    <script>

        function myGeeks() {

            let x =

                document.getElementById(

                    "color").defaultValue = "#ff0080";
 
            document.getElementById(

                "GFG").innerHTML =

                "The default value was changed to " + x;

        }

    </script>

</body>

</html>