On Oct 17, 2008, at 9:50 AM, [EMAIL PROTECTED] wrote:

That's my next bone to pick, and why I really liked the <label> wrapper. I really dislike the idea of wrapping the <label> & <input> in a <div> but I will likely have to for the exact point you have made. I need lots of flexibility but want minimal code bloat. Here's a simplified version of where I am heading:
...
<fieldset class="parent" id="address">

<legend><span>Contact Information</span></legend>

<div class="nameFirst">
  <label for="nameFirst">Name</label>
  <input id="nameFirst" type="text">
</div>

<div class="nameLast">
  <label for="nameLast">Name</label>
  <input id="nameLast" type="text">
</div>


</fieldset>
...

Why the <span> in the <fieldset>? I may potentially need to style that area as a sliding doors tab, plus it seems easier to achieve consistent cross-browser styles on the span as opposed to the <legend>.

The nested <fieldset> is to allow for the DOB to me horizontal if/ when desired. Still lots to do regarding other form elements...more questions as I progress. I will also post an example.

Thanks thus far!



I have an obsession with web form styling - I cannot stand ugly web form :-)

So here is my two cents: if you want consistent cross-browser web form that looks nice. Add class in the input instead, especially when it involves using checkboxes, radio button, borders for input field, select and multiselect. Though you can utilize input ID, but for a web form, or various forms used throughout entire site that have many checkboxes, radio buttons and select options, using class will be a lot clearer for your style sheet and no need for extra div to wrap up each form element.

Fieldset, label and input tags are enough for basic and nice styling, no extra div needed.
<fieldset>
        <legend><span>Contact Information</span></legend>
                <label for=" "> xyz</label>
                <input id=" " type="checkbox" class="add-a-class" >
</fieldset>

That is for the site I have full control and know I will be the only one updating the site. But if I make a template and the targeted users are people who want to build their sites, then definitely bloated divs to prevent customer service nightmare. I will even eliminate <legend> with a clear conscious. Alas! IE and Opera are not kind to form elements.

tee



*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************

Reply via email to