Dominic Burford - Professional Profile

Quote:

I’m more akin to a librarian, scientist, artist, and carpenter.

<%--original button--%>
<asp:Button ID="login" runat="server" OnClick="Go" /> 
<%--add your fake button--%>
<input type="button" id="visibleLoginButton" value="Login" onclick="DisableButton(this)">

<script type="text/javascript">
        function DisableButton(b) {
            b.disabled = true;
            b.value = 'Submitting';
            b.onclick = document.getElementById('login').click();
        }
</script>

this.login.Attributes.Add("style", "display: none;");

Quote:

Clean code is a code that is written by someone who cares.

Introduction

As a design standard where I work we allow users to click on the label of a control which sets the focus to the control associated with the label. For example if there is a label with an associated textbox, then by clicking on the label, this will set the focus to the textbox in the same way as clicking directly on the textbox itself. We use this technique for all input controls such as dropdowns, checkboxes etc. This is a very simple behaviour but makes your web forms just that little bit easier to use.

Setting focus to an associated control

There are two ways you can achieve this behaviour. You can either use an HTML label control or an ASP.NET label control. Both can be used to achieve this behaviour.

Using an HTML label control

Using an HTML label you need to specify the for keyword when declaring your label control.

<label for="<%= this.textbox.ClientID %>">I am a label</label>

Use the for keyword to specify the associated control i.e. the input control that is associated with the label. In the example code here I have associated the label with a textbox control. Therefore if the user clicks on the label the textbox gets the focus.

Using an ASP.NET label control

You can achieve exactly the same behaviour using an ASP.NET label. You need to specify the AssociatedControlID keyword when declaring your label control.

<asp:Label ID="textboxLabel" runat="server" AssociatedControlID="textbox"></asp:Label>

Use the AssociatedControlID keyword to specify the associated control i.e. the input control that is associated with the label. In the example code here I have associated the label with same textbox control as in the previous example.

Summary

This is a very simple tip but makes your forms that little bit more usable for an end-user.