I seem to recall most (maybe all) attributes in previously versions of HTML (before HTML5) required attributes to have values, like readonly="readonly".
Is this true for HTML5 and the autofocus attribute?
In HTML, you use boolean attributes with or without values as you like.
A boolean, for W3C, like autofocus can be written like that autofocus or autofocus="autofocus" or also autofocus="".
If you don't want autofocus just don't write it.
I think you are confused because XHTML requires values for all attributes: attributes="values".
Here is some information about boolean attribute use in HTML:
http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attribute
Quoting the HTML5 spec and expanding a bit on Pekka:
http://www.w3.org/TR/html5/forms.html#autofocusing-a-form-control:-the-autofocus-attribute :
The autofocus attribute is a boolean attribute.
http://www.w3.org/TR/html5/infrastructure.html#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.
Conclusion:
The following are valid, equivalent and true:
<input type="text" autofocus />
<input type="text" autofocus="" />
<input type="text" autofocus="autofocus" />
<input type="text" autofocus="AuToFoCuS" />
The following are invalid:
<input type="text" autofocus="0" />
<input type="text" autofocus="1" />
<input type="text" autofocus="false" />
<input type="text" autofocus="true" />
The absence of the attribute is the only valid syntax for false:
<input type="text"/>
Recommendation
If you care about writing valid XHTML, use autofocus="autofocus", since <input autofocus> is invalid and other alternatives are less readable. Else, just use <input autofocus> as it is shorter.
No, it's enough to specify the attribute itself. It was that way also in HTML 4.
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.
Example:
<label><input type=checkbox checked name=cheese disabled> Cheese</label>
Related
How to ensure between 7 and 10 digits are entered using pattern attribute in HTML? I have following code:
<input type="number" name="Student" id="studID" required pattern="\d{7,10}" />
The number type of input elements does not support a pattern attribute:
See the MDN documentation in <input type="number">
In addition to the attributes commonly supported by all types, inputs of type number support these attributes:
Attribute Description
max The maximum value to accept for this input
min The minimum value to accept for this input
placeholder An example value to display inside the field when it's empty
readonly A Boolean attribute controlling whether or not the value is read-only
step A stepping interval to use when using up and down arrows to adjust the value, as well as for validation
<input type="text"> has the pattern attribute.
You could use the min and max attributes like so.
<input type="number" name="Student" id="studID" min="1000000" max="9999999999">
<input type="number" name="Student" id="studID" minlength="7" maxlength="10">
should solve the problem you're having
You can add pattern attribute like this:
<input type="number" name="Student" id="studID" required pattern="7-10" />
As Most, I am familiar with the readonly attribute for text input, But while reading code from other websites (a nasty habit of mine ) I saw more than one implementation for this attribute:
<input type="text" value="myvalue" class="class anotherclass" readonly >
and
<input type="text" value="myvalue" class="class anotherclass" readonly="readonly" >
and I have even seen
<input type="text" value="myvalue" class="class anotherclass" readonly="true" >
.. And I believe I saw even more, but can not recall the exact syntax now..
So, which one is the correct one that I should use?
HTML5 spec:
http://www.w3.org/TR/html5/forms.html#attr-input-readonly :
The readonly attribute is a boolean attribute
http://www.w3.org/TR/html5/infrastructure.html#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.
Conclusion:
The following are valid, equivalent and true:
<input type="text" readonly />
<input type="text" readonly="" />
<input type="text" readonly="readonly" />
<input type="text" readonly="ReAdOnLy" />
The following are invalid:
<input type="text" readonly="0" />
<input type="text" readonly="1" />
<input type="text" readonly="false" />
<input type="text" readonly="true" />
The absence of the attribute is the only valid syntax for false:
<input type="text"/>
Recommendation
If you care about writing valid XHTML, use readonly="readonly", since <input readonly> is invalid and other alternatives are less readable. Else, just use <input readonly> as it is shorter.
From w3:
readonly = "readonly" or "" (empty string) or empty -
Specifies that element represents a control whose value is not meant to be edited.
So basically it's the same.
is should be
<input type="text" value="myvalue" class="class anotherclass" readonly="readonly" />
The best practice is to use simply readonly. That makes it the most semantic and succinct.
Believe it or not,
readonly="false"
returns true;
To detect in JavaScript if an element is read-only, use this syntax:
element.readOnly
I'm using the HTML5 pattern attribute in an <input> to return a match for a specific string: 'felfogtam'
My current markup is:
<input type="text" class="input input-small" pattern="felfogtam">
It does work, but the input is still valid if the field is empty. How can I change the regular expression to not allow a blank field?
Add the required attribute
<input type="text" class="input input-small" pattern="felfogtam" required>
http://jsfiddle.net/bJU2D/
What is the difference between:
<input name="TextBox1" type="text" id="TextBox1" readonly="true" />
and:
<input name="TextBox1" type="text" id="TextBox1" readonly="readonly" />
When i set readonly to true it works somewhat different from readonly='readonly'. W3C standard says readonly should be 'readonly' & not 'true'. Why most of the browsers allow readonly='true' which has somewhat different functionality than readonly='readonly'?
Giving an element the attribute readonly will give that element the readonly status. It doesn't matter what value you put after it or if you put any value after it, it will still see it as readonly. Putting readonly="false" won't work.
Suggested is to use the W3C standard, which is readonly="readonly".
This is a property setting rather than a valued attribute
These property settings are values per see and don't need any assignments to them. When they are present, an element has this boolean property set to true, when they're absent they're false.
<input type="text" readonly />
It's actually browsers that are liberal toward value assignment to them. If you assign any value to them it will simply get ignored. Browsers will only see the presence of a particular property and ignore the value you're trying to assign to them.
This is of course good, because some frameworks don't have the ability to add such properties without providing their value along with them. Asp.net MVC Html helpers are one of them. jQuery used to be the same until version 1.6 where they added the concept of properties.
There are of course some implications that are related to XHTML as well, because attributes in XML need values in order to be well formed. But that's a different story. Hence browsers have to ignore value assignments.
Anyway. Never mind the value you're assigning to them as long as the name is correctly spelled so it will be detected by browsers. But for readability and maintainability it's better to assign meaningful values to them like:
readonly="true" <-- arguably best human readable
readonly="readonly"
as opposed to
readonly="johndoe"
readonly="01/01/2000"
that may confuse future developers maintaining your code and may interfere with future specification that may define more strict rules to such property settings.
readonly="true" is invalid HTML5, readonly="readonly" is valid.
HTML5 spec:
http://www.w3.org/TR/html5/forms.html#attr-input-readonly :
The readonly attribute is a boolean attribute
http://www.w3.org/TR/html5/infrastructure.html#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.
Conclusion:
The following are valid, equivalent and true:
<input type="text" readonly />
<input type="text" readonly="" />
<input type="text" readonly="readonly" />
<input type="text" readonly="ReAdOnLy" />
The following are invalid:
<input type="text" readonly="0" />
<input type="text" readonly="1" />
<input type="text" readonly="false" />
<input type="text" readonly="true" />
The absence of the attribute is the only valid syntax for false:
<input type="text"/>
Recommendation
If you care about writing valid XHTML, use readonly="readonly", since <input readonly> is invalid and other alternatives are less readable. Else, just use <input readonly> as it is shorter.
readonly="readonly" is xhtml syntax. In xhtml boolean attributes are written this way. In xhtml 'attribute minimization' (<input type="checkbox" checked>) isn't allowed, so this is the valid way to include boolean attributes in xhtml. See this page for more.information.
If your document type is xhtml transitional or strict and you want to validate it, use readonly="readonly otherwise readonly is sufficient.
I'm not sure how they're functionally different. My current batch of OS X browsers don't show any difference.
I would assume they are all functionally the same due to legacy HTML attribute handling. Back in the day, any flag (Boolean) attribute need only be present, sans value, eg
<input readonly>
<option selected>
When XHTML came along, this syntax wasn't valid and values were required. Whilst the W3 specified using the attribute name as the value, I'm guessing most browser vendors decided to simply check for attribute existence.
According to HTML standards, the use of
<input name="TextBox1" type="text" id="TextBox1" readonly/>
is enough to make the input element readonly. But, XHTML standard says that the usage listed above is invalid due to attribute minimization. You can refer to the links below:
https://www.w3.org/TR/xhtml1/diffs.html#h-4.5
http://www.w3schools.com/tags/att_input_readonly.asp
I think according to W3 spec, you're supposed to do
<input type="checkbox" checked="checked" />
And
selected="selected"
But, most browsers will accept it you just write "CHECKED" and don't give it a value. So, what if you do include the attribute, are there any values that would be (consistently) considered false?
There are no values that will cause the checkbox to be unchecked. If the checked attribute exists, the checkbox will be checked regardless of what value you set it to.
<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="unchecked" />
<input type="checkbox" checked="true" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="on" />
<input type="checkbox" checked="off" />
<input type="checkbox" checked="1" />
<input type="checkbox" checked="0" />
<input type="checkbox" checked="yes" />
<input type="checkbox" checked="no" />
<input type="checkbox" checked="y" />
<input type="checkbox" checked="n" />
Renders everything checked in all modern browsers (FF3.6, Chrome 10, IE8).
The checked and selected attributes are allowed only two values, which are a copy of the attribute name and (from HTML 5 onwards) an empty string. Giving any other value is an error.
If you don't want to set the attribute, then the entire attribute must be omitted.
Note that in HTML 4 you may omit everything except the value. HTML 5 changed this to omit everything except the name (which makes no practical difference).
Thus, the complete (aside from variations in cAsE) set of valid representations of the attribute are:
<input ... checked="checked"> <!-- All versions of HTML / XHTML -->
<input ... checked > <!-- Only HTML 4.01 and earlier -->
<input ... checked > <!-- Only HTML 5 and later -->
<input ... checked="" > <!-- Only HTML 5 and later -->
Documents served as text/html (HTML or XHTML) will be fed through a tag soup parser, and the presence of a checked attribute (with any value) will be treated as "This element should be checked". Thus, while invalid, checked="true", checked="yes", and checked="false" will all trigger the checked state.
I've not had any inclination to find out what error recovery mechanisms are in place for XML parsing mode should a different value be given to the attribute, but I would expect that the legacy of HTML and/or simple error recovery would treat it in the same way: If the attribute is there then the element is checked.
(And all the above applies equally to selected as it does to checked.)
No value is considered false, only the absence of the attribute. There are plenty of invalid values though, and some implementations might consider certain invalid values as false.
HTML5 spec
http://www.w3.org/TR/html5/forms.html#attr-input-checked :
The disabled content attribute is a boolean attribute.
http://www.w3.org/TR/html5/infrastructure.html#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.
Conclusion
The following are valid, equivalent and true:
<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="ChEcKeD" />
The following are invalid:
<input type="checkbox" checked="0" />
<input type="checkbox" checked="1" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="true" />
The absence of the attribute is the only valid syntax for false:
<input type="checkbox" />
Recommendation
If you care about writing valid XHTML, use checked="checked", since <input checked> is invalid and other alternatives are less readable. Else, just use <input checked> as it is shorter.
Actually, the HTML 4.01 spec says that these attributes do not require values. I haven't personally encountered a situation where providing a value rendered these controls as unselected.
Here are the respective links to the spec document for selected and checked.
Edit: Firebug renders the checkbox as checked regardless of any values I put in quotes for the checked attribute (including just typing "checked" with no values whatsoever), and IE 8's Developer Tools forces checked="checked". I'm not sure if any similar tools exist for other browsers that might alter the rendered state of a checkbox, however.
The empty string is false as a rule.
Apparently the empty string is not respected as empty in all browsers and the presence of the checked attribute is taken to mean checked. So the entire attribute must either be present or omitted.
checked attribute can be set in the following way in javascript.
(isOrdered stores a boolean value)
<input checked={isOrdered} type="checkbox"/> Ordered