HTML Boolean Attributes and JavaScript

Google+ Pinterest LinkedIn Tumblr +

Introduction
After completing your course in HTML, JavaScript and the HTML DOM you might still
find difficulties in using HTML Boolean attributes. You might have the following
questions: What are really Boolean HTML Attributes? Do you need Boolean Attributes
with CSS? How do you use Boolean attributes with JavaScript and the DOM? I answer
all these questions in this article.

You should have basic knowledge in HTML, JavaScript and HTML DOM in order to
understand this article. This article is based on HTML 4 and XHTML.

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

HTML Boolean Attributes
HTML Boolean Attributes exist mainly with the HTML Form element. It does not really
exist for the DIV, TABLE, Paragraph and many other HTML elements. The HTML
elements you put in the Form are called Controls. Examples of controls are, the button
element, the Input element and the Text Area elements. The Input element can be used to
create a good number of different Controls (elements).

Not all controls (control elements) have the Boolean attributes. In this article I will give
you a list of the controls that have Boolean attributes and roles of the Boolean attributes.

What is an Attribute?
An HTML element is made up of a single or double tag. The characteristics of an element
are defined by what is called the attributes of the element. An attribute is typed into the
single tag in the case of a single tag element or into the start tag in the case of a double
tag element. An attribute generally consists of an attribute name and a value. There is an
exception to this name/value rule. Some attributes for some Form Control elements have
only a name, no value. Such an attribute is a name and value in itself. It simple indicates
the presence or absence of a characteristic for a control element. These are the Boolean
attributes.

What is really a Boolean attribute?
A Boolean attribute is an HTML attribute that is either typed or not typed; a Boolean
attribute is either present in the tag or not present. A Boolean attribute has just its name
and no value. It indicates the presence or absence of a characteristic for the control. When
it is present (typed), we say the control is in the On state for the Boolean attribute. When
it not present, we say the control is in the Off state for the Boolean attribute.

List of Controls with their Attributes
Text-Input Control
The Boolean attributes for this control are, readonly and disabled. When the control is
readonly, the user can only read the control’s value but cannot write into it. When it is
disabled, the user cannot use the control, for whatever reason. You can try the following
to see the effects:

Password
The Boolean attributes for this control are also, readonly and disabled. When the control
is readonly, the user can only read the value (actually see the dots or asterisks) but cannot
write into the control. When it is disabled, the user cannot use the control. You can try the
following to see the effects:

Checkbox
The Boolean attributes for this control are checked, readonly and disabled. When it is
checked, the control has the tick. When it is not checked, it means the control does not
have the tick. If you, the web site designer type checked in the tag, then the control will
have the tick as initial value. If you do not type checked, the control will not have the tick
as initial value. When the control is readonly the user can only read the value but cannot
write (change the tick by clicking) into it. When it is disabled, the user cannot use it. You
can try the following to see the effects (your browser may not respect the first one):

Radio Button
The Boolean attributes for this control are checked, readonly and disabled. When it is
checked, is has the dot. When it is not checked, it means it does not have the dot. If you,
the web site designer type checked in the tag, then it will have the dot as initial value. If
you do not type checked, it will not have the dot as initial value. When the control is
readonly the user can only read the value but cannot write (change the dot by clicking)
into it. When it is disabled, the user cannot use it. You can try the following to see the
effects (your browser may not respect the first one):

Button    
The Boolean attribute for this control is readonly; the meaning is the same as above. Try
the following:

Enter

Select, Option, Optgroup and Textarea Controls
As we have seen there are at least three Boolean attributes with the HTML Form. The
meanings have been given above. The meanings are the same when used with different
elements. The readonly and disabled attributes can also be used for the following
elements, depending on how they are relevant: Select, Option, Optgroup and Textarea. In
short each of the three attributes can be used for any control depending on how it is
relevant to the control.

Anything to do with CSS?
The aim of CSS is to determine the look of the web page and the size and position of the
HTML elements. So when working with CSS, you do not need to use the Boolean
attributes.

The Case of checked
The Boolean attribute, checked, is applicable to only the checkbox and radio controls.
The user can actually change the checked Boolean attribute (value). He does that by
simply clicking the control. The user cannot change the readonly or disabled attributes for
any control.

JavaScript and the HTML DOM
With JavaScript and the DOM, the presence of a Boolean attribute is considered as true
and the absence is considered as false. In your code, to access a Boolean attribute, you
type the reference of the HTML element, followed by a dot and then the Boolean
attribute with all the characters of the Boolean attribute in lower case.

Assuming that the ID for a checkbox is “chk1”, then the following expression will return
“true”.

document.getElementById(‘ chk1’).checked

If you want the checkbox to be checked (have the tick) use the following statement:

document.getElementById(‘chk2’).checked = true;

If you want to the checkbox to be unchecked (remove tick) use the following statement:

document.getElementById(‘chk2’).checked = false;

So even though HTML does not have a value for a Boolean attribute, the DOM
(JavaScript) has, which is either true or false. You use these true or false values in
JavaScript code; you cannot use them in the HTML control element tags.

In your JavaScript code, you use the true or false values as shown above for, the checked,
readonly and disabled Boolean attributes; that is, for all Boolean attributes.

We have come to the end of this article. I hope you appreciated it.

Chrys

Share.

About Author

Leave A Reply