Is there a standard for generating well formatted forms?

Question

I'm wondering if there is a standard for forms. I mean, when you write a form in HTML, one usually writes it based on its needs, without taking care of its HTML structure.

I ask this because I'm working on a Form generator in PHP. I want to make something easy to use and a generated HTML code easy CSS-customizable.

There are some Form generator from Zend, Symphony but I find them a bit difficult to use. Too many concepts in Zend (a class for each type of input) and for Symfony, you must embed the whole framework.

So if we can find a rather good form structure standard for every kind of forms, it could be a nice step forward for my work and for everyone :)

Answer 1

Have you looked at the CakePHP and CodeIgniter form helpers? They might give you some good ideas for your form generator.

Answer 2

The standard is described here: http://www.w3.org/TR/html401/interact/forms.html

Not really sure what exactly you're asking about

Answer 3

A standard HTML structure for a form that is easy to style is:

<form>
    <div>
        <label for="input-text">Input text:</label>
        <input type="text" id="input-text" name="input-text"/>
    </div> 
    <div>
        <label for="select-text">Select text:</label>
        <select id="select-text" name="select-text">
            <option value="1">Yes</option>
            <option value="0">No</option>
        </select>
    </div> 
    <div class="buttons">
        <input type="submit" value="Submit"/>
        <input type="reset" value="Reset"/>
    </div>
</form>

The above allows you to use the <div> to style rows of fields, while the <label> and <input> structure makes it easy to create rows or columns of fields.

The last <div class="buttons"> allows special styling to be applied to the form's buttons.

One thing you might also want to consider is looking into the <fieldset> tag to group related fields.

Answer 4

There is no standard setup. A form starts with a form element and contains input controls. How you structure these is dependendent on what the form is supposed to submit and what the specs for your (X)HTML flavor allows.

Some developers may need fieldsets, some wont. Some may need inputs structured inside an UL, some prefer a DL. There is nothing you could standardize here without caging the developer to a particular structure. ZF solves this problem but pays with added complexity.

See

• http://www.w3.org/TR/html401/interact/forms.html (for HTML4)
• http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_forms (XHTML)
• http://www.w3.org/TR/html5/forms.html (HTML5)

Answer 5

Key things would be ensuring that the HTML is technically correct. This site will check it for you.

Its also good practice to ensure that the site is accessible - not just to avoid excluding people with disabilities - most of this is about good ergonomics and ensuring broad support for all web platforms.

FWIW, I started writing a form generator - PfP Studio - it still has a lot of rough edges and I've not found the time recently to work on it. You might also want to have a look at Prado, Radria, phpeanuts and phpformgen.

HTH

C.

Answer 6

Hello, plzease find here a valid form with all accessibility feature took in account:

<div class="user" id="user-001">
    <form method="post" action="index.html" id="userform" name="userform">
    <fieldset>
        <legend>User Data</legend>
        <div id="field-username" class="field mandatory">
            <div class="label"><label for="username">User</label></div>
            <input type="text" id="username" name="username" tabindex="1" accesskey="U" value="" default="Utilisateur" title="Please choose a unique and funny Username" size="30" maxlengtth="30" />
        </div>
        <div  id="field-firstname" class="field">
            <div class="label"><label for="firstname">Firstname</label></div>
            <input type="text" id="firstname" name="firstname" tabindex="1" accesskey="N" value="" default="nom" title="Fill your Firstname" size="30" maxlengtth="30" />
        </div>
        <div  id="field-lastname" class="field">
            <div class="label"><label for="lastname">Lastname</label></div>
            <input type="text" id="lastname" name="lastname" tabindex="1" accesskey="m" value="" default="nom" title="Fill your own Lastname" size="30" maxlengtth="30" />
        </div>
        <div id="field-password1" class="field mandatory">
            <div class="label"><label for="password1">password</label></div>
            <input type="password" id="password1" name="password1" tabindex="1" accesskey="d" value="" default="******" title="Set a personal password" size="30" maxlengtth="30" />
        </div>
        <div  id="field-password2" class="field mandatory">
            <div class="label"><label for="password2">Password again</label></div>
            <input type="password" id="password2" name="password2" tabindex="1" accesskey="d" value="" default="******" title="Set again your password for validation purpose" size="30" maxlengtth="30" />
        </div>
        <div  id="field-email" class="field" >
            <div class="label"><label for="email">Mail</label></div>
            <input type="text" id="email" name="email"  tabindex="2" accesskey="S" value="" default="[email protected]" title="Please fill-in a valide email" size="30" maxlengtth="100" />
            <div class="sample">ex: [email protected]</div>
        </div>
        <div  id="field-datestart" class="field mandatory typedate" >
            <div class="label"><label for="datestart">Active from </label></div>
            <input type="date" id="datestart" name="datestart"  tabindex="3" accesskey="C" value="" title="Input the date of user account activation." />
            <div class="sample">ex: 17/05/2010</div>
        </div>
    </fieldset>
    <div class="command">
    <button type="submit" name="send" id="send" accesskey="E" title="click here to save your modifications"><strong>S</strong>ave</button>
    </div>
    </form>
</div>

Have fun wit hHTML & CSS for Form decoration.