1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS, HTML, FIELDSET, LEGEND, and LABEL tags in FORM

Discussion in 'CSS' started by itgl72, May 3, 2005.

  1. #1
    I am trying to redesign one of my forms using CSS rather than tables. I am trying to utilize FIELDSET, LEGEND, and LABEL tags as well as CSS. My CSS skills are average at best and FIELDSET, LEGEND, and LABEL tags are somewhat new to me as well. The form I am redesigning looks great in tables but I'm starting it off now with very little style and just trying to get things to line up and put it together from the beginning using some best practices. Basically just getting it to work before we make it look pretty.

    If I can see how the *correct* way of putting this type of form together I will learn from it and be able to move on in the future making forms in this way. However things that seemed easy in tables are having me pull my hair out now.

    You can view source of this form here:
    http://snipurl.com/emvl

    Here are some of my QUESTIONS:

    1. Notice on top of some of my fields I have items that say "First Name", "Last Name", "Minimum", and "Maximum" above their respected fields. What I have done to put them SOMEWHERE near where they should be is put several nbsp instances to push them out to hang out above the fields. This is probably NOT the correct way to do this. WHAT IS THE CORRECT WAY TO DO THIS? How would you handle this situation? On some fields I just need to have that sort of extra info. In tables it was easy enough.

    2. While trying to utilize FIELDSET, LEGEND, and LABEL tags things seem easy enough when there is only ONE field. For example the "email" field has its label called email and the input tag has an id that equals email. MY QUESTION IS HOW DOES IT WORK IN AREAS WHERE THERE ARE TWO FIELDS? For example on the section where it lists "price" I have two drop down fields. One that will work as a minimum from, and another that would list to a maximum. ID's should only be used ONCE in one area. But WHAT IS THE PROPER WAY to do this with TWO FIELDS? Can someone please show me so I can figure this thing out in the future.
    SEMrush
    3. The RADIO buttons for the area "Show Pictures" have a YES and NO option. Well I totally mucked up the code here. I have not been able to get the format to look like so: (.)YES ()NO in that order. They seem to be pushed way off from where they should be. Plus in IE the fieldset is pushed off to the right of the screen but it looks ok in NS,FF, and OP. What is the proper way to do this? What did I screw up? Why is it pushed way off to the right in IE?

    4. When putting together fields in this way where there are two fields (ie: price field, bedroom, bathroom, first name, last name fields) What is the proper way to space them out? Right now they ride up against each other. I can just put a nbsps but is that the right way?

    If I can get *these* questions answered and resolved I think I will be pointed in a good direction. Before I actually have to start styling it that is.

    By the way, if anyone knows of any issues as to why I should not go this route please let me know. Personally I will just update my existing form even though it is tables and run with it as it works fine but learning something new is always OK in my book too.

    My goal is to have this form working correctly and understand what was done to make it work correctly. I want to have the FIELDSET, LEGEND, and LABEL tags configured correctly for the fields I have a need to use on this form.

    Hopefully we can make this happen, and thanks in advance for your assistance!
     
    itgl72, May 3, 2005 IP
    SEMrush
  2. nsetzer

    nsetzer Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This is a bit late, but maybe it will help.

    I'll start by answering the second question: there is, unfortunately, no way to associate one label with two input elements, at least with HTML 4.01. Well, technically, that isn't true, you can do it implicitly:

    <p>
    <label>
    Full Name:
    <input name="fname-badex" type="text" class="fname" id="firstname-badex">
    <input name="lname-badex" type="text" class="lname" >
    </label>

    However, if you do that, when the user clicks on the second input box, the focus will go to the first input box (to much annoyance of the user). So that method is out.

    According to the specifications, the for attribute of the <label> tag must only contain one id, so you can't give it a space deliminated list either. You can, however, give multiple <label>s to an input box (just not nested).

    The reason for this behavior is that the <label> tag's purpose is to label just one input element, and if multiple elements are associated with each other, they should be put inside <fieldset></fieldset> and given a <legend></legend>. You then use CSS to style the <fieldset> and <legend>

    Anyway, in your case you actually have labels specific to the boxes, so *they* should be the ones getting the label tag, and the 'extraneous' label can become a legend. So, for example, the name field should look like:

    <p style="clear: both;">
    <fieldset style="border:0; margin: 0; padding: 0;">
    <legend style="margin: 0 5px 0 0; float: left;">
    Full Name:
    </legend>

    <label><!-- implicitly associate the first name label with the first name box-->
    <span style="margin: 0 5px; float: left;">
    First Name: <br>
    <input name="fname" type="text" class="fname" id="firstname">
    </span>
    </label>

    <label><!-- implicitly associate the last name label with the last name box-->
    <span style="margin: 0 5px; float: left;">
    Last Name: <br>
    <input name="lname" type="text" class="lname" >
    </span>
    </label>
    </fieldset>

    This also addresses your first and fourth question. I've put the styling inline just to keep it with the example; it is advised that you move into the <head> for actual implementation --- actually, the best place for it is an external style sheet.

    The answer to your third question lies with the fact that you used CSS to style the input tag, and since the radio buttons are input tags, they are naturally styled that way: displayed inline and with a large width. I should note here that this CSS, while not invalid, should not be doing what you want: inline elements ignore the width property, so a broswer in strict mode should totally ignore that width.

    Anyway, if you want most of the input fields styled as you have declared them, then you need to give a class to the radio buttons that will style them appropriately. Also, the <label> tag for the radio buttons should be directed at their specific options and again they should be grouped by a <fieldset>, as in

    <fieldset style="border:0; margin: 0; padding: 0;">
    <legend style="margin: 0 5px 0 0; float: left; height: 4em;">
    Show Pictures:
    </legend>

    <label>
    <input type="radio" value="Y" name="showphoto" checked> Yes
    </label>
    <br>
    <label>
    <input type="radio" value="N" name="showphoto"> No
    </label>
    </fieldset>

    Notice the use of the height property: this should as large as the number of lines that the options have (in this case I used [1.5em/line]*[2 lines] and rounded up).

    You'll notice that using the "float: left;" property will actually cause some alignment problems with the surrounding text -- the solution here is to give the fieldsets appropriate margins and positioning.

    edited for grammar, spelling, and numeration incompetence
     
    nsetzer, Jul 19, 2005 IP
  3. jimrthy

    jimrthy Guest

    Messages:
    283
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Excellent, succint answer!

    I just wanted to point out one minor thing that's really just an annoyance of mine.

    nsetzer does this, but it doesn't look as if itgl72 does. I figure as long as anyone's doing it "wrong," it's up to me to point it out :).

    Please make your tags all lower case. I don't know whether it's required yet (or ever will be) for HTML, since I'm sticking to XHTML these days. But I figure everyone should be at least planning to migrate to XHTML, so you might as well start thinking about details like this now.

    The longer you wait, the harder it will be to change things.
     
    jimrthy, Jul 19, 2005 IP
  4. technoverma

    technoverma Peon

    Messages:
    244
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    a very well written post thanks for sharing it
     
    technoverma, Jan 4, 2011 IP