Pub Pixel Avatar Image

What Are HTML & XHTML Boolean Attributes? And How Do I Use Them?

Published:

Rate Article (Sign in and be the first to rate this article.)

Article Details

Views: 1976

First Published:

Word Count: 2195

Edition: 1

Now the word Boolean which is also known as bool is named after the English mathematician and philosopher George Boole who was the inventor of Boolean logic which is the basis of modern digital computer logic. If you are wondering what the word Boolean means in HTML and XHTML it basically means that the attribute is either true when it is set or false when it is not.

Now HTML and XHTML Boolean attributes should not be confused with Boolean values. Boolean values have one of two states also known as values that can be either true or false. And HTML and XHTML Boolean attributes are actually true when the attribute itself is placed inside an HTML or XHTML start tag and false when its not included inside the start tag at all. Take for example the readonly attribute which is a Boolean attribute, which when placed inside the <input> tag for instance, <input type="text" name="Read Me" readonly> the readonly attribute becomes true, otherwise its false.

Now Boolean attributes are coded differently in HTML and in XHTML. First let me explain how to code in the Boolean attributes for HTML and then later on in this tutorial I will explain how to code in the Boolean attributes for HTML5, XHTML and XHTML5 as well.

Now in HTML, Boolean attributes may appear in minimized form which basically means that you only have to place the Boolean attributes in the element's start tag for example, <input type="text" name="Example" disabled>. So, in other words Boolean attributes in HTML don't need a value all you have to do is place the attribute itself inside the start tag. You also have the option of placing your Boolean attributes inside the element's start tag in their full non-minimized form with no leading or trailing whitespace which basically means that the Boolean attribute is given a value which is the Boolean attributes name for example, <input type="text" name="Disabled Field" disabled="disabled">.

When using the Boolean attributes full non-minimized form you may place your Boolean attributes values in quotation marks, either in single or double quotes, or in no quotes at all in HTML. For example, <input type="text" name="Read Me" readonly="readonly"> or <input type='text' name='Read Me' readonly='readonly'> or <input type="text" name="Read Me" readonly=readonly> are all valid Boolean attributes in HTML.

Also Boolean attributes and their values in HTML are case-insensitive which means that in HTML your Boolean attributes and their values can be in lowercase letters or uppercase letters or a combination of both.

In HTML 4.01 the following variations below are allowed when coding in the Boolean attributes.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 <title>Welcome To HTML 4.01</title> 
</head> 
<body> 

 <form action="http://www.example.com/cgi/form.cgi" method="post"> 
  <p> 
   <input type="text" name="Example 1" disabled=disabled> 
   <input type="text" name="Example 2" disabled=DiSableD> 
   <input type="text" name="Example 3" disabled=DISABLED> 
   <input type="text" name="Example 4" DiSableD=DISABLED> 
   <input type="text" name="Example 5" DiSableD=disabled> 
   <input type="text" name="Example 6" DiSableD=DiSableD> 
   <input type="text" name="Example 7" DISABLED=DISABLED> 
   <input type="text" name="Example 8" DISABLED=disabled> 
   <input type="text" name="Example 9" DISABLED=DiSableD> 
   <input type="text" name="Example 10" disabled="disabled"> 
   <input type="text" name="Example 11" disabled="DISABLED"> 
   <input type="text" name="Example 12" disabled="DisABleD"> 
   <input type="text" name="Example 13" DisAbLeD="DISABLED"> 
   <input type="text" name="Example 14" DisAbLeD="DisABleD"> 
   <input type="text" name="Example 15" DisAbLeD="disabled"> 
   <input type="text" name="Example 16" DISABLED="disabled"> 
   <input type="text" name="Example 17" DISABLED="DisABleD"> 
   <input type="text" name="Example 18" DISABLED="DISABLED"> 
   <input type="text" name="Example 19" disabled='disabled'> 
   <input type="text" name="Example 20" disabled='DISABLED'> 
   <input type="text" name="Example 21" disabled='DisABleD'> 
   <input type="text" name="Example 22" DisAbLeD='DISABLED'> 
   <input type="text" name="Example 23" DisAbLeD='DisABleD'> 
   <input type="text" name="Example 24" DisAbLeD='disabled'> 
   <input type="text" name="Example 25" DISABLED='disabled'> 
   <input type="text" name="Example 26" DISABLED='DisABleD'> 
   <input type="text" name="Example 27" DISABLED='DISABLED'> 
   <input type="text" name="Example 28" DISABLED> 
   <input type="text" name="Example 29" DisABled> 
   <input type="text" name="Example 30" disabled> 
  </p> 

  <p> 
   <input type="submit" value="Send!"> 
   <input type="reset" value="Clear"> 
  </p> 
 </form> 

</body>
</html>

In my opinion you should code your Boolean attributes for HTML 4.01 using the minimized form variation <input type="text" name="Example" disabled> instead of using the other variations, but to each their own.

Now when using Boolean attributes in HTML5, you can place the Boolean attributes in their minimized form inside the element's start tag which basically means that you only have to place the Boolean attributes in the element's start tag for example, <input type="text" name="Example" disabled>. You may also place your Boolean attributes inside the element's start tag in their full non-minimized form with no leading or trailing whitespace which basically means that the Boolean attribute is given a value which is the Boolean attributes name for example, <input type="text" name="Disabled Field" disabled="disabled">. The Boolean attributes value can also be an empty string with no leading or trailing whitespace for example, <input type="text" name="Example" disabled="">.

Now just like in HTML, Boolean attributes and their values in HTML5 are case-insensitive which means that in HTML5 your Boolean attributes and their values can be in lowercase letters or uppercase letters or a combination of both.

Now in HTML5 you are allowed to use the following variations below when coding in the Boolean attributes.


<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="UTF-8"> 
 <title>Welcome To HTML5</title>
</head> 
<body> 

 <form action="http://www.example.com/cgi/form.cgi" method="post">  
  <p> 
   <input type="text" name="Example 1" disabled=""> 
   <input type="text" name="Example 2" DisABLed=""> 
   <input type="text" name="Example 3" DISABLED=""> 
   <input type="text" name="Example 4" disabled=''> 
   <input type="text" name="Example 5" DisABLed=''> 
   <input type="text" name="Example 6" DISABLED=''> 
   <input type="text" name="Example 7" disabled=disabled> 
   <input type="text" name="Example 8" disabled=DiSableD> 
   <input type="text" name="Example 9" disabled=DISABLED> 
   <input type="text" name="Example 10" DiSableD=DISABLED> 
   <input type="text" name="Example 11" DiSableD=disabled> 
   <input type="text" name="Example 12" DiSableD=DiSableD> 
   <input type="text" name="Example 13" DISABLED=DISABLED> 
   <input type="text" name="Example 14" DISABLED=disabled> 
   <input type="text" name="Example 15" DISABLED=DiSableD> 
   <input type="text" name="Example 16" disabled="disabled"> 
   <input type="text" name="Example 17" disabled="DISABLED"> 
   <input type="text" name="Example 18" disabled="DisABleD"> 
   <input type="text" name="Example 19" DisAbLeD="DISABLED"> 
   <input type="text" name="Example 20" DisAbLeD="DisABleD"> 
   <input type="text" name="Example 21" DisAbLeD="disabled"> 
   <input type="text" name="Example 22" DISABLED="disabled"> 
   <input type="text" name="Example 23" DISABLED="DisABleD"> 
   <input type="text" name="Example 24" DISABLED="DISABLED"> 
   <input type="text" name="Example 25" disabled='disabled'> 
   <input type="text" name="Example 26" disabled='DISABLED'> 
   <input type="text" name="Example 27" disabled='DisABleD'> 
   <input type="text" name="Example 28" DisAbLeD='DISABLED'> 
   <input type="text" name="Example 29" DisAbLeD='DisABleD'> 
   <input type="text" name="Example 30" DisAbLeD='disabled'> 
   <input type="text" name="Example 31" DISABLED='disabled'> 
   <input type="text" name="Example 32" DISABLED='DisABleD'> 
   <input type="text" name="Example 33" DISABLED='DISABLED'> 
   <input type="text" name="Example 34" DISABLED> 
   <input type="text" name="Example 35" DisABled> 
   <input type="text" name="Example 36" disabled> 
  </p> 

  <p> 
   <input type="submit" value="Send!"> 
   <input type="reset" value="Clear"> 
  </p> 
 </form> 

</body>
</html>

In my opinion you should code your Boolean attributes for HTML5 using the minimized form variation <input type="text" name="Example" disabled> instead of using the other variations, but to each their own.

Now all Boolean attributes in XHTML must be explicit or in other words they must have a value and may not be minimized to one word, as is allowed in HTML. So, in XHTML you need to include a value for all your Boolean attributes so that they appear in their full non-minimized form. For example, <input type="text" name="Disabled Field" disabled="disabled" /> is the correct way to code your Boolean attributes in XHTML so that your code will validate in XHTML.

Now when coding in the Boolean attributes in XHTML they must be in lowercase characters in-order for them to validate in XHTML. For example, <input type="text" name="Read Me" readonly="readonly"> is the correct way to code your Boolean attributes in XHTML so that your code will validate in XHTML.

Another important thing that you should remember is that all the values for the Boolean attributes in XHTML must be contained in quotation marks, either in single or double quotes. For example, <input type="text" name="Read Me" readonly="readonly" /> or <input type='text' name='Read Me' readonly='readonly' /> are both valid XHTML examples.

You should be aware that some HTML user agents, like for example a browser, are unable to interpret Boolean attributes when they appear in their full non-minimized form, as required by XML 1.0. For example, <input type="text" name="Disabled Field" disabled="disabled" /> is considered a non-minimized Boolean attribute because it has a value included in it. It's important to remember that this problem doesn't affect user agents that are compliant with HTML 4 specifications at the very least, only old user agents that don't follow the HTML 4 specifications are affected with this problem. The following Boolean attributes that are involved in this problem include the Boolean attributes checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly and selected.

Now in XHTML 1.0 you are allowed to use the following variations below when coding in the Boolean attributes.


<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
 <title>Welcome To XHTML 1.0</title> 
</head> 
<body> 

 <form action="http://www.example.com/cgi/form.cgi" method="post"> 
  <p> 
   <input type="text" name="Example 1" disabled="disabled" /> 
   <input type="text" name="Example 2" disabled='disabled' /> 
  </p> 

  <p> 
   <input type="submit" value="Send!" /> 
   <input type="reset" value="Clear" /> 
  </p> 
 </form> 

</body>
</html>

In my opinion you should code your Boolean attributes for XHTML 1.0 using the non-minimized form variation <input type="text" name="Example" disabled="disabled" /> instead of using the other variations, but to each their own.

And in XHTML5 you are allowed to use the following variations below when coding in the Boolean attributes.


<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
 <meta charset="UTF-8" /> 
 <title>Welcome To XHTML5</title> 
</head> 
<body> 

 <form action="http://www.example.com/cgi/form.cgi" method="post">  
  <p> 
   <input type="text" name="Example 1" disabled="" /> 
   <input type="text" name="Example 2" disabled='' /> 
   <input type="text" name="Example 3" disabled="disabled" /> 
   <input type="text" name="Example 4" disabled="DISABLED" /> 
   <input type="text" name="Example 5" disabled="DisABleD" /> 
   <input type="text" name="Example 6" disabled='disabled' /> 
   <input type="text" name="Example 7" disabled='DISABLED' /> 
   <input type="text" name="Example 8" disabled='DisABleD' /> 
  </p> 

  <p> 
   <input type="submit" value="Send!" /> 
   <input type="reset" value="Clear" /> 
  </p> 
 </form> 
 
 </body>
</html>

In my opinion you should code your Boolean attributes for XHTML5 using the non-minimized form variation <input type="text" name="Example" disabled="disabled" /> instead of using the other variations, but to each their own.

Article Tags

Tag Article (Sign in if you want to tag this article.)

Share This Article

Send To Facebook Link

Tweet This Link

Send To LinkedIn Link

Send To StumbleUpon Link

Digg This Link

Send To Google Plus One Share Link

Send To Reddit Link

Send To Tumblr Link

Send To Delicious Link

Send To FriendFeed Link

Send To Diigo Link

Email Link

AddThis Link

0 Comments

Leave Comment (Sign in and be the first to comment on this article.)

Important

This site cannot guarantee the accuracy of articles, comments, answers and other types of content or media submitted by members or anonymous users and guests, and we recommend that you use common sense when following any advice or information found on this site. Read our full Content Disclaimer Agreement for further information.