I have a custom styled drop-down selection box created with CSS/Javascript, which is meant to imitate a <select> element. The box is a <div> with an internal list composed of <li> elements, which mirror the <option> elements of a standard select box.
Now, a standard select <option> element has two important components: the internal text node, which is what is actually displayed onscreen in the drop-down, and a value attribute which is the string that indicates the value of the selection (for use with form submissions or Javascript).
With my custom box, the text node inside the <li> element mirrors the internal text node in an <option> element. But how should I mirror the "value" attribute? According to w3schools (not the best resource, I know), the LI element has a "value" attribute which can be used, but it is deprecated in favor of CSS styling. But what CSS attribute can be used to indicate the "value" of the List Element? Or is there some better way to associate a value with an LI element?
Any attribute starting with "data-" is valid html nowadays. So you could do something like:
<ul>
<li data-value="1">Option #1</li>
<li data-value="754">Option #2</li>
</ul>
That way you could easily access your value for each option at a later stage.
You should use HTML5 data-* attributes any time you need to store arbitrary data on an element:
<li data-value="something">Some text</li>
Side note:
The box is a <div> with an internal list composed of <li> elements
I hope you have a ul (or ol, or menu) element as a parent of those li elements!
"But what CSS attribute can be use" No CSS-attribute, as there are only HTML-attributes.
To store any data on any element you may use the data-*-attributes, for example <li data-value="some value">.
According to HTML5 standart you should use data-* attributes
<li data-value="value">Text here</li>
Related
Is there any difference between identifying an HTML element by class/id or by a custom attribute?
I mean, for example, if I have a menu and I want to change the color of the current (active) li element, I currently use this:
<style>
li[active]{color:red}
</style>
<ul>
<li active>...</li>
<li>...</li>
</ul>
But the most common usage is:
<style>
li.active{color:red}
</style>
<ul>
<li class="active">...</li>
<li>...</li>
</ul>
So what is the difference between them? I mean, they have the same result, but why don't people use the first method I wrote? That is much more simple and results in cleaner HTML source code.
Just for those who don't get the question... The first snippet I wrote is identifying an element BY HTML5 ATTRIBUTE. The second snippet is identifying an element BY CLASS.
So the question again: What's the difference between identifying an HTML element by HTML5 ATTRIBUTE and CLASS OR ID NAME?
Your active attribute example is invalid HTML, although it will usually (always?) work in practice because CSS is a separate spec that doesn't care about HTML's rules, and browsers try to do "what you mean" when it comes to invalid HTML.
Custom attributes should start with the data- prefix per the spec. These data attributes are usually used for associating an element with some extra data for use with JavaScript, although it's also possible to target them with CSS.
Technically, you could do something like
<li data-active="yeppers">
And then target it with CSS:
li[data-active='yeppers'] { ... }
However, that would be highly unusual and annoying for most anyone who had to look at your code.
Semantically, "active" isn't really data, and it's not necessarily unique to one element, so assigning class="active" makes the most sense.
In unordered list type attributes accepts disc,square, circle etc as its value https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul. Today I came across a code where type="A" was given in the tag and it was working fine. I want to Its shows the output like ordered list only.I know type has been deprecated and its wrong using ordered list functionality within ul tag but can anyone tell me why this is happening? If that is the case, why we use ordered list then
<ul type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Output:
A.Coffee
B.Tea
C.Milk
The real difference between ul and ol elements is that ul is rendered as a bulleted list by default, whereas ol is rendered as a numbered list by default. This is what really happens in browsers. There is no reason to expect search engines to make any distinction between them (if they care about list markup at all). In specifications, various descriptions are given, but such “semantics” don’t affect software.
On a closer look, there’s the difference that different element nodes are constructed, and there are differences between browsers in dealing with type attribute values that are not allowed by the specifications.
Using just <ul type="A"> is unnecessarily risky, due to the browser differences. A safer way is to use <ul type="A" style="list-style-type: upper-alpha">. (Omit type="A" if compliance to specifications is more important than taking into account the possibility of non-CSS rendering.)
Not all browsers show this behaviour (see e.g. http://browsershots.org/).
This could be called a bug in the browsers that display the <ul> as a <ol>, but it can be argued either way: when getting an invalid page (mismatch between tag and attribute), should the tag be trusted and the attribute be ignored or vice-versa?
I normally style my forms in the format
<label for="CompanyNameTextBox">
<span>Company</span>
<input name="CompanyNameTextBox" type="text" id="CompanyNameTextBox" />
</label>
This way I can style the CSS like so:
.input[type=text] span
{
display: inline-block;
width: 200px;
}
and I get a nice side by side arrangement with my labels to the left of the form elements. This works for all elements I should add.
Now, I have a field: Credit Card Expiry Date.
This is special, I have two select lists in a single label:
<label>
<span>Expiry Date</span>
<select name="ExpiryDateMonthDropDownList" id="ExpiryDateMonthDropDownList">
...
</select>
<select name="ExpiryDateYearDropDownList" id="ExpiryDateYearDropDownList">
...
</select>
</label>
If I try to select the latter (Year) it defaults back to selecting the first (Month), even though I haven't specified a for attribute on the label.
So the question would be, what can I do? I can't work out if I'm doing forms wrong (I shouldn't in fact put the input inside the label) or if I have to do some silly workaround like stick the second select inside it's own label.
MDN on <label> says:
The HTML Element represents a caption for an item in a user
interface. It can be associated with a control either by using the for
attribute, or by placing the control element inside the label element.
Such a control is called the labeled control of the label element.
and
No labelable elements other than the labeled control are allowed.
So if you put an control element inside a label it is the same as writing a label for this element, so you see where the problem appears when you place two input fields inside a label.
You can just place the second control outside, or both outside the label and make a for for the first input element, or yes you can make two separate labels for the two input fields, any of this combinations should work when you specify the forattribute.
The specs for HTML5 "w3.org: 4.10.6 The label element" say:
If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control.
For HTML 4 "w3.org: 17.9.1 The LABEL element it's even more strict:
The label element may be used to attach information to controls. Each label element is associated with exactly one form control.
So you may have to wrap both in a container to get the same visual output:
<div class="multiple_inputs">
<label>
<span>Expiry Date</span>
<select name="ExpiryDateMonthDropDownList"></select>
</label>
<select name="ExpiryDateYearDropDownList"></select>
</div>
Of course you can add another <label> to the second field as well.
As already said in Should I put input tags inside a label tag? this is perfectly valid according to w3 but may produce problems with WCAG and some browser implementations.
In this case, you have two input elements inside just one label, which is not good, as there should be one label for each input element. So my proposal is to add another label and just put one element inside of each.
Perhaps if form elements are in label, it selects first element by default. But you can specify second field as for attribute (may be browser-specific, works in firefox 22).
A simple question: why should we add the id into our HTML tags if they work perfectly well without them? I know that one of their uses is being able to navigate though the page via hashtags (#), but is there any other use for them?
Uses of id attributes in HTML
As a target for a fragment identifier on a URL.
As a target on form controls for the for attribute on <label> and <output> elements.
As a target on <form> elements for the form attribute on form associated elements.
As a target for element references via the microdata itemref attribute.
As a target for element references via some ARIA attributes including aria-describedby, aria-labelledby and 4 others.
As a target on <th> elements for the headers attribute on <td> and <th> elements.
As a target on <menu> elements for the contextmenu attribute.
As a target on <datalist> elements for the list attribute on <input> elements.
As part of a hash-name reference to <map> elements for the usemap attribute on the <img> and <object> elements.
As an identifier of an element in a CSS selector
As an identifier of an element for JavaScript processing
They're most often used to uniquely identify elements for styling (CSS) and scripting (JavaScript et al) purposes.
But if you're asking about HTML and only HTML, then one example where declarative IDs are useful is associating a <label> with its <input>, <button> or <textarea> control via its for attribute:
<label for="ex">Example field:</label>
<input type="text" name="ex" id="ex">
Without assigning this attribute, activating the label does nothing, but when you pair both elements together using for and id, activating the label causes its control to gain focus.
The other way to associate a form label with its control is to contain it within the label:
<label>
Example field:
<input type="text" name="ex">
</label>
But this doesn't always suit the structure of a form or a page, so an ID reference is offered as an alternative.
Other circumstances where an id attribute serves a function are covered extensively in Alohci's answer.
You can use IDs to acces your divs from javascript, CSS and jquery. If you don't use IDs it will be very difficult for you to interact with your HTML page from JS.
AFAIK, they are used to uniquely refer to a tag.And makes it easier for you to refer to the tag.
IDs are used for accessing your elements in CSS and JavaScript. Strictly speaking IDs should uniquely identify an element. You can also use class attributes to identify groups of elements.
The id attribute provides a unique identifier for an element within the document. It may be used by an a element to create a hyperlink to this particular element.
This identifier may also be used in CSS code as a hook that can be used for styling purposes, or by JavaScript code (via the Document Object Model, or DOM) to make changes or add behavior to the element by referencing its unique id.
see http://reference.sitepoint.com/html/core-attributes/id
for more info on class see here: http://reference.sitepoint.com/html/core-attributes/class
it is there to help you identify your element in java-script code.the getElementByID function in java-script give the handle of an element with specific ID for you.like this.
var someElement = document.getelementById("someID");
// do whatever with someElement;
I myself also prefer class for styling through CSS but sometimes you need an element to be unique. For accessibility reasons you use id to input elements to "connect" its label to it by using for attribute. And for Javascript it's much simpler to select an element if it has got id attribute.
The main reason I use ids for my HTML elements is the fact that their selection is faster, in Javascript with getElementById and in CSS as well, using the #id class.
Of course, I'm not saying this is always a good idea, especially in CSS, where having classes based on ids can cause a lot of redundancy, it's just one of the reasons
First, only add ID when you will need to use them. In most cases id is used to do other things like:
A reference for scripts,Selecting elements to apply scripts to,
A style sheet selector, selecting elements for styling
Named anchors for linking to, which is what u called page navigation
So simply because in most cases you will want to do something to or with your content in any tag, its good to put an identifier, that is the id attribute.
I have the following HTML:
<ul class='dropSelect'>
<li data-value="one">
<span>Menu1</span>
</li>
<li data-value="two">
<span>Menu2</span>
</li>
<li data-value="three">
<span>Menu3</span>
</li>
</ul>
My question is: is it better practice to place the data-value attribute on the span next to the actual menu item text or is it just as good to place on the parent li element as I have done? This attribute will receive data from a web service and I'm using some js to grab the value of this attribute and placing it inside of another element on the page.
SOF warned me upon posting this question that it might be too subjective ... and it might be ... but my concern is to understand what, if any, impact my placement of this attribute may have on UI engineering, javascript DOM manipulation, accessibility, etc.
Broadly speaking, I suggest storing data on the element that most closely maps to the data's 'parent' or 'owner'. It's all about what conveys the most meaning.
For example, if you are representing a list of 'people' in your html thus
<ul>
<li class="person">Tim Bresnan</li>
<li class="person">Joe Root</li>
</ul>
and you wish to associate a date of birth without displaying it, put it on the li items as they represent the person.
$('.person').data('dob');
If however your html representation of a person is more complex, say
<ul>
<li class="person">
<div class="name">Tim Bresnan</div>
<div class="dob">28th Feb 1985</div>
</li>
<li class="person">
<div class="name">Joe Root</div>
<div class="dob">30th Dec 1990</div>
</li>
</ul>
you might wish to include the ISO8601 datetime representation as data on the dob class elements.
$('.person .dob').data('dob');
Although html5 data attributes are subjective, and can be used anytime/anywhere, I'm assuming you are looking these elements up by them in your situation. In your situation I'd put them in the same place you did for a couple of reasons.
This is the top level (child), so it's very easy to grab them all by the data attribute.
$('li[data-value]')
At some point you might have much more inside each <li>, right now it might only be the <span> but by having the list-item hold the data-value you can easily get other DOM elements inside of it. If you had it inside of the span you'd have to go UP a level to the list-item, then .find() whatever element you want.
If your span held data-value:
$('[data-value="whatever"]').closest('li').find('.someOtherThing');
Instead now you don't have to do that pointless look-up for the parent <li>!
$('[data-value="whatever"]').find('.someOtherThing');
I would say to put the data-values in the span within the listing. I think it's best to put the data-attribute closest to the string it has an effect on, in this case the span.
On another note, this piece of jQuery works fine:
$(document).ready( function() {
$("li").click(function(){
var txt = $(this).text();
$("#mydiv").text(txt);
});
});
With this, I've tested in jsFiddle (http://jsfiddle.net/YqePE/) that clicking on a li, can return it's text value, and so it would also return any data-attribute you have in that li.
BUT, if by some sort of weird CSS makeup, it can be possible this would generate an unwelcome outcome, where as you think you don't click a certain LI, the browser thinks you do. To prevent this, you would want to make the span holding the data-attribute.
From what it seems like you're trying to do. You could use jQuery's .index(). (Yes, I know it wasn't tagged jQuery)
$('ul.dropSelect > li').each(function(){
var i = $(this).index();
});
It is not necessary to use the data attribute for this information.
Try to use pseudo class selectors of CSS or jQuery to bind the specif item:
CSS:
.dropSelect li:nth-child(1) {
// First <li>
}
Or jQuery:
// Second <li>
$('.dropSelect li').eq(1)
DEMO: http://jsfiddle.net/wYpK6/