div structure helper

[eluser]wiredesignz[/eluser]
Oh man, Tables, that takes me back to a simpler time.

[eluser]Lone[/eluser]
Another reason I favoured tables for forms is that they will auto 'clear'. Where as if you start floating elements left and right like I presume xwero does in the <p> tag then you can't set things like bottom borders etc. without another fix to auto clear (which can be done but starts looking a bit hackish imo.

Don't get me wrong - I would much prefer to have my html like xwero's example but I have just hit too many limitations with it in the past and had to reform back to tables as much as I don't want to.

[eluser]xwero[/eluser]
to make your code useful maybe you should add an option to set the html elements. i once tried to create a form generator but because there are so many little differences i think it's best to split up the form like the form helper is doing

Code:

<?=form_open($action);?>
<p id="msg">Enter your Username &amp; Password to continue &nbsp;</p>
&lt;?=form_line('Username: ',array('text','username'));?&gt;

But if you are going to write all those options you can write the html in the same amount of time and then generation time of the form would be less.

[eluser]Neophyte[/eluser]
Just another take on markup for forms, its probably a little complex if youre typing out the markup by hand but assuming youre using some sort of helper or form builder i have found it to be extremely versatile in how it can be styled to match almost any site also without CSS enabled (say from a screen reader or mobile phone) the form remains extremely well structured and readable.

Code:

<form>
  <fieldset>
    <h3>Fieldset Legend</h3>
    <div class="note">Some text describing the fieldset here..</div>
    <ol>
      <li class="required">
        <label for="username">Username</label>
        <div>&lt;input type="text" name="username" id="username" /&gt;</div>
      </li>
      <li class="required">
        <label for="password">Password</label>
        <div>
          &lt;input type="password" name="password" id="password" /&gt;
          <span>Forgoten your password? click here</span>
        </div>
      </li>
      <li class="actions">
        &lt;input type="submit" name="login" value="Sign In" /&gt;
      </li>
    </ol>
  </fieldset>
&lt;/form&gt;

[eluser]xwero[/eluser]
@Neophyte: What does the fieldset tag?

[eluser]Lone[/eluser]
I started to get really full on and use fieldsets as well when using no table - see this page, but again you start to have to get really hackish to get them to display correctly between browsers

Some sample html:

Code:

<fieldset class="clearfix">

  <legend>Your Details</legend>
    
  <div class="row">
    <span class="formLabel"><label for="user_name" class="require">Your Name</label></span>
    <span class="formControl">&lt;input id="user_name" name="user_name" type="text" value="" class="textboxLarge" /&gt;</span>
  </div>

  <div class="row">
    <span class="formLabel"><label for="user_business" class="require">Business Name</label></span>
    <span class="formControl">&lt;input id="user_business" name="user_business" type="text" value="" class="textboxLarge" /&gt;</span>
  </div>

</fieldset>

Fieldsets are used to group form elements and are best used with the <legend> tag as well to name it on screen.

[eluser]xwero[/eluser]
I just wonder what the function is in Neophytes snippet. I can understand where the other things come into play but the fieldset seems unnecessary. If you want to use it for design you can use the form tag instead.

[eluser]Neophyte[/eluser]
[quote author="xwero" date="1201818237"]I just wonder what the function is in Neophytes snippet. I can understand where the other things come into play but the fieldset seems unnecessary. If you want to use it for design you can use the form tag instead.[/quote]When the form only contains 1 group of fields the fieldset may seem redundant (and from a semantic html point it is) but ive found it to be very handy when styling forms for certain designs. especially when floating the <div class="note"> to the right to make an info box and using the form tag as a container to constrain how far right it goes but still needing background styling at a smaller width (so the info box almost looks like its outside of the form)

[eluser]Référencement Google[/eluser]
As nobody proposed it, I personally use Definition lists to layout my forms, that's a wonderfull and accessible solution.

You can see an example here:
http://yelotofu.com/demo/dl-form-layout.html

And the full article on this blog:
http://yelotofu.com/2007/10/form-layout-...ion-lists/

[eluser]unsub[/eluser]
@elitemedia: holy catfish, that's cool!
@neophyte: you as well...

i don't know why it has never occurred to me to use lists for forms, but together you two have just saved me a lot of future time and frustration in trying to make compliant and well laid out forms. just wanted to say thanx!

@wireddezigns (OP): this is a real nifty helper; i'm just getting into codeIgniter, and still marvelling at all the cool stuff. not the least of which is the community of people contributing libs/helpers/etc.

cheers, all