Seems that a new HTML tag pop-ups every once in a while that I wasn’t aware of.  Today it’s the <label> tag.

So what is the label tag for? Using the label allows the user to click on the text associated with a form control instead of having to click on the radio button, check box, select box, etc.

Granted, this isn’t likely to be hugely useful to you, but I know I’ve often found it convenient to simply click on text next to a check box (or similar form field) when I’m in a hurry, hence it increases the usability of your page.

However, if an accessible web site for the visually impaired, using the label tag helps those who visit your site with a screen reader to associate a fields label with the field that it belongs to.

How do you use it?  Here is how:

<label for="radio1">This Radio Button 1 has a label associated with it.</label>

<input type="radio" value="Selected" name="Radio" id="radio1">

One thing I find convenient about the label is that I can now create a CSS style for the HTML label tag and know that all the field labels will be formatted the same. I no longer have to create a <span> or <div> tag with a special CSS class for field labels.

However, in ASP.NET, I could envision the label not working as it’s supposed to in many cases because it’s often hard to predict the name of the field controls.  For example, if I have a textbox with an ID of “txtFirstName” which is nested in a User Control, which is nested in a Page, which is nested in a Master Page, ASP.NET will rename the control and it’s ID to something like “ctl001 MyMasterPage MyPage MyUserControl txtFirstName.”

With that in-mind, the functionality of the label control might be limited in ASP.NET applications, but at least it provides a new tag to bind CSS to!

Update - 01/06/2006

Those guys at Microsoft are no dummies... they made sure the ASP.NET 2.0 Framework produces standards compliant and accessible code.  To assure that your ASP.NET 2.0 form fields are properly labeled, you must use the AssociatedId property for the ASP.NET Label control in order to make the .NET Framework spew the correct HTML:

    <table>
    <tr>
        <td><asp:Label AssociatedControlID="txtFirstName"
          runat="server">First Name:</asp:Label></td>
        <td><asp:TextBox ID="txtFirstName" runat="server" /></td>
    </tr>
    <tr>
        <td><asp:Label AssociatedControlID="txtLastName"
          runat="server">Last Name:</asp:Label></td>
        <td><asp:TextBox ID="txtLastName" runat="server" /></td>
    </tr>
    </table>

With the release of the final version of Visual Studio Team Systems rapidly approaching (January of 2006), many of you are probably wondering if it’s time to bail on using NUnit for your ASP.NET 2.0 projects in favor of the VSTS unit testing tools.  Well, worry no longer as Jim Newkirk has created a NUnit Add-On that converts NUnit Test Code into tests compatible with Visual Studio 2005 Team System.

The converter is a free download available on the gotdotnet site:

NUnit Add-Ons: Workspace Home

The following is Fritz Onion’s posting on Complex data binding expressions in ASP.NET, converted into VB.NET:

I often find when using templated data-bound controls (in either ASP.NET 1.1 or 2.0) that my expressions become rather difficult to understand because of the need to fit all of your logic into a single expression. For example, I have seen databound expressions that look something like:

<asp:TemplateField HeaderText="SomeColumn">
  <ItemTemplate>
    <%# ((bool)Eval("foo")) ? Eval("bar") : (((bool)Eval("quux")) ? Eval("a") : Eval("b")) %>
  </ItemTemplate>
</asp:TemplateField>

Which is even worse in 1.1 because each Eval must be replaced with DataBinder.Eval(Container.DataItem, "xx"). There are also occasions where you just can't compress all the logic you need to into a single expression. An alternative, which I find myself using quite a bit, even when developing in 2.0, is to write a single method in your code behind class to generate the desired string. Have it take an object reference (which will be the bound row) and take as many lines as you like to construct the string to be generated in the template. Here's a method that returns the same string as the overly-complex expression above:

Protected Function GenerateFooString(ByVal dataItem As Object) As String
    Dim foo As Boolean = CType(DataBinder.Eval(dataItem, "foo"),Boolean)
    Dim quux As Boolean = CType(DataBinder.Eval(dataItem, "quux"),Boolean)
    Dim ret As String = string.Empty
    If foo Then
        ret = CType(DataBinder.Eval(dataItem, "bar"),String)
    ElseIf quux Then
        ret = CType(DataBinder.Eval(dataItem, "a"),String)
    Else
        ret = CType(DataBinder.Eval(dataItem, "b"),String)
    End If
    Return ret
End Function

And the simplified template now looks like:

 <asp:TemplateField HeaderText="SomeColumn">
  <ItemTemplate>
    <%# GenerateFooString(Container.DataItem) %>
  </ItemTemplate>
</asp:TemplateField>

Once again, this is not my code or idea; it all belongs to Fritz Onion!

I haven’t quite figured-out what this plugin does, but it sounds like something I should use since I’m trying to work with standards compliant CSS files in my latest web apps:

CSS Properties Window Plugin

After dabbling with XHTML and extensive CSS a few months ago, I finally ‘saw the light’ as to why some web designers make such extensive use of CSS and DIV tags over traditional HTML and tables.  However, for as many cool things you can do with CSS and DIV tags, there are drawbacks… like trying to make a simple 2 or 3 column web page ;-S

On the surface, it seems like an easy task to create a multi-column CSS layout, but the problem sets-in when you try to view your site in different browsers.  At the moment, it seems like no two browsers will display content the same even though many of them are trying to adhere to the W3C’s standards. As a result, most of the multi-column designs I’ve seen have all sorts of “CSS hacks” to fudge the layout in various browsers.

Anyway, to aid in creating a multi-column CSS design, give this template generator a try:

CSS Source Ordered Variable Border 1-3 Columned Page Maker

Using the generator is a little easier than trying to reverse engineer someone else’s design that doesn’t quite fit what you want to do.

Seems that most programmers are not good designers, and most designers are not good programmers.  However, Microsoft is making it easier for programmers to not worry so much about design by providing a set of new templates for VisualStudio.NET 2005.

The interesting part is that these templates are not only pretty nice looking, some of them conform to the XHTML 1.1 Strict standard; that’s something you couldn’t even dream of doing with VisualStudio.NET 2003!

In addition to being standards compliant, these templates make use of Master Pages, Themes, and Skins, so they should serve as good references on how to properly use these new features in VS.NET 2005.

MSDN: Design Templates