Setting Boolean and Control Attributes in DOM 5

DOM5 HTML – Part 4

Forward: In this part of the series we see how to set the Boolean attributes and form control attributes in DOM.

By: Chrysanthus Date Published: 26 Jul 2012

Introduction

This is part 4 of my series, DOM5 HTML Basics. In this part of the series we see how to set the Boolean attributes and form control attributes in DOM.  I assume, you have read the previous parts of the series before reaching here; this is a continuation.

A Boolean attribute of an html element is an attribute, whereby the presence of the name means true, and the absence means false. A Boolean attribute does not take any value. We see how to set Boolean attributes in this part of the series. Most of the elements used in an html form are called controls. Some Boolean attributes are used with controls; others are not used with controls.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Setting Boolean Attributes
Boolean Attributes, whether used with controls or not have one way of being set. You set a Boolean attribute in a similar way that you set a non-Boolean attribute. However, the value assigned here is either, true or false, without quotes. Read and try the following example:

<!DOCTYPE HTML>
<html>
<body>

    <input type="text" name="name" id="IN1"></label>

    <script type="text/ECMAScript">
        document.getElementById('IN1').disabled = true;
    </script>

<body>
</html>

After the function, getElementById('ID'), you type a dot and then the name of the Boolean attribute. Then you assign the value, true or false without quotes. true means, the Boolean attribute is true (equivalent to typing the name of the attribute in the tag, making it present). false means the Boolean attribute is false (equivalent to not typing the name in the tag).

Getting Boolean Attributes
You get a Boolean attribute in the same way that you get any other attribute. However, the value returned is either true or false without quotes: Read and try the following:

<!DOCTYPE HTML>
<html>
<body>

    <input type="text" name="name" id="IN1" disabled></label>

    <script type="text/ECMAScript">
        disBool = document.getElementById('IN1').disabled;
        if (disBool == true)
            {
                alert('yes');
            }
    </script>

<body>
</html>

Controls
Majority of the form controls have the attribute, value. Without DOM, the value of the value attribute is the initial value that appears in the form control. With DOM you can be changing this value at run time. You set (change) the value of the value attribute in the same way that you set the values of attributes of other elements. Read and try the following code:

<!DOCTYPE HTML>
<html>
<body>

    <input type="text" name="name" id="IN1"></label>

    <script type="text/ECMAScript">
        document.getElementById('IN1').value = "James Taylor";
    </script>

<body>
</html>

You get the value of the value control attribute as you get values of non-control attributes. The other control attributes are set and got as with non-control attributes.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Setting Boolean and Control Attributes in DOM 5

DOM5 HTML – Part 4

Introduction

Related Links

Comments