Something I came across today that I hadn’t really thought through before…

We should all be using the <label> element to create a label for an input element (this is not only good practise it is in fact mandated by the e-govt NZ Web Guidelines that a lot of our clients are covered by). It’s good for screen-readers, allows you to click labels to give focus to inputs and is inline with the idea that your mark-up should reflect the intent of the element.

But be careful you don’t write something like this, 

<label runat="server" for="username">Username:</label> 
<asp:TextBox ID="username" runat="server"></asp:TextBox>

This will get incorrectly rendered as (depending on the container control),

<label for="username">Username:</label> 
<input name="ctl00$ContentPlaceHolder1$username" type="text" 
	id="ctl00_ContentPlaceHolder1_username" />

Note that the for attribute no longer matches the (ASP.NET mangled) id of the input element.

What you should do is use ASP.NET’s label server control and the AssociatedControlID attribute.

<asp:label runat="server" AssociatedControlID="username">Username:</asp:label> 
<asp:TextBox ID="username" runat="server"></asp:TextBox>

Which correctly (if you can ignore the ugly names!) renders as, 

<label for="ctl00_ContentPlaceHolder1_username">Username:</label> 
<input name="ctl00$ContentPlaceHolder1$username" 
	type="text" id="ctl00_ContentPlaceHolder1_username" />