In previous post I wrote about label control that will generate "true" label tag. Here is more code for that simple control. Now you can assign control (like TextBox) which label will be for. Also AccessKey is rendered as underlined character. Happy using.
1 using System;
2 using System.Web.UI;
3 using System.Web.UI.WebControls;
4 using System.ComponentModel;
5 using System.Text.RegularExpressions;
6
7 [assembly: TagPrefix("LazyDeveloper.Web.UI.Webcontrols", "LazyDeveloper")]
8 namespace LazyDeveloper.Web.UI.Webcontrols
9 {
10 [
11 ToolboxData("<{0}:FormLabel runat=\"server\" Text=\"Label\">"),
12 Designer("System.Web.UI.Design.WebControls.LabelDesigner, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"),
13 DataBindingHandler("System.Web.UI.Design.TextDataBindingHandler, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"),
14 DefaultProperty("Text"),
15 ControlValueProperty("Text"),
16 ParseChildren(false),
17 ControlBuilder(typeof(LabelControlBuilder)),
18 ]
19 public class FormLabel : Label
20 {
21 protected override void RenderContents(HtmlTextWriter writer)
22 {
23 if (AccessKey != "")
24 {
25 Regex re = new Regex(AccessKey, RegexOptions.IgnoreCase | RegexOptions.Multiline);
26 MatchCollection matches = re.Matches(Text);
27 if (matches.Count > 0)
28 {
29 string aKey = matches[0].Value;
30 Text = re.Replace(Text, "" + aKey + "", 1);
31 }
32 }
33 writer.Write(Text);
34 }
35 protected override void AddAttributesToRender(HtmlTextWriter writer)
36 {
37 base.AddAttributesToRender(writer);
38 if (For != "")
39 {
40 writer.AddAttribute(HtmlTextWriterAttribute.For, For);
41 }
42 }
43 public override void RenderBeginTag(System.Web.UI.HtmlTextWriter writer)
44 {
45 AddAttributesToRender(writer);
46 writer.RenderBeginTag("label");
47 }
48 public override void RenderEndTag(System.Web.UI.HtmlTextWriter writer)
49 {
50 writer.RenderEndTag();
51 }
52
53 [
54 TypeConverter(typeof(ControlIDConverter)),
55 IDReferenceProperty,
56 Description("Label_For"),
57 DefaultValue(""),
58 Category("Behavior"),
59 ThemeableAttribute (false)
60 ]
61 public string For
62 {
63 get
64 {
65 string forControl = (string)ViewState["For"];
66 if (forControl != null)
67 {
68 return forControl;
69 }
70 return string.Empty;
71 }
72 set
73 {
74 ViewState["For"] = value;
75 }
76 }
77 }
78 }
Some time ago, I've started using the blogmarks. Not for any particular reason, I'm not using tag cloud anywhere (so far) but I found the blogmarks as nice source of interesting pages. From time to time, I'm just looking what interesting pages peoples are posting there. This way I've found, maybe for you well known already, two pages css mania and web design from scratch, both dedicated to css and web design matters.
A few days ago, when I was about starting a new project, I've started weigh up form design. My first steps were to these two pages but as far I was concerning design and usability these two were good source of links and inspiration. But other thing concerns me. How do I should code form? So far I was using tables to organise form, but maybe there is a better, modern and more “standard” way.
Checking next pages and jumping from the one page to another I’ve found a great source of web interface design - LukeW Interface Design with great in depth analysis on web forms in Web Application Form Design article where Luke suggest using of the table. Question is how to layout forms.
There are two common ways, horizontal where label and the field are in the same line or vertical where label is placed above the field in the same column. Moreover, in horizontal layout labels can be aligned to the left or to the right. So which one is better, more usable and friendly? In fact is hard to give one answer. As Luke wrote, all layouts have advantages and disadvantages. Mateo Penzo made great eye tracking for both cases and some other variations, such as bold and normal labels in vertical layout. The first conclusion, after reading all of these materials, can be that vertical layout is best. Yes and no. Yes, because as Mateo has proven, its fastest and most natural layout. No, because in our work, forms are usually higher then screen and pages needs to be scrolled. Vertical layout will make forms twice longer as horizontal. That can be serious problem. On 1024x768 screen with page that contains standard header about 60px we will fit only ten fields and 15 fields on 1280x1024 screen. If we assume that the form has also some headers, sections and there are multiline textboxes then finally we can fit at least six to ten fields on 1280x1024 screen. There are some cases when it is too less and, when user has to scroll form, all advantages from fast readable layout are wasted. So I think, everyone should take his own decision but I think I will use horizontal but with labels aligned to left. It’s fast to read and fits well on page.
So in summary I’ve found that using tables for forms is still on track. Some of the CSS geeks says that divs or paragraphs has to be used instead to create forms.
1 <div>
2 <label>Labellabel>
3 <input type="text" />
4 div>
Seems to be quite interesting idea, maybe. I’ve tried this a few times and had some problems with positioning and general layout organisation and don’t like this way. Advantage is that html with that form is easier to read and maintain, so maybe it is worth to try again?
And the final note. No matter which technique you will use you should place label in
1 using System;
2 using System.Collections.Generic;
3 using System.Text;
4 using System.Web;
5 using System.Web.UI.WebControls;
6 using System.Web.UI;
7 using System.ComponentModel;
8
9 namespace LazyDeveloper.Web.UI.WebControls
10 {
11 [
12 ToolboxData("<{0}:Label runat=\"server\" Text=\"Label\">"),
13 Designer("System.Web.UI.Design.WebControls.LabelDesigner, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"),
14 DataBindingHandler("System.Web.UI.Design.TextDataBindingHandler, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"),
15 DefaultProperty("Text"),
16 ControlValueProperty("Text"),
17 ParseChildren(false),
18 ControlBuilder(typeof(LabelControlBuilder)),
19 ]
20 public class Label : System.Web.UI.WebControls.Label
21 {
22 public override void RenderBeginTag(System.Web.UI.HtmlTextWriter writer)
23 {
24 AddAttributesToRender(writer);
25 writer.RenderBeginTag("label");
26 }
27 public override void RenderEndTag(System.Web.UI.HtmlTextWriter writer)
28 {
29 writer.RenderEndTag();
30 }
31 }
32 }
Hope it helps