In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > value (input, isindex, textarea, ...)

value property (input, isindex, textarea, ...)

Browser support:

Specifies or returns the value of the control.

The value attribute in HTML and the value property in JavaScript work differently for these controls. You can set the initial value with the value attribute, but the value property contains the actual value of the control. If you want to get or set the initial value in JavaScript, use the defaultValue property.

For the input:checkbox and the input:radio elements, the contents of the value property do not appear in the user interface. For these two elements the value property only has meaning when submitting a form. See the page for the input:checkbox and the input:radio elements for details.

Sometimes it is useful to check the contents of the controls in a form before submitting. See the page for the form tag or the pages for the objects that support the value property for details (you can see these objects in the 'Supported by objects' section below).

Syntax:

object.value;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: value

Possible values:

String that sets or retrieves the value of the control.

Default:

Element	Default value
input:checkbox and input:radio	'on'
input:reset	'reset'
input:submit	'submit'
other elements	an empty string

Example HTML code 1:

This example illustrates the use of the value attribute:

<input type="text" value="Sample text" size="30" />
<br />
<input type="button" value="Sample button" />

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the value property for input:text elements:

<head>
    <script type="text/javascript">
        function ChangeValue () {
            var inputs = document.getElementsByTagName ("input");
            inputs[0].value = inputs[1].value;
        }
    </script>
</head>
<body>
    <input type="text" value="Sample text" size="30" />

    <input type="text" value="New value" />
    <br />
    <button onclick="ChangeValue ();">Modify the value of the first input field!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the value property for textarea elements:

<head>
    <script type="text/javascript">
        function GetValue () {
            var area = document.getElementById ("myArea");
            alert (area.value);
        }
        function SetValue () {
            var area = document.getElementById ("myArea");
            area.value = "The new value";
        }
    </script>
</head>
<body>
    <button onclick="GetValue ();">Get the velue of the textarea!</button>
    <br />
    <button onclick="SetValue ();">Modify the value of the textarea!</button>
    <br />
    <textarea id="myArea"/>The contents of the textarea</textarea>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example sets an initial value of a text field. When the field gets the focus, the initial value disappears, when the field loses the focus and it is empty, the initial value reappears:

<head>
    <script type="text/javascript">
        function ClearPlaceHolder (input) {
            if (input.value == input.defaultValue) {
                input.value = "";
            }
        }
        function SetPlaceHolder (input) {
            if (input.value == "") {
                input.value = input.defaultValue;
            }
        }
    </script>
</head> 
<body>
    <input type="text" value="Please fill this field" onfocus="ClearPlaceHolder (this)" onblur="SetPlaceHolder (this)" /> 
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 5:

This example shows how to display the value of a input:range control:

<head>
    <style>
        .sliderValue {
            margin-left: 20px;
            padding: 3px;
            background-color: #d0d0f0;
            border: 1px solid #808080;
        }
    </style>
    <script type="text/javascript">
        function OnSliderChanged (slider) {
            var sliderValue = document.getElementById (slider.id + "Value");
            sliderValue.innerHTML = slider.value;
        }

        function Init () {
            var slider = document.getElementById ("slider1");
            OnSliderChanged (slider);
            var slider = document.getElementById ("slider2");
            OnSliderChanged (slider);
        }
    </script>
</head>
<body onload="Init ()">
    0<input type="range" id="slider1" min="0" max="100" step="25" onchange="OnSliderChanged (this)" />100
    <span id="slider1Value" class="sliderValue"></span>
    <br /><br /><br />
    -100<input type="range" id="slider2" min="-100" max="100" step="10" onchange="OnSliderChanged (this)" />100
    <span id="slider2Value" class="sliderValue"></span>
</body>