ASP 101 - Active Server Pages 101 - Web05
The Place ASP Developers Go!

Windows Technology Windows Technology
15 Seconds
ASP 101
ASP Wire
VB Forums
VB Wire
internet.commerce internet.commerce
Partners & Affiliates
ASP 101 is an site
ASP 101 is an site
Internet News
Small Business
Personal Technology

Corporate Info
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash

 Top ASP 101 Stories Top ASP 101 Stories
Connections, Commands, And Procedures
What is ASP?
VBScript Classes: Part 1 of N

Utilize browser capabilities
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates

Quick Tips

DefaultButton and DefaultFocus Properties

ASP.NET 1.x made great strides in simplifying form management and processing, but it did miss a couple points when it came to filling forms out using the keyboard. Fortunately these oversights were quickly noticed by users and Microsoft responded in ASP.NET 2.0 by adding the DefaultButton and DefaultFocus properties to the HtmlForm object.

The first issue dealt with submitting forms via the "Enter" key. Users had long ago come to expect that a form could be submitted by simply pressing the "Enter" key once they were done entering their data. This often didn't work in ASP.NET 1.x applications. Users were usually left looking at the form wondering what was taking the server so long to respond. If you were lucky, the user would eventually realize the form data hadn't been sent and would click the submit button... the less lucky ended up losing the form data and sometimes even the user.

The new DefaultButton property addresses this issue by telling the form which button control should post back to the server if the user doesn't select a different one prior to pressing the "Enter" key. This way the user can submit the form via the keyboard and still get the appropriate button handler to fire.

The other issue related to where the cursor was initially displayed on web pages that included a form. Generally it wasn't in the form where you might expect it to be. This meant that you couldn't just start typing if you wanted to fill out the form. You first had to either click on or tab into one of the form fields. It may not have been the biggest of problems, but it was an unnecessary nuisance none the less.

The DefaultFocus property addresses this issue by simply letting you specify which control in the form should receive the focus (and therefore the cursor) when the page loads. This allows a user to start typing directly into the first form field as soon as the page is done loading.

Both properties are set at the form level and couldn't be simpler to use. Simply set the value of each to the name of the corresponding control contained in your form. The syntax looks something like this:

<form id="myForm" runat="server"
    DefaultButton = "btnSubmit"
    DefaultFocus  = "txtFirstName"

For more information on these two properties, check out their documentation pages on MSDN:

Update: Using DefaultButton and DefaultFocus with MasterPages

One of our users quickly wrote in saying that he was having trouble using this tip on his site which uses MasterPages. You see, when using MasterPages, only the master page contains the actual form. This means that you can't simply add the DefaultButton or DefaultFocus property to the form tag itself like we did above. If you did, the setting would be applied to every page that used the same master page. You need a way to set the properties on a page by page basis.

Luckily it's not that hard. Instead of setting the properties on the form declaratively, we simply set them programmatically. You'd expect it to be as simple as something like this:

    myForm.DefaultButton = btnSubmit
    myForm.DefaultFocus = txtFirstName

Unfortunately the fact that we're using MasterPages once again makes this a little tougher. I won't get into the technical details, but the concept is sort of like needing to specify a full path instead of just a file name, only in this case we're talking about controls instead of files. I really haven't used MasterPages that much, so it took me a couple tries to get the syntax right, but my first attempt that worked looked something like this:

    CType(Master.FindControl("myForm"), HtmlForm).DefaultButton = btnSubmit.UniqueID
    CType(Master.FindControl("myForm"), HtmlForm).DefaultFocus = txtFirstName.ClientID

Thinking it had to be simpler then that, it then dawned on me you could just use Page.Form like this:

    Page.Form.DefaultButton = btnSubmit.UniqueID
    Page.Form.DefaultFocus = txtFirstName.ClientID

Once you know how, using the DefaultButton and DefaultFocus properties on a page that uses MasterPages is just as easy as using them on a page that doesn't. A few simple lines of code and -- voilà!

Previous      Show All Tips      Next

If you have a tip you would like to submit, please send it to:

Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback
The Network for Technology Professionals



Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers