PHP Forms and tables

Shicky · 22 Apr 2011 at 18:23

Quick query, is it normal practice to use tables in order to control the layout of a form in php? I thought tables were meant to be the source of all evil and not allowed in a webpage unless you needed an actual table

Pho · 22 Apr 2011 at 18:43

Depends on the developer or the form in question I guess. I prefer to use fieldsets, fieldset labels and label tags over tables where possible. Unless of course it's form fields that are set out horizontally, within a data table.

Whether you use tables or not always use the label tag where possible, to associate the question text with the answer field. This also means you can click on the question text and have the form field automatically selected.

Shicky · 22 Apr 2011 at 18:50

I quite like the box that comes with the use of fieldsets, but how do you align the input boxes vertically? It sticks in my mind that it looks dire to have them starting in different positions in terms of the x axis

Pho · 22 Apr 2011 at 20:11

You could stick span elements around the labels and use CSS to set them to a predefined width.

Here's a form I made doing that:

Shicky · 22 Apr 2011 at 21:12

Pho said:
snip

What styling did u use for that fieldset? I like the spacing

Pho · 22 Apr 2011 at 21:35

This should be it:

Code:

fieldset {
    padding: 10px 10px 20px;
}

p {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
}

The HTML is layed out like this:

Code:

<fieldset>
<legend>Update something</legend>
	<p>
		<span class="label">
			<label for="some_thing_enabled">Enabled:</label>
		</span>

		<input id="some_thing_enabled" class="checkbox" type="checkbox" checked="checked" value="checked" name="some_thing_enabled">
	</p>
	<!-- Rest of questions.. ->
</fieldset>

Shicky · 23 Apr 2011 at 17:11

Thanks for that Pho, although I dont quite understand your use of:

Code:

<label for="some_thing_enabled">

Is there some advantage to this? I've never seen use of label for?

Pho · 23 Apr 2011 at 17:22

It's for accessibility. Screen-reading software and the like can map the question text ('Enabled') to the answer field.

The LABEL element associates a label with a form control. By associating labels with form controls, authors give important hints to users of speech browsers while also allowing visual browsers to duplicate common GUI features (e.g., the ability to click on a text label to select a radio button or checkbox).

http://htmlhelp.com/reference/html40/forms/label.html

An example: http://www.htmlquick.com/reference/tags/label.html#tagexamples click on 'First name' or 'Last name' and notice how it automatically selects the text box, which doesn't have to be right next to it.