HTML - Why boolean attributes do not have boolean value? - html

I noticed that some elements have attributes which are boolean. I wonder why the values are not true or false? or 1 and 0? Are there any reason behind why they are like this?
<option selected="selected">Ham Burger</option>
or
<input type="button" disabled="disabled" />
Thanks in advance!

In SGML, an attribute may be minimized so that its value alone is short for both the name and the value, with the only possible value for the attribute in this case obviously being the attribute's own name. HTML uses this for boolean attributes, where the presence or absence of the attribute is what's meaningful, and its value is irrelevant. But in XML, minimized attributes were disallowed, so we wound up with the awkwardness that is selected="selected" when XHTML came into vogue. If you're writing HTML rather than XHTML, you can just write selected.

The exact definition is:
Some attributes play the role of boolean variables (e.g., the selected
attribute for the OPTION element). Their appearance in the start tag
of an element implies that the value of the attribute is "true". Their
absence implies a value of "false".
Also:
Boolean attributes may legally take a single value: the name of the attribute itself [...] In HTML, boolean attributes may appear in minimized form
Basically, this implies that there are only two possible statuses for boolean attributes, true and false, but there isn't a not set status.

For the disabled attribute I think it's the presence of the attribute that disables the element regardless of its value.
It guess one of the reasons could be to allow more values than just yes/no in the future. For instance, instead of visible=true/false, you can have visibility=visible/hidden/collapsed

the HTML standard (Not the XHTML) is to have simply selected instead of selected="selected"
See here: http://www.w3.org/TR/html4/interact/forms.html#adef-selected
When XHTML was created to allow a a better integration with XML in HTML, (see http://www.w3.org/MarkUp/2004/xhtml-faq#need), the parts that do not fit to the XML-like structure requirements of HTML were corrected. So wordings like selected got transformed into selected="selected" to fit the standard

Readability, a lot of HTML is not coded by people with computer science backgrounds so the concept of "Boolean" would be foreign to them in those terms. Also it improves readability for Computer Science and other technical users by providing reinforced clues as to the function of a given statement.

As vc74 has said, it doesn't matter what value you have for selected or disabled.
<option selected="selected">Ham Burger</option>
will do the same as
<option selected="sjkhdaskj">Ham Burger</option>

i think this is just for ease to user to specify the attribute value in most human readable form if he/she dont know what is true/false
<html>
<body>
<select>
<option>1</option>
<option selected="blah">2</option>
<option >3</option>
</select>
</body>
you see in above code i have not use selected=selected, i used what i want it still select the option value, or you can simply use <option selected>2<option>.

Related

Why is the "true" boolean value the "wrong attribute value"?

I have the following button:
<button id="=" style=width:150px;height:150px;font-size:100px; onclick="equalFunction()" disabled="true">=</button>
however in the disabled="true" my IDE recognizes the "true" value to be the "wrong attribut value" does anyone know how to solve this? The code still works, its just annoying to see it be highlighted.
You don't need to set it to true. Do something like this:
<button id="=" style=width:150px;height:150px;font-size:100px; onclick="equalFunction()" disabled>=</button>
According to the HTML5 spec:
A number of attributes in HTML5 are boolean attributes. The presence
of a boolean attribute on an element represents the true value, and
the absence of the attribute represents the false value.
If the attribute is present, its value must either be the empty string
or a value that is a case-insensitive match for the attribute's
canonical name, with no leading or trailing whitespace.
So with a boolean attribute like disabled, it's presence alone is enough and it needs no value, although virtually every web browser will still accept it. Therefore, you should use either disabled (alone) or disabled="disabled"

Should a value be used for all attributes?

There are attributes in HTML that only specify a boolean value. These include multiple, disabled, selected etc.
In XHTML, due to the strict XML syntax, you must give the attributes a value. This is normally the name of the attribute.
<select multiple="multiple">
But HTML also supports just the name of the element.
<select multiple>
And, as seen here, browsers (at least Firefox) also allow for other values with the same result.
<select multiple="yes">
Which one of these is the generally used one, or is there one? What is the official recommendation?
From the spec
A number of attributes are boolean attributes. The presence of a
boolean attribute on an element represents the true value, and the
absence of the attribute represents the false value.
If the attribute is present, its value must either be the empty string
or a value that is an ASCII case-insensitive match for the attribute's
canonical name, with no leading or trailing whitespace.
So multiple, multiple=multiple, multiple='multiple' or multiple="multiple". Nothing else (case insensitivity aside), even if browsers recover from the error.
I'd lean towards either the short (multiple) or the XML parser-friendly with the more conventional quotes (multiple="multiple").

Is there any difference for data-attribute=false with data-attribute="false" in html element?

I have data attribute in html element as <button data-verified=false>Update</button>. It have boolean value for data attribute.
Is there any difference with following element <button data-verified="false">Update</button> as the data-attribute is wrapped with double quotes.
Is boolean values are supported in html?
Boolean attributes are supported in HTML, but data-verified isn't one of them, no matter how it appears in the markup. data-verified=false and data-verified="false" both create an attribute of the type string and value "false", which if tested in JS as a boolean will be treated as true
This is only the case because false doesn't contain spaces. As a contrary example, data-verified=not true is invalid and not at all the same as data-verified="not true"
There are no differences in the values - however, always prefer to quote around attribute values, because:
Looks cleaner
Easier to maintain
Every editor can deal with it easily
It's a standard, nearly all HTML code examples you'll see use the value quoted
My answer corroborates from Do you quote HTML5 attributes?
I think it is just a convention that attributes always have double quotes.
However. In jQuery, you can use the .data() method. It is smart enough to recognize booleans and numeric values.
The only difference is that only the latter is allowed in XHTML. In HTML syntax, they both are allowed, and they are equivalent: the difference is lost when the HTML markup is parsed, and the DOM contains in both cases only the string false.
This follows from general principles in HTML and does not depend on the name of the attribute in any way.
“Boolean value” is a vague term. In HTML5, some attributes are called “boolean attributes”, but this is strongly misleading – especially since values true and false, far from being the only values allowed, aren’t allowed at all for such values. You need to read the specification of “boolean attributes” to see what they really are.
When you use data-* attributes, it is completely up to you what you use as values and how you process them.

set style only to the option of select

I have a select ond it's options contains text in hebrew and english. For example:
<select>
<option value="1">(J9J) AMCKDPR ללא הגבלה IAPPLE</option>
<option value="2">(B0A) MICROSOFT-עם הגבלה</option>
</select>
Because my pages are in hebrew, I am using direction:rtl to the page. As result I get the options displayd incorrect, something like:
IDIGITAL ללא הגבלה R9K) MICROUSIM)
If I change the direction of the whole select to ltr, I get the arrow of the select on the right - which is not good.
Is there any way I can set style only to the options of the select?
I am using IE8 and not firefox.
This cannot be done in CSS, since there is no element to set a rule on—you want part of the option element contents to be treated left-to-right, but you cannot use markup for that part. No markup is allowed inside the option element.
Therefore, the issue needs to be dealt with at the character level, using LEFT-TO-RIGHT MARK and RIGHT-TO-LEFT mark, e.g.
<option value="1">‎(J9J) AMCKDPR ‏ללא הגבלה IAPPLE</option>
I’m not sure how to apply the idea to the second option element; maybe just this way:
<option value="2">‎(B0A) MICROSOFT-עם הגבלה</option>
but I cannot judge whether the result looks OK, because I can’t really read Hebrew.
Check out Authoring HTML: Handling Right-to-left Scripts.

Can the select option value be of different types?

I want to know what is good practice for select option values.
Example
<select name="select">
<option value="0-9">Sample</option>
<option value="a-z">Sample</option>
<option value="this is sample value">Sample</option>
<option value="this-is-sample-value">Sample</option>
<option value="this_is_sample_value">Sample</option>
<option value="this & is | sample ** value">Sample</option>
</select>
I'm a little bit confused here. Is the select value same like input text and textarea
There are no limits real to the type of data that can be set in the value attribute of the option element. Characters with special meaning in HTML do, of course, need to be represented by the appropriate entities (& as & for example (although the one in the question meets the "followed by a space character" exception to the rule)).
The attribute is defined as containing CDATA:
<!ELEMENT OPTION - O (#PCDATA) -- selectable choice -->
<!ATTLIST OPTION
%attrs; -- %coreattrs, %i18n, %events --
selected (selected) #IMPLIED
disabled (disabled) #IMPLIED -- unavailable in this context --
label %Text; #IMPLIED -- for use in hierarchical menus --
value CDATA #IMPLIED -- defaults to element content --
>
— http://www.w3.org/TR/html4/interact/forms.html#h-17.6
CDATA is a sequence of characters from
the document character set and may
include character entities. User
agents should interpret attribute
values as follows:
Replace character entities with characters,
Ignore line feeds,
Replace each carriage return or tab with a single space.
User agents may ignore leading and
trailing white space in CDATA
attribute values (e.g., " myval "
may be interpreted as "myval").
Authors should not declare attribute
values with leading or trailing white
space.
For some HTML 4 attributes with CDATA
attribute values, the specification
imposes further constraints on the set
of legal values for the attribute that
may not be expressed by the DTD.
— http://www.w3.org/TR/html4/types.html#type-cdata
The specification doesn't impose additional limits for the option element's value attribute.
Same as a text-type input -- it can be string, float, etc. This is more a question of which is most reliable to parse when you process the form data.
The posted value will be the one corresponding to the selection.
In that regards, it is treated the same way as an input type text is.
Yes, it is a string type, and could have any value. The value goes when you submit a form, and there are limitations.
The limitations depends which technology you are using on server end.
As in case of ASP.Net when you try to post special characters like & or especially < script > some script < / script > or the similar characters which are part of html tags or could be a dangerous script. The asp.net checks the posted data and throws exception. means some special characters are not allowed in value of select box with regards to asp.net
However the samples you given (except of having & it should be prefixed by amp;) are allowed and could be set in option tag value attribute.
Hope your understanding are build.