Showing posts with label accessibility. Show all posts
Showing posts with label accessibility. Show all posts

Setting a default button so your users can press enter to submit your form

Posted on: Thursday, 20 August 2009 20:03

You might have noticed that when you press enter to submit a form in your asp.net page it just refreshes the page instead of submitting as you would expect.

The reason behind this is that asp.net web forms uses the <form> html tag to power the whole postback mechanism. This means that the default behaviour of submitting the form is still occurring but as far as asp.net is concerned you have just submitted its postback form with no commands so it just refreshes.

DefaultButton property

Anyway enough of the back story. The way around this is to set the DefaultButton property. The DefaultButton property was added to the HtmlForm and Panel classes in asp.net 2.0.

You can set this programmatically:

Panel1.DefaultButton = Button1.UniqueID;

or via the code markup:

<asp:Panel ID="Panel1" runat="server" DefaultButton="Button1">
</asp:Panel>

Per panel

The best use of the DefaultButton property is at the Panel level. The asp.net webforms postback model defines a single html form that all elements of the page are contained in.

If you have for example a login button and a search box in your masterpage, a feedback form in the content area then you have several logical forms contained behind the scenes in a single html form tag. Your users will expect to press enter in the search box and trigger a search. They dont want to see your feedback form validators kicking up a fuss.

By putting each logical form inside an you can set the default button to improve the user experience.

At the form level

As I have already hinted you can also do this at the page level by setting the DefaultButton on the behind-the-scenes page level form tag. As you will already see this is not a good idea for serious projects but you may want to set it in certain circumstances.

If you are in a content page of a masterpage then you will need to do it in the code behind:

this.Form.DefaultButton = this.Button1.UniqueID;

Accessibility

As an added bonus you are also improving the experience of visually impaired or otherwise disabled visitors. By defining the default button you are helping the screen reader software to have a fighting chance at understanding your asp.net page.

Gotcha - Buttons and ImageButtons only (not LinkButtons)

You can't set a <asp:LinkButton> as your DefaultButton. Technically you are supposed to be able use any control which implements IButtonControl but you cannot use the LinkButton. I think this is probably something to do with the fact that LinkButton is a javascript postback while the other buttons render out to proper form elements.

Further Reading

Rendering the correct label tag in your forms

Posted on: Monday, 27 July 2009 18:39

You should be using combinations of <asp:Label> tags and input tags such as <asp:TextBox> in your forms.

The <asp:Label> tag is one of several controls that will render different html depending on the way you configure it. Its default is to turn into a <span> tag but in the scenario above the correct tag would be a <label> with a for="" attribute.

How do you do this? Just add the AssociatedControlID attribute to your control.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Label AssociatedControlID Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <h1>Label AssociatedControlID Example</h1>
        <p>Load this page into a browser and view source to see the different html markup.</p>
        <h2>Label tag without an association</h2>
        <asp:Label ID="Label1" runat="server" AssociatedControlID="TextBox1" Text="Label" /><br />
        <asp:TextBox ID="TextBox1" runat="server" />
        <h2>Label tag with an association</h2>
        <asp:Label ID="Label2" runat="server" AssociatedControlID="TextBox2" Text="Label" /><br />
        <asp:TextBox ID="TextBox2" runat="server" />
    </form>
</body>
</html>

The benefits of this technique are two-fold. Firstly by using semantic mark-up you are staying true to the intentions of web standards. Secondly you are enhancing accessibility by giving screen readers and other devices a much better chance of matching the label with the input control.

If it isn't already - this should become a standard practice in your form development technique.

Asp.net v1.1 and older

This feature is not supported in asp.net 1.1 and older. To be a good net citizen in those versions of .net you will have to manually create a label tag and associate the for tag using inline commands such as:

<label for="<%=TextBox1.ClientID %>">Label</label>
<asp:TextBox id="TextBox1" runat="server" />
Subscribe to: Posts ( Atom )