View Full Version : template design - Guideline

Vijay Venkat
05-04-2006, 01:32 PM
I am creating a template. This template is so designed that i can get to see the html page in different layouts by applying a CSS switch to the html page.
So basically the html page is designed with html tags which are assigned styles using the class attribute on the tags.

The page would display something like
[question Label] [questionText]
[input] [Label]
[Label] [input]

The above block can repeat.

Q1. Hey how did you come to know about us?
radio Label

Q1. Hey how did you come to know about us?
radioButton Through News Paper
radioButton Through Ads
radioButton Through Internet

Above "radioButton" is representation for a radio button when viewed(i am not sure how to get the control to be displayed here.).
"Through News Paper", "Through Ads", "Through Internet" are the labels for the response we expect the user to choose.

There can be simple questions that take a feeback in a text box.
14. Tell me something about your self?
Your Response: TextInput

I have captured the html template which depicts the scenario i have explained. So a question will be displayed and a response (answer) will be collected from the user. The actual page template has lot of other pieces. A specific snippet for the question section i discussed so far is given below.

<div id="questions">
<span class="question_number">12</span>
<span class="question_text">The question Text</span>
<div class="responses">
<span class="response">
<label for="x"><span class="response_label">The label</span></label>
<input id="x" class="SEE-INPUT-VARIANTS"></input>
<input id="x" class="SEE-IINPUT-VARIANTS"></input>
<label for="x"><span class="response_label">The label</span></label>

1. Can anyone suggest whether i have sufficiently captured information in a generic way and whether i have followed best pratices? Will the above template cater to most of the customisation needs? Such that applying different css to the html will do most of the work.

2. I don't want the input to come with in the label tag for the reason that some styles when used on the label seem to bleed in to the edges of the input element. By keeping the label separate - customization is applied specifically to the label - Comments?

I am not sure whether i need a "span" tag after the label element - to be a container to the label text - "The Label".

Please note that the actual label is contained with in a span tag like:
<label for="x"><span class="response_label">The Label</span></label>

What is the benefit of above definition over the usage given below?
<label for="x" class="response_label">The Label</label>
Note: there is no use of span tag for the label.

Any input/pointers is highly appreciated.

Vijay Venkataraman

Vijay Venkat
05-10-2006, 10:14 AM
Oops no response :-(. If someone thinks that i haven't furnished enough information or it's not clear, kindly let me know.

Vijay Venkataraman

05-10-2006, 10:33 AM
Not placing the form control in the <label> element is fine as long as you properly specify the for attribute of the <label> element and the ID attribute of the corresponding form control.

You seem to be using a lot of <div>s and <span>s that may be unnecessary. Don't forget to use fieldsets (the first article I link to tells more about their use).

Netscape versions after 6.0 and before 7.1 do not display <label> elements correctly when certain CSS properties are applied to them. This includes display:block, float:left, and float:right. I assume this applies to other browsers that use the equivalent versions of the Mozilla Gecko Engine. So in order to be nice to them I suggest applying the CSS properties to a <div> or a <span>, depending on your form's structure, to avoid this bug. Therefore, I would do this:

<span class="label"><label for="x">The Label</label></span>
Also, I suggest you read these:
Creating Accessible Forms (http://www.webaim.org/techniques/forms/)
Accessible HTML/XHTML Forms (http://webstandards.org/learn/tutorials/accessible-forms/)

P.S. I suggest you read Guidelines and Suggestions for Posting on Web Development Forums (http://www.dynamicsitesolutions.com/other/forum_posting_guidelines/).

Vijay Venkat
05-13-2006, 04:37 PM
Thanks a lot for your response. Thanks for clearly pointing out the problem that exists with netscape while rendering labels.

I am using fieldset and legends at appropriate places. Thanks for anyway letting me know.

Kravvitz: P.S. I suggest you read Guidelines and Suggestions for Posting on Web Development Forums.
Vijay : Yes i really need this textual slap. I agree. My apologies. I appreciate your patience.

Vijay Venkataraman