Form Name ID and Label Tags
Just a quick one, but something that confuses me often.
<input name="input_name" id="input_identifier ....
name is what the POST request will see the field called
id is what the label tag will use to figure out which field it belongs to.
As worth noting that an element’s ID should be unique. Be careful with radio buttons groups, where the individual elements should never share the same ID but may share the same name. Also, there is no CSS selector for the name attribute, whilst there is for ID.
My Input
works just as well as:
MyInput
Paul, thanks for your additional comments. Now I’m doing so much more web stuff its a bit of a crash course for me in lots of ways – HTML elements and CSS styling are the main ones that I’m having to get a lot better at. Your points are very useful :)
There is a way to select an input element by attributes such as “name” in CSS2. Here’s some tasteful example CSS2 code:
input[name=lorna] {background-color: pink;}
More details here:
http://www.w3.org/TR/REC-CSS2/selector.html#q10
I was pretty much going to say what Paul said about grouping radio buttons and a label needing a unique identifier to attach itself to, hence the id attribute.
Also, browsers should use the text enclosed by the label element to increase the clickable area for the associated form input. Try it out on your comments form. You’ll see that clicking where it says ‘name’ doesn’t bring focus to the name input – the content of the for attribute doesn’t match the input id. However, click where it says ‘Remember’ and the checkbox’s state toggles. Click ‘Message’ and the textarea gains focus.
I sometimes wrap a form input in the label element as well for explicit labeling, mainly because I find it easier to style.
IE7 finally brings support for CSS2 attribute selectors to Internet Explorer – yay! – but I find I use it very little.
Geoff, good point, thanks for commenting and including the colour pink in your example :)
dotjay – I didn’t know that about the label fields but actually that’s really quite cool and I will remember it for the future. At work we’ve moved to smarty which is great because it isn’t me that styles the output … now the designers can wrap the tags however they wanted and everyone is happy!