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), just contact me at [email protected]. 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 exist with 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. 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 three Boolean attributes.
Actually HTML has more than three Boolean attributes, but they are not many.
We have come to the end of this article. I hope you appreciated it.
Chrys
