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:
<!-- m --><a class="postlink" href="http://snipurl.com/emvl">http://snipurl.com/emvl</a><!-- m -->
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.
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!I'm thinking about solutions to all of your questions but I'll address a couple first.
Also, I think that you are going about this in the right way by using the existing <form> element tags to style your form. You can style each element to your heart's desire from the <legend>, <label>, etc.
I believe that the problem with your radio buttons is that you are applying a width of 195px to all <input> items instead of just the text inputs.
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?
I believe that if you just add some margin to those text inputs that should space them out. You can add a "text field" class to all of those inputs to style them (instead of "id" type class identifiers for each input)
<input name="fname" type="text" class="mytextfield">
Hope this helps (if only a little),
Ian<div><span style="valign: center">full name:
<span style="valign: top;">First Name:<br><input name="fname"
type="text" class="fname" id="firstname">
<span style="valign: top;">Last Name:<br><input name="lname"
type="text" class="lname" id="lastname"></span>
</div>
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:
<!-- m --><a class="postlink" href="http://snipurl.com/emvl">http://snipurl.com/emvl</a><!-- m -->
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.
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!I'm thinking about solutions to all of your questions but I'll address a couple first.
Also, I think that you are going about this in the right way by using the existing <form> element tags to style your form. You can style each element to your heart's desire from the <legend>, <label>, etc.
I believe that the problem with your radio buttons is that you are applying a width of 195px to all <input> items instead of just the text inputs.
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?
I believe that if you just add some margin to those text inputs that should space them out. You can add a "text field" class to all of those inputs to style them (instead of "id" type class identifiers for each input)
<input name="fname" type="text" class="mytextfield">
Hope this helps (if only a little),
Ian<div><span style="valign: center">full name:
<span style="valign: top;">First Name:<br><input name="fname"
type="text" class="fname" id="firstname">
<span style="valign: top;">Last Name:<br><input name="lname"
type="text" class="lname" id="lastname"></span>
</div>