Top 5 Mistakes in Designing an ASP.NET Web Form


Having a good user interface design is what separates the best web sites from the rest. Anyone can build a functionally sound web form. Building a web form that allows users to quickly and efficiently enter their data and move on is another story. Below are 5 common mistakes that often occur in ASP.NET web form development, as well as some general rules to follow in your web form design.

1. Incorrect Field/Label Alignment

A form usually consists of labels and input fields with a submit button. Probably the most common field/label alignment I see in use is left-aligned labels:

the most common field/label alignment
Figure 1

The problem with this alignment, as you can see, is that when a really long label is necessary, the input fields end up being extremely far away from the labels they are associated with. This may not seem like a big deal in the example above, but get a lot of fields on a really long form and it quickly becomes difficult for a user to determine which label goes with which input.

Another field/label alignment I often see is the use of top-aligned labels:

top-aligned labels
Figure 2

This solves the problem of the really long label causing a disassociation between label and input, but it presents another problem: a really long form. This alignment is fine for short forms with just a few fields, but for forms with a lot of fields, using this layout can cause your form to get long really quick.

My suggestion when creating web forms is to use right-aligned labels:

use right-aligned labels
Figure 3

This solves both of the problems we saw with the previous two layouts. The right-alignment allows for a clear association between labels and inputs while helping to keep your form short.

2. Confusing Form Submission

Notice in all of the examples above that the input fields are vertically aligned, along with the submit button. This is the correct alignment. I often see submit buttons placed at the very left of the form or at the very right, sometimes even in the center of the page, but the best placement of the submit button is in alignment with the rest of the input fields. This allows users to focus their attention on the one straight vertical line of inputs instead of their eyes jumping around the screen.

 one straight vertical line of inputs
Figure 4

In addition to correct button alignment, it is also best to help the user differentiate between the primary action on the page and the secondary action. You have several different options for this:

  • Leave off the secondary action - this is my preferred method of handling submit buttons. In most cases, the secondary action on a form is a simple cancel button, which takes the user back to the previous page. If it's possible for the user to get back to the previous page in another way, either through the user of breadcrumbs or by closing out a modal popup window, I generally leave the cancel button off the form.
  • Use different styles or colors of buttons - if having a secondary action on the form is absolutely necessary, use different colors and/or styles of buttons to distinguish between the primary and secondary buttons.

    use different colors and/or styles of buttons
    Figure 5

  • Delete buttons should be different too - destructive actions, such as a "Delete" button, should be styled differently than both the primary or secondary buttons and should always be used with a confirmation popup message.

3. Required Field Confusion

Oftentimes, developers don't put much thought into marking required fields. I've often seen forms that have no indication of what fields are required until the user clicks the Submit button and the screen turns red with error messages. Other times, the screen is red when first opened because the majority of the fields on the form are required. Keeping in mind that our goal is to get users to quickly and efficiently move through the web form, the following rules help to minimize the initial markup on the screen while still providing the user with the necessary information to correctly complete the form the first time.

  • Don't leave the user guessing - mark the required or optional fields when the page first loads. Mark whichever type there are fewer of. If most fields are required and few are optional, mark the optional fields. If most are optional and few are required, mark the required fields. A simple asterisk (*) next to the label as well as a message at the top of the form is usually sufficient to mark required fields ("* indicates a required field"). When marking optional fields, put the word "optional" in parentheses next to the label.
  • If all fields are required, don't mark each field individually. Simply put a message at the top of the form that says "All fields required".

4. Vague Format Requirements

Again, with the goal of having users quickly and efficiently fill out a form, it is essential that we put some thought into input fields that require a certain format. One mistake I frequently see on web forms is relying on a Regular Expression Validator control to inform users when their input is not in a correct format. While Regular Expression Validators are nice and should definitely be used to prevent errors on the backend, it is also helpful to provide users with the knowledge they need to correctly fill out the application on the first try. This can be done in several ways:

  • Limit the user's input - this is my preferred method of handling format requirements. There are so many ASP.NET Ajax-enabled controls out there that help developers with this kind of functionality that there isn't really an excuse to not use them. For things such as phone numbers or zip codes, use these controls to limit the user to only allowing data to be input in the correct format. In the examples below, the textbox controls would be Ajax-enabled to only allow numbers to be input.

    the textbox controls would be Ajax-enabled to only allow numbers to be input
    Figure 6

  • If you can't limit the user's input using Ajax-enabled controls, then you should make your control as flexible as possible. For instance, when asking for a phone number, you should accept phone numbers in as many formats as possible and deal with all of the different formats on the back end:

    • 123-456-7890
    • 123.456.7890
    • 123 456 7890

    Also, for fields requiring a specific format, you should always provide an example of a format that will work.

5. Over Reliance on Icons

Icons can be very helpful in a web form and can help dress up the screen, but one common mistake I see in web forms is relying too heavily on icons. While some icons are fairly well known across the web (e.g. a red X usually means delete), using icons only (and no text) for actions is generally a bad idea. A lot of times I will see web forms with icons used as action buttons where the action is only described in the tooltip when the user hovers over the icon. Again, keeping in mind the goal of allowing users to quickly complete our form, its best just to take the guessing out of the equation and always display words along with your icons. This prevents the user from having to take the time to hover each icon to find the desired action.


A good user interface can go a long way to improve the usability of your web form. The five common mistakes listed above are easily avoidable. Following the rules listed will improve your web form and the ease with which users complete it.

Related Articles


  • form designing

    Posted by vikas zode on 10/20/2014 01:02am

    good explanation for form designing mistake

  • Buen cuidado del cabello con el mejor GHD IV Styler

    Posted by mhhpnm484 on 07/17/2013 05:13pm

    Se puede controlar manualmente la temperatura de planchas ghd. Si desea una alta temperatura en contacto con su pelo para que puedas calentar un largo tiempo para alcanzar la temperatura deseada. Usted puede utilizar. Nota: cuando se utiliza el pelo ghd, usted debe ser consciente de su propia seguridad, para evitar ser quemado. Fácil de usar ghd, el pelo bien modelleringsværktøjer.Perfekt reflexión para ayudarle a cambiar su mirada, usted puede encontrar la presentación en línea de DVD de maneras de lograr calor ghd peinados recta paso a paso las instrucciones. Tales prácticas en la enseñanza de usted tan pronto como sea posible familiarizarse con el uso de planchas ghd baratas. [url=]ghd baratas[/url] plancha de pelo ghd utiliza placas de cerámica para liso, fácil de moldear. Control de la tensión, puede crear el más apropiado entre las placas cerámicas de pelo liso. El producto también tiene el mismo anión, la conservación de hacer que el cabello suave y brillante, para evitar el pánico. Cuerpo con una configuración de calor digitales, pantalla digital hace que sea fácil seleccionar la función deseada o ajustar la forma de la temperatura. Puede ayudar a elegir el pelo bien y la temperatura deseada. Pulse un botón, tendrá un efecto perfecto de inmediato. 1 función de apagado automático hora le permite utilizar más paz de la mente. Planchas ghd como operación segura y simple. Ocupar gran cuota de mercado. Convertido en una moda de comprar. Debido a esto, a menudo parece falsa, por lo que cada vez más personas están comprando auténticos planchas ghd. Nuestra tienda, aunque las ventas de negro pelo ghd. Pero somos productos ghd regulares. No traen todo tipo de daño fuego falso. Nuestro producto de mapa con el mapa físico es exactamente el mismo. Para asegurar que los productos reales y fiables. Y vendemos planchas ghd baratas, 7 * 24 funciones en línea, usted puede comprar en cualquier momento. Siempre y cuando haya seleccionado el tipo deseado, complete la información personal, etc temas relacionados, el producto puede ser enviado directamente a las manos de espera. Por favor, comprar productos ghd sentimientos antes, mira a nuestra política de privacidad, Quiénes somos, transporte, preguntas más frecuentes y las políticas más relevantes, esto le ayudará a comprar nuestros productos. Gracias por tu colaboración. [url=]planchas ghd[/url] Si no puede determinar el modelo que usted quiere comprar GHD, voy a dar las características de cada modelo, y para tratar de resolver algunos de los problemas también se explica sobre el cuidado del cabello, tales como el uso frecuente de secadores, rizadores, tablero muy socavarlo! Por último, voy a contar mi experiencia personal, he utilizado y funcionar a darle una idea general de bord.Faktum es que el cuidado de la marca GHD y el pelo y otros artículos aparición causó una revolución en el mercado, si apoyamos dieron a esta celebridad, Katy Perry (quien es la imagen de la marca), si usted ve la cooperación (serie apareció en los créditos procesiones, fotos, etc), GHD barato, no tiene una rara personal entre la deficiencia de la hormona del crecimiento. En resumen, la placa de tiempo

  • Bright Mother of Pearl Dial by using Diamonds Watch.

    Posted by Ricsninny on 06/20/2013 06:58pm

    レディースウォッチ異なるデ [url=]カシオ 腕時計[/url] ザイン。で来るまた、構成 [url=]シチズン 腕時計[/url] されています含むもなどを含む [url=]グッチ 時計[/url] 同じ多機能メンズ腕時 [url=][/url] グッチ 時計 計を。これらの時計は、 [url=]オークリー サングラス[/url] 同様にもなる銀メッキま [url=]オークリー ゴーグル[/url] たは金メッキようにそれ活気望 [url=]オークリー レンズ[/url] ましいすべてへのいずれ [url=][/url] オークリー ゴーグル かまたはすべてにすべてま [url=]セイコー 腕時計[/url] たはいずれかへ。 Oneフェミニンスタ [url=]セイコー 時計[/url] イルカシオの時計はあるかもしれない有 [url=]seiko 腕時計[/url] 名なカシオWaveseptor時計の異なる時計。時 [url=][/url] セイコー 時計 計の次のカテゴリがも [url=]シチズン 時計[/url] カシオの高級時計順序。 ものこれら [url=]セイコー 腕時計[/url] は最も高価です。非常に一般 [url=]カシオ 腕時計[/url] 的なケースポイントでカシオス [url=][/url] カシオ 腕時計 トリートライダーです [url=]ラルフローレン[/url] とつまりの最高の仲間 ジ [url=]ポロラルフローレン[/url] ョギングやスポーツマンに [url=]ラルフローレン ポロシャツ[/url] 関係|を取得する。また、す [url=][/url] ラルフローレン ることができますによって使用される岩または都市表面登山者やバイカー内部。

  • Headphone isnot only a headphone,is a window to see the domain

    Posted by motherdhmm on 06/04/2013 04:18pm

    [url=]Beats headphones shop[/url] Callow Mutation Beats Solitary Headphone develop more swell, compact, tough and cheaper! This is why more and more people like application it. Hellishness Beats Unaccompanied, the latest research and evolution, breaking the traditional villainous and chalk-white color provides a assortment of color choices to the buyers. To provender the users with the utmost in the earliest convenience and portrayal when used with today¡¯s the carriable music devices, Beats On one's own headphones memorable part ¡°ControlTalk,¡± an advanced on-cable draw that provides users with choke-full pilot of their listening experience when using their 3GS iPhone, shuffle and other creative iPods and vest-pocket music devices. [url=]monster beats Australia[/url] Starting with the front coverlet, it is clear that the imitation substantial does not bear the ¡°tm¡± (trademark) sacrifice beneath the dope ¡°studio¡± on the bum left management corner of the caddy (may be a midget slight feel embarrassed, but you can sit down with that a lilliputian second of reader is missing from the picture on the right). At the back of the box, you can get a load of that the pictures of the headphones are somewhat different. They are positioned degree differently. Then there¡¯s also the lack of the ¡± tm ¡°put beneath the¡± studio ¡°gen at the bed basically left-hand corner.¡± tm ¡°is also missing on the vertical topic on the left-wing of the crate beneath the not to mince words¡± dre ¡°, and is also missing from the pattern hire of the pattern paragraph of text. [url=]beats by dre nz[/url] In brand-new years, in any way, the intense combination fad seems to fit celebrated since matrix year, HTC shares Beats by dre, launched the Beats Audio models of chic Android phones, Nokia also will be the affair of the on of Windows Phone the Lumia series phone, also announced that Co-brand the parenthetically a via (note: co-branded, two or more of a league of notable brand.) together with Eyesore society launched a different 2 uncommonly appealing sensitive phone communications headset models were: ear WH-920 and the headset WH-930. I academic from Wuhan Liancheng phone Nokia Salubrity of Horror WH-930, the pal influence be interested to know more there the next!

  • Surprise af monster beats kommer altid pÃ¥ mode

    Posted by wanzixiao on 06/04/2013 07:47am

    [url=]beats by dre danmark[/url] Dr. Dre beats menes at være på listen over mange specialiserede service-hovedtelefoner kan gøre. Blandt det store udvalg vedrørende hovedtelefoner fra Monster Beats hovedtelefoner rundt næsten alle blandet Fahion mode især med exceptionelle egenskaber. De bestemt ikke efterlade en person typer et par dr dre ofte sker i jagten på en højere visuel appel forekommer fremragende og charmerende.fordi jeg tror, at monster beats hovedtelefoner online shopping med hovedtelefoner i almindelighed en god elsker melodier, eller måske du nødt til at gå med musik i en krævende teknik, eller bare har brug for at få en Koronar nyde en god nats søvn , så du helt sikkert ønsker at få beruset for den mest pålidelige høj kvalitet udseende fremragende. [url=]beats by dre tilbud[/url] Uanset om du har brug for netværks personlig brug derhjemme, eller hvis du har brug for at udstyre dit barns skole, som er en meget sød, med henblik på at få en favorit Beats hovedtelefoner nysgerrig, jeg gravede lidt dybere, og jeg gotta jeg ser frem til i alle de basale behov klik her. Faktisk ønsker jeg dig til at bryde det ned til den korte form.Da jeg fik den elskede monster beats hovedtelefoner, og jeg føler meget glad og spændt, men hvad er den virkelige god pleje af det, selv om de nye hovedtelefoner altid vil indtage markedet hurtigt, men når jeg har beats er stadig som ny, tilfredshed aldrig forladt. Vi taler om nogle enkle opførsel om forlængelse af levetiden for headsettet [url=]beats by dre danmark[/url] Butland afsløret i en besked til en anden GB fodboldspiller, Karen Carney, at en Beats repræsentant besøgte holdet hotel på mandag, twitte: “. De er omkring, er jeg sikker på de vil støde ind i jer snart”Beats hovedtelefoner har været new æsten allestedsnærværende i Aquatics Centre med svømmere, herunder Michael Phelps bruger dem til at blokere baggrundsstøj før løbene.Det stunt er usandsynligt, at gå godt med advokater på LOCOG eller IOC, som har strenge regler for at beskytte officielle sponsorer, som har betalt millioner af pounds for eneretten til at udnytte deres tilknytning til begivenheden.Endvidere oplyste vejledning udstedt før De Olympiske Lege af IOC, at atleter ikke var tilladt at fremme enhver brand, produkt eller service inden for en blog eller tweet eller på anden måde på eventuelle sociale medieplatforme eller på nogen hjemmesider.

  • paul cruz outlet Paul Smith wallet which get yourself a high review from that customers.

    Posted by HooveHonKeype on 05/18/2013 06:38pm

    低価格 hotsaleの [url=]オークリー サングラス[/url] 安いオークリーレーダー [url=]オークリー ゴーグル[/url] レンジなサン [url=]オークリー アウトレット[/url] グラスオレンジフレーム多 [url=][/url] オークリー ゴーグル 色 [url=]オークリー アウトレット[/url] コンタクトレンズ!、当 [url=]オークリー サングラス[/url] 社のウェブサイトを [url=]Oakley サングラス[/url] 選択してください 格安オー [url=][/url] オークリー アウトレット クリーレーダー詰め合わせ [url=]サングラス rayban[/url] なサングラスオレンジフ [url=]ray-ban サングラス[/url] レーム多色レンズあなたは [url=]レイバン サングラス[/url] 取得す [url=][/url] サングラス rayban る良質最高品質リー [url=]Rayban サングラス[/url] ズナブルな価格で最高品質。もっ [url=] レイバン サングラス[/url] と安くオークリーレーダー [url=] レイバン メガネ[/url] 詰め合わせなサングラスオレ [url=][/url] レイバン サングラス ンジフレーム多色レンズあなたが買 [url=]セイコー 時計[/url] うには、あなたがおそらく可能性は得ることが [url=]セイコー 腕時計[/url] できます!今卸売にアクション [url=]セイコー ウオッチ[/url] を取る主要格安オークリーレーダ [url=][/url] セイコー ウオッチ ーの品質セレクションなサングラスオレンジフレーム多色 オークリーレーダー範囲なサングラスリンゴフレーム多色レンズ休暇、あなたの素晴らしい航海!

  • oakley sunglasses cheap

    Posted by yjexpenueMoxjef on 03/29/2013 11:14pm

    [url=]wholesale snapback hats[/url]cheap snapbacks from china [url=]cheap snapbacks free shipping[/url]cheap oakley [url=]cheap sunglasses[/url]cheap snapbacks from china [url=]oakleys cheap[/url]wholesale hats [url=]wholesale snapback hats[/url]oakleys cheap

  • cheap sunglasses

    Posted by ybexpenueMoxjef on 03/29/2013 11:00pm

    [url=]wholesale snapbacks[/url]snapback hats wholesale [url=]cheap snapbacks free shipping[/url]wholesale hats [url=]cheap sunglasses[/url]oakleys cheap [url=]wholesale snapbacks[/url]cheap snapbacks for sale [url=]cheap oakley[/url]snapback hats wholesale

  • snapbacks for cheap

    Posted by xxds5nv on 03/29/2013 12:05am

    [url=]hats wholesale[/url] hats wholesale a nsxl [url=]cheap snapbacks online[/url] cheap snapbacks online e vtmz[url=]cheap hats online[/url] cheap hats online d egvp[url=]snapback hats wholesale[/url] snapback hats wholesale r rezv[url=]cheap hats for sale[/url] cheap hats for sale b sako[url=]wholesale snapback caps[/url] wholesale snapback caps d vomf [url=]cheap snapbacks online[/url] cheap snapbacks online d wdzp [url=]hats wholesale[/url] hats wholesale j anak[url=]wholesale snapback hats[/url] wholesale snapback hats b grtf[url=]hats wholesale[/url] hats wholesale j gnta[url=]wholesale snapback hats[/url] wholesale snapback hats t jnbl[url=]snapbacks wholesale[/url] snapbacks wholesale r pbuh [url=]snapback hats wholesale[/url] snapback hats wholesale g oamz [url=]wholesale fitted hats[/url] wholesale fitted hats t nraw[url=]snapbacks wholesale[/url] snapbacks wholesale t kyld[url=]cheap snapbacks for sale[/url] cheap snapbacks for sale l qqla[url=]snapback wholesale[/url] snapback wholesale c wstx[url=]snapback wholesale[/url] snapback wholesale w xybr

  • snapbacks wholesale

    Posted by xxds1bn on 03/28/2013 11:32pm

    [url=]fitted hats wholesale[/url] fitted hats wholesale d zcqj [url=]wholesale fitted hats[/url] wholesale fitted hats w kmcw[url=]wholesale fitted hats[/url] wholesale fitted hats w kjsf[url=]cheap snapbacks[/url] cheap snapbacks u tgvq[url=]cheap snapbacks online[/url] cheap snapbacks online x djko[url=]snapbacks wholesale[/url] snapbacks wholesale t rryo [url=]wholesale hats[/url] wholesale hats c cxkt [url=]cheap snapbacks[/url] cheap snapbacks m qjkw[url=]snapback hats wholesale[/url] snapback hats wholesale n vgoc[url=]wholesale beanies[/url] wholesale beanies g ridm[url=]cheap hats for sale[/url] cheap hats for sale y fxyp[url=]snapback hats wholesale[/url] snapback hats wholesale o yksi [url=]wholesale snapbacks[/url] wholesale snapbacks j frik [url=]fitted hats wholesale[/url] fitted hats wholesale f gqnp[url=]wholesale snapback hats[/url] wholesale snapback hats k tiay[url=]wholesale fitted hats[/url] wholesale fitted hats t gcxz[url=]wholesale beanies[/url] wholesale beanies t ogae[url=]cheap snapbacks online[/url] cheap snapbacks online e vvoc

  • Loading, Please Wait ...

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date