Form helper - Layout?

[eluser]austintbiggs[/eluser]
When creating a form using the form helper I'm only able to get the inputs stacked vertically; what I'm aiming for is to place them side by side horizontally.

Here's the code I've got:

Code:

<?php
    echo form_open('membership/validate_credentials');
    echo form_input('username', 'Username');
    echo form_password('password', 'Password');
    echo form_submit('submit', 'Login');
    echo form_close();
   ?>

Any and All help is appreciated [:

[eluser]Lunaticon[/eluser]
Why don't you use tables? The form helper is just creating the html for you. I've you would have done the same by writing it manually you also would use tables, wouldn't you?

[eluser]cominus[/eluser]
No offense intended, but tables seldom lead to good style. Why not try css. Add <div>tags in your code and style them with a style sheet, as in the examples below.

Style code (stylesheet):

Code:

/* Forms -------- */
/* login */
#form_login {
    width:350px;
    margin:0 auto;
    border:1px dashed #999;
    padding:5px;
}
#member_email {
    float:right;
}
#password {
    float:right;
}

Sample div tag for the form and the fields. Instead of shortcutting the fields in the form, give them name and id, etc. using the id to style each field. As in this example. In your case, one field could float left and the other right. That would line them up horizontal.

Code:

<div id="form_login">

    <div id="form_login">

    &lt;?php echo validation_errors();?&gt;
    
    &lt;?php echo form_open('login/loggedin'); ?&gt;
    &lt;?php echo form_fieldset('Login Form'); ?&gt;<br /><br />
    &lt;?php echo form_label('Member Email','member_email'); ?&gt;
        &lt;?php $email_data = array(
                        'name' => 'member_email',
                        'id' => 'member_email',
                        'value' => '',
                        'maxlength' => '60',
                        'size' => '30'
                        );
        echo form_input($email_data);
        ?&gt;<br /><br />
    &lt;?php echo form_label('Password','password'); ?&gt;
        &lt;?php $password_data = array(
                        'name' => 'password',
                        'id' => 'password',
                        'value' => '',
                        'maxlength' => '60',
                        'size' => '30'
                        );
        echo form_password($password_data);
        ?&gt;<center><br /><br />
    &lt;?php echo form_submit('loginsubmit','Submit Login'); ?&gt;
    <br /><br /></center>
    &lt;?php echo form_fieldset_close(); ?&gt;
    &lt;?php echo form_close(); ?&gt;

</div>

Hope this is helpful.

[eluser]Lunaticon[/eluser]
well, I agree with you. Tables aren't good to style. But for a few things they're still useful. I always use them for registration things and style them with css afterwards. You can say that you should only use table when you need a tabular structure.

But in general you are right. Tables absolutely should not be used to style webpages.

[eluser]cominus[/eluser]
[quote author="Lunaticon" date="1302143626"]well, I agree with you. Tables aren't good to style. But for a few things they're still useful. I always use them for registration things and style them with css afterwards. You can say that you should only use table when you need a tabular structure.

But in general you are right. Tables absolutely should not be used to style webpages.[/quote]

No problem. I agree with your approach and I used to hold tables in the same view. But as I learned more about styling, tables became obsolete. But I wasn't looking to step on toes and I hope I am not now. Just to say, if you look more into css, you will find you'll never need tables again.

[eluser]cominus[/eluser]
RE tables: for example, in the css above, I built a box around the form, instead of a table. It is not mandatory to give the box a border, as is the case in the css above. I can place this box anywhere I want - in this case, it is centered (margin:0 auto.

Then, the two id tags/fields can be placed anywhere in the box. In this case, they are both to the right because I have labels to the left and the fields are stacked. However, one field could be placed right and the other left for a horizontal display - and this is done without table cells.

Hope this is helpful.