Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts

    template design - Guideline

    Hi
    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]
    OR
    [Label] [input]

    The above block can repeat.

    Eg.
    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.
    Eg
    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.

    <code>
    <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>
    OR
    <input id="x" class="SEE-IINPUT-VARIANTS"></input>
    <label for="x"><span class="response_label">The label</span></label>
    <span>
    </div>
    </div>
    </code>

    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:
    <code>
    <label for="x"><span class="response_label">The Label</span></label>
    </code>

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

    Any input/pointers is highly appreciated.

    Thanks,
    Vijay Venkataraman

  • #2
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oops no response :-(. If someone thinks that i haven't furnished enough information or it's not clear, kindly let me know.

    Thanks,
    Vijay Venkataraman

  • #3
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <span class="label"><label for="x">The Label</label></span>
    Also, I suggest you read these:
    Creating Accessible Forms
    Accessible HTML/XHTML Forms

    P.S. I suggest you read Guidelines and Suggestions for Posting on Web Development Forums.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #4
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Kravvitz,
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •