Forum Moderators: open

Message Too Old, No Replies

Forms - labels and inputs

What's good programming practice?

         

Setek

1:59 am on Oct 3, 2005 (gmt 0)

10+ Year Member



Alright, so lately for some reason many clients have wanted forms. I was curious about some things...

<label for="form_given_name">Given Name</label>
<input type="text" id="form_given_name" name="given_name" />

Say I had these elements... What are people's thoughts on well-formedness etc.. Should name be allowed something like "Given Name"? When the form sends it sends the value of name, but should the value be allowed spaces and capital letters? What of ampersand characters (&amp; and such)? What will send through fine, what doesn't, what's good programming practice :)

httpwebwitch

5:44 pm on Oct 5, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



1) don't put spaces in your "names" - those are analogous to variable names, and you don't want to get involved with + and %20 and different ways that they get URLencoded.

2) <label> is not well supported. It's out there, but it's one of those tags that doesn't behave itself out in public. For form labels, I'm usually content with a <span>

3) Be consistent naming variables within your logical processing code and the "name" used in your form.

For instance, if I am assigning the value of a form element to a variable in my code, I do this:

[C#]
string givenname = Request.QueryString['givenname'];

* * *

Here is a typical label/input that I would create:


<span id="LabelGivenName">Given Name</span>
<input type="text" name="GivenName" value="<%=GivenName%>" onKeyPress="highlightlabel('GivenName')">

The id on your <span> gives you the ability to control the label based on events of the input. For instance, when the value of GivenName changes, I'll turn the label red so the user can see that the value has changed, and they need to Submit (Save) the form. To reference the label, all I do is concatenate "Label"+varname and that's my label name.

You get naming complications when you have more than one form on a page with the same variable name. For example, a mailing list form that uses "address=" and a separate e-commerce shipping form that also uses "address=". The forms would work fine, but you'd end up with labels with the same name, like "LabelAddress", which would stymie your getElementById(). In those cases I'd prefix the variables with easy-to-understand modifiers.

Address=
becomes
ShippingAddress=

and my Label id would be "LabelShippingAddress"

These are just my preferences and style, which have worked well for me. Having an established naming strategy means I can think about other things. Anyone else might have a totally different strategy which would work equally well.

Best of luck to you

Robin_reala

7:11 pm on Oct 5, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've not had any problems with <label> and I'd definitely consider then an essential form component for usability and accessibility.