div structure helper

[eluser]wiredesignz[/eluser]
application/helpers/div_structure_helper.php

Code:

function div_construct($attributes = NULL, $structure = array(), $tab = 0, $crlf = "\n")
{
    $tabs = str_repeat("\t", $tab);
    $crlf .= $tabs;
    
    foreach ($structure as $key => $content)
    {
        $id  = (!is_numeric($key)) ? ' id="'.$key.'"' : '';
        $cls = ($attributes[$key]) ? ' class="'.$attributes[$key].'"' : '';
        
        echo ($attributes) ? $crlf.'<div'.$id.$cls.'>' : $crlf;
        echo (is_array($content)) ? div_construct(&$attributes, $content, $tab+1).$crlf : $content;
        echo ($attributes) ? '</div>' : '';
    }
}

sample login form using div_structure_helper
application/views/login.php

Code:

<?php
    echo form_open($action);
    div_construct(
        //css class attributes
        array(
            3 => 'labels',
            4 => 'tr',
            5 => 'tr',
            6 => 'inputs',
            7 => 'tr',
            8 => 'tr',
            9 => '',
        ),
        //css id attributes + structure
        array(
            'content' => array(
                'msg' => $message.'  ',
                'login' => array(
                    3 => array(
                        4 => 'Username: ',
                        5 => 'Password: ',
                    ),
                    6 => array(
                        7 => form_input('username', $username, 'class="bx"'),
                        8 => form_password('password', $password, 'class="bx"'),
                    ),
                9 => form_submit('btn',' login ', 'id="btn"'),
                )
            )
        )
    );
    echo form_close();
?>

HTML Output

Code:

<form action="http://domain.com/login" method="post">
<div id="content">
    <div id="msg">Enter your Username &amp; Password to continue &nbsp;</div>
    <div id="login">
        <div class="labels">
            <div class="tr">Username: </div>
            <div class="tr">Password: </div>
        </div>
        <div class="inputs">
            <div class="tr">&lt;input type="text" name="username" value="admin" maxlength="500" size="50" class="bx" /&gt;</div>
            <div class="tr">&lt;input type="password" name="password" value="" maxlength="500" size="50" class="bx" /&gt;</div>
        </div>
        &lt;input type="submit" name="btn" value=" login " id="btn" /&gt;
    </div>
</div>
&lt;/form&gt;

[eluser]xwero[/eluser]
ouch that is a bad case of divitis

[eluser]Lone[/eluser]
Given Im a big advocate of using standards but from my previous experience when it comes to forms at times your best to use tables - at the end of the day forms are like tabulated data - two equal columns.

You usually end up with less HTML this way and it is also more readable.

[eluser]xwero[/eluser]
For forms i use

Code:

<p><label for=""></label>&lt;input type="text"&gt;</p>

and fix the browser caveats using css. With an id for each form it's a piece of cake to manipulate the width of the labels.

[eluser]Lone[/eluser]
I had gone to methods similar to that in that past but started to have a few alignment issues when it came to outputting errors etc. next to the input.

I found having the label and input wrapped in their <td> gave a lot more power when it came to more complex forms.

[eluser]xwero[/eluser]
That is possible i try to keep my forms as simple as possible.

When i do error outputs next to the input i use a error class and i never experienced problems so far. If i want to show off i use the title attribute of the label for displaying the message and use javascript to display the error. It's not the best piece of accessible html but it looks great

edit : now i'm thinking about it i could hide the error messages with javascript and do a flash message when they hover over the p element.

[eluser]wiredesignz[/eluser]
So you guys, show us a good login layout, instead of just talking about it.

[eluser]xwero[/eluser]

Code:

<form action="http://domain.com/login" method="post">
<div id="content">
    <div id="msg">Enter your Username &amp; Password to continue &nbsp;</div>
    <div id="login">
        <div class="labels">
            <div class="tr">Username: </div>
            <div class="tr">Password: </div>
        </div>
        <div class="inputs">
            <div class="tr">&lt;input type="text" name="username" value="admin" maxlength="500" size="50" class="bx" /&gt;</div>
            <div class="tr">&lt;input type="password" name="password" value="" maxlength="500" size="50" class="bx" /&gt;</div>
        </div>
        &lt;input type="submit" name="btn" value=" login " id="btn" /&gt;
    </div>
</div>
&lt;/form&gt;

would be

Code:

<form action="http://domain.com/login" method="post">
<p id="msg">Enter your Username &amp; Password to continue &nbsp;</p>
<p><label for="username">Username: </label>&lt;input type="text" name="username" value="admin" maxlength="500" size="50" class="bx" /&gt;</p>
<p><label for="password">Password: </label>&lt;input type="password" name="password" value="" maxlength="500" size="50" class="bx" /&gt;</p>
<p>&lt;input type="submit" name="btn" value=" login " id="btn" /&gt;</p>
&lt;/form&gt;

[eluser]wiredesignz[/eluser]
Ok then, very nice xwero. :coolsmile:

Obviously brain freeze on my part. However, that doesn't negate the semi-usefulness of the div structure helper.

[eluser]Lone[/eluser]
Heres my chop chop

Code:

<div id="loginBox">
&lt;form action="http://domain.com/login" method="post"&gt;
  <h2>Enter your Username &amp; Password to continue &nbsp;</h2>
  <table>
    <tr>
      <td><label for="field_username">Username:</label></td>
      <td>&lt;input type="text" name="username" id="field_username" class="textbox" /&gt;</td>
    </tr>
    <tr>
      <td><label for="field_password">Password:</label></td>
      <td>&lt;input type="password" name="password" id="field_password" class="textbox" /&gt;</td>
    </tr>
  </table>
  <p>&lt;input type="submit" name="login" value=" login " id="loginBox_submit" /&gt;</p>
&lt;/form&gt;
</div>&lt;!--loginBox--&gt;

CSS

Code:

#loginBox {
    width: 600px;
    margin: 10px auto;
    background: #ebc47e;
    border: 2px solid #d98240;
}

#loginBox form {
    padding: 10px 20px 10px 180px;
    background: url(http://www.stelex.com/images/maingraphics/login_icon.gif) no-repeat 0 50%;
}

#loginBox h2 {
    font-size: 1.3em;
    letter-spacing: -1px;

}

#loginBox table {
    border-collapse: collapse;
}

#loginBox table tr td {
    display: table-cell;
    padding: 2px 4px;
}

#loginBox label {
    font-weight: bold;
}

#loginBox .textbox {
    border: 1px solid #d98240;
    background: #f9e5c2;
    padding: 2px 3px;
}

#loginBox_submit {
    border: 1px solid #942724;
    background: #d98240;
}

A few oddities you may notice:

&lt;!--loginBox--&gt; - I always comment the end of a lot of my id'd div's etc., makes it easier to come back to or finding errors

DIV around form - I use to get get around the padding/width box issue ie has as standard (use an inner element - in this case the form)

Random background image - Google image search wooooo