Welcome Guest, Not a member yet? Register   Sign In
Form structure
#1

[eluser]TheFuzzy0ne[/eluser]
Hi everyone. I'm having a bit of a problem designing a HTML form, and wanted to ask for some input (no pun intended).

First of all, I like all my code to be valid, which isn't a problem. The problem I am experiencing is that I am trying to create a Web site for a client, but he is the kind of client that needs to be reminded to left-click and not right-click on URLs. I am trying to make a form that's simple and idiot-proof, but I am coming unstuck with getting the information I need into the form, in an easy to understand manner.

I'd like to include a description of each field (i.e a description of the data that's expected), and also allow for error reporting inline with the erroneous inputs. I only have 570px width to work with. Can anyone suggest a good, valid layout that doesn't require JavaScript, or should I cheat and use tables?

I'd like to avoid tables, but I've noticed that even the most competent developers often resort to using them. I assume this isn't due to laziness, but because tables are more suited to that particular task.

I'd appreciate any advice, or online examples. I've found plenty of tutorials that demonstrate tableless forms, but I couldn't seem find any that account for inline error messages and descriptions.

Many, many thanks in advance.
#2

[eluser]Crimp[/eluser]
Use tables. If you have a mix of form elements, they can be a real pain to align in different browsers. Set up a conditional in your form that alternately displays the instructions for filling out the field and the error, form_error('field'), if the user made a mistake and validation failed.
#3

[eluser]Michael Wales[/eluser]
If you only have 570px to work with, I would go the over-under method with a small icon (green check or red X) to the right of the input field. Over-under has been shown to be easier on users anyways.

Code:
<?php echo form_open('users/profile'); ?>
<p><label for="real_name">Real Name</label>
&lt;input type="text" name="real_name" id="real_name" maxlength="40" /&gt;
<span class="real_name_validation"></span>
Your real first and last name</p>

<p><label for="email_address">Email Address</label>
&lt;input type="text" name="email_address" id="email_address" maxlength="120" /&gt;
<span class="email_address_validation"></span>
Your personal email address</p>

<p>&lt;input type="submit" value="Update" /&gt;&lt;/p>
&lt;?php echo form_close(); ?&gt;

Some basic CSS:
Code:
p {color:#666;font-size:0.8em;}
label {color:#222;display:block;font-weight:bold;}
.valid {background:transparent url(ok.png) no-repeat center center;min-height:25px;min-width:25px;}
.invalid {background:transparent url(error.png) no-repeat center center;min-height:25px;min-width:25px;}

Finally, use some jQuery to submit AJAX calls to your validation method. On a valid entry, addClass('valid') to the fieldID + '_validation' span. Likewise, with the invalid class, on an invalid entry.
#4

[eluser]TheFuzzy0ne[/eluser]
Thank you both for your input. You both make very good points, but I think I'm going to go with Michael on this one. Great solution!




Theme © iAndrew 2016 - Forum software by © MyBB