HTML and CSS

Forms and Web standards

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Sep 2006

Posts: 162

Reputation: Cerberus is an unknown quantity at this point

Solved Threads: 14

Cerberus

Offline

Junior Poster

Forms and Web standards

Sep 30th, 2007

Hi. I was wondering if there was a 'best practice' for formatting an html form. I assume that you are not supposed to use tables for this.

Any ideas?

Thanks.

•

Join Date: Mar 2007

Posts: 21

Reputation: Shaffer is an unknown quantity at this point

Solved Threads: 2

Shaffer

Offline

Newbie Poster

Re: Forms and Web standards

Sep 30th, 2007

Hello,
I am sorry, but I really don't know what you mean...
Can you please be more specific?

Shaffer.

•

Join Date: Feb 2005

Posts: 427

Reputation: autocrat is on a distinguished road

Solved Threads: 12

autocrat

Offline

Posting Pro in Training

Re: Forms and Web standards

Sep 30th, 2007

Well...

Use the <fieldset> tag to collect related parts of the form together (if a large form).

Apply <legend> to help indicate what the form pertains to.

Ensure all Inputs have a <label> tag.
Also ensure all Labels/Inputs have unique IDs.

The label should go first for most inputs, (text, text area etc.), and last for things like Checkbox lists, radio groups etc.

Use the font-size tag for the Label/Inputs, using % or EM units.

Apply styling for :focus for inputs so that users can see which form element that are currently in (such as changing the BG colour or altering the Border Colour etc.).
(NOTE: doesn't work on IE6.)

Consider applying a little JS to enhance usability (autofocus the first part of a form and enable IE6 to use the :focus).

-------

If it helps....

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>
<title>Center Block Element 2</title>
<style type="text/css">
 
html
{
margin: 0;
padding: 0;
font-size: 100%;
font-family: trebuchet, arial, sans-serif;
}
 
body
{
margin: 0;
padding: 10px;
font-size: 62.5%;
}
 
form
{
margin: 0;
padding: 0;
width: 500px;
}
 
fieldset
{
margin: 0;
padding: 10px;
border: 1px solid #d6d6d6;
display: block;
}
 
legend
{
margin: 0 0 15px 0;
padding: 4px 8px;
border: 0px solid #d6d6d6;
font-weight: bold;
font-size: 1.6em;
background-color: #000000;
color: #ffffff;
}
 
 
.formelementwrappersingle
{
margin: 2px;
padding: 0;
float: left;
clear: both;
width: 40em;
border: 1px solid #c2c2c2;
background-color: #f6f6f6;
}
 
.formelementwrapperdoubleinline
{
margin: 2px;
padding: 0;
float:left;
width: 19em;
border: 1px solid #c2c2c2;
background-color: #f6f6f6;
}
.formelementwrapperdoublebreak
{
margin: 2px;
padding: 0;
float:left;
clear: both;
width: 19em;
border: 1px solid #c2c2c2;
background-color: #f6f6f6;
}
 
label
{
margin: 0;
padding: 3px;
font-weight: bold;
display: block;
width: 15em;
float: left;
font-size: 1.2em;
 
}
 
input.textinput, textarea.textarea
{
background-color: #ffff99;
font-size: 1.4em;
border: 1px solid #c2c2c2;
}
 
input.textinput:focus, textarea.textarea:focus
{
background-color: #ffffff;
font-size: 1.4em;
border: 1px solid #d6d6d6;
}
 
 
</style>
 
</head>
 
 
<body>    
 
 
<form>
 
<fieldset>
<legend>Test Form 1</legend>
 
<div class="formelementwrappersingle">
<label for="name">
Name
</label>
<input id="name" name="name" type="text" class="textinput" />
</div>
 
 
<div class="formelementwrappersingle">
<label for="description">
Description
</label>
<textarea id="description" name="description" class="textarea"></textarea>
</div>
 
</fieldset>
 
 
 
 
<fieldset>
<legend>Test Form 2</legend>
 
<div class="formelementwrapperdoubleinline">
<label for="colourchoice_0">
  <input type="radio" name="colourchoice" id="colourchoice_0" title="Red" class="radioinput" checked="checked" />
    Red
</label>
</div>
<div class="formelementwrapperdoubleinline">
<label for="colourchoice_1">
  <input type="radio" name="colourchoice" id="colourchoice_1" title="Blue" class="radioinput" />
    Blue
</label>
</div>
 
</fieldset>
 
 
 
 
<fieldset>
<legend>Test Form 3</legend>
 
<div class="formelementwrapperdoublebreak">
<label for="animalchoice_0">
  <input type="radio" name="animalchoice" id="animalchoice_0" title="Cat" class="radioinput" checked="checked" />
    Cat
</label>
</div>
<div class="formelementwrapperdoublebreak">
<label for="animalchoice_1">
  <input type="radio" name="animalchoice" id="animalchoice_1" title="Dog" class="radioinput" />
    Blue
</label>
</div>
 
</fieldset>
 
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>
<title>Center Block Element 2</title>
<style type="text/css">

html
{
margin: 0;
padding: 0;
font-size: 100%;
font-family: trebuchet, arial, sans-serif;
}

body
{
margin: 0;
padding: 10px;
font-size: 62.5%;
}

form
{
margin: 0;
padding: 0;
width: 500px;
}

fieldset
{
margin: 0;
padding: 10px;
border: 1px solid #d6d6d6;
display: block;
}

legend
{
margin: 0 0 15px 0;
padding: 4px 8px;
border: 0px solid #d6d6d6;
font-weight: bold;
font-size: 1.6em;
background-color: #000000;
color: #ffffff;
}


.formelementwrappersingle
{
margin: 2px;
padding: 0;
float: left;
clear: both;
width: 40em;
border: 1px solid #c2c2c2;
background-color: #f6f6f6;
}

.formelementwrapperdoubleinline
{
margin: 2px;
padding: 0;
float:left;
width: 19em;
border: 1px solid #c2c2c2;
background-color: #f6f6f6;
}
.formelementwrapperdoublebreak
{
margin: 2px;
padding: 0;
float:left;
clear: both;
width: 19em;
border: 1px solid #c2c2c2;
background-color: #f6f6f6;
}

label
{
margin: 0;
padding: 3px;
font-weight: bold;
display: block;
width: 15em;
float: left;
font-size: 1.2em;

}

input.textinput, textarea.textarea
{
background-color: #ffff99;
font-size: 1.4em;
border: 1px solid #c2c2c2;
}

input.textinput:focus, textarea.textarea:focus
{
background-color: #ffffff;
font-size: 1.4em;
border: 1px solid #d6d6d6;
}


</style>

</head>


<body>    


<form>

<fieldset>
<legend>Test Form 1</legend>

<div class="formelementwrappersingle">
<label for="name">
Name
</label>
<input id="name" name="name" type="text" class="textinput" />
</div>


<div class="formelementwrappersingle">
<label for="description">
Description
</label>
<textarea id="description" name="description" class="textarea"></textarea>
</div>

</fieldset>




<fieldset>
<legend>Test Form 2</legend>

<div class="formelementwrapperdoubleinline">
<label for="colourchoice_0">
  <input type="radio" name="colourchoice" id="colourchoice_0" title="Red" class="radioinput" checked="checked" />
    Red
</label>
</div>
<div class="formelementwrapperdoubleinline">
<label for="colourchoice_1">
  <input type="radio" name="colourchoice" id="colourchoice_1" title="Blue" class="radioinput" />
    Blue
</label>
</div>

</fieldset>




<fieldset>
<legend>Test Form 3</legend>

<div class="formelementwrapperdoublebreak">
<label for="animalchoice_0">
  <input type="radio" name="animalchoice" id="animalchoice_0" title="Cat" class="radioinput" checked="checked" />
    Cat
</label>
</div>
<div class="formelementwrapperdoublebreak">
<label for="animalchoice_1">
  <input type="radio" name="animalchoice" id="animalchoice_1" title="Dog" class="radioinput" />
    Blue
</label>
</div>

</fieldset>

</form>
</body>
</html>

Last edited by autocrat; Sep 30th, 2007 at 12:33 pm. Reason: Code

Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)

•

Join Date: Sep 2006

Posts: 162

Reputation: Cerberus is an unknown quantity at this point

Solved Threads: 14

Cerberus

Offline

Junior Poster

Re: Forms and Web standards

Sep 30th, 2007

That's a really good example. Thank you.

•

Join Date: Feb 2005

Posts: 427

Reputation: autocrat is on a distinguished road

Solved Threads: 12

autocrat

Offline

Posting Pro in Training

Re: Forms and Web standards

Sep 30th, 2007

Not a problem - let me know if you want any extra help with it (Forms can be a sod sometimes (esp. if you don't do them that often!)

Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: Forms and Web standards

Oct 7th, 2007

Tables are not deprecated. They are just discouraged for use to format pages for purposes other than tables.

If the form is like an invoice form (with several blanks on each line), there is no reason why you shouldn't use a table to contain it.

Also, the alternate methods the W3C prefers don't always work, don't work inside some other tags, and fall apart if the browser window is reduced in size. So, if you can't get it to work, don't waste hours on it; just use a table instead.

Daylight-saving time uses more gasoline