Formatting Form Fields with a Table

blueline.gif (1205 bytes)

This page contains a multi-field form, with form fields organized by positioning them within a table.  The  HTML code used to produce the form follows.   Feedback received when this form was transmitted as an email message.  This same form with table borders displayed.

Name: Email Address:
Year in School: Age: 18-29  30-49  Over 49
Major: ART    BIO    CIS    CSC   EDU   ENG   MTH   PHY
Favorite Class:
ART 115 BIO 112 CSC 263 		Marital Status:
Single Married Divorced Widowed
Comments:

HTML code to produce this form:

I have color coded the form fields and tags in red, the table fields and tags in blue, and field values in bluegreen to help you sort out all of the text below.  In addition I have indented text for table columns, and each form field entry.

<FORM  ACTION="mailto:hickslm@flint.umich.edu"   ENCTYPE="text/plain"   METHOD="post" >

<table border="0" width="100%" cellspacing="0" cellpadding="10">
<tr>

<td> Name: <input TYPE="text" NAME="name" SIZE="30"> </td>
<td> Email Address:<input TYPE="text" NAME="email" SIZE="20"> </td>

</tr>
<tr>

<td> Year in School:

<select NAME="My Menu" SIZE="3">

<option>Freshman</option>
<option>Sophomore </option>
<option>Junior </option>
<option>Senior </option>
<option>Graduate </option>
<option>NCFD </option>

</select>

</td>

<td> Age:

<input TYPE="radio" NAME="age" VALUE="genx">18-29&nbsp;
<input TYPE="radio" NAME="age" VALUE="30something">30-49&nbsp;
<input TYPE="radio" NAME="age" VALUE="OverTheHill">Over 49

</td>

</tr>
<tr>

<td colspan="2"> Major:

<INPUT  TYPE="checkbox" NAME="Major" VALUE="ART"> ART &nbsp;&nbsp;
<INPUT  TYPE="checkbox" NAME="Major" VALUE="BIO"> BIO &nbsp;&nbsp;
<INPUT  TYPE="checkbox" NAME="Major" VALUE="CIS">CIS &nbsp;&nbsp;
<INPUT  TYPE="checkbox" NAME="Major" VALUE="CSC">CSC&nbsp;&nbsp;
<INPUT  TYPE="checkbox" NAME="Major" VALUE="EDU"> EDU&nbsp;&nbsp;
<INPUT  TYPE="checkbox" NAME="Major" VALUE="ENG"> ENG&nbsp;&nbsp;
<INPUT  TYPE="checkbox" NAME="Major" VALUE="MTH"> MTH&nbsp;&nbsp;
<INPUT  TYPE="checkbox" NAME="Major" VALUE="PHY"> PHY

</td>

</tr>
<tr>

<td> Favorite Class:<br>

<input TYPE="checkbox" NAME="Class" VALUE="ART"> ART 115
<input TYPE="checkbox" NAME="Class" VALUE="BIO"> BIO 112
<input TYPE="checkbox" NAME="Class" VALUE="263">CSC 263

</td>
<td>Marital Status: <br>

<input TYPE="radio" NAME="MStatus" VALUE="single"> Single
<input TYPE="radio" NAME="MStatus" VALUE="married"> Married
<input TYPE="radio" NAME="MStatus" VALUE="divorced"> Divorced
<input TYPE="radio" NAME="MStatus" VALUE="widowed"> Widowed

</td>

</tr>
<tr>

<td colspan="2">Comments:<br>

<TEXTAREA NAME="Feedback Comments" WRAP ROWS="5" COLS="60">
</TEXTAREA>

</td>

</tr>
<tr>

<td> <p align="center">

<input TYPE="submit"  VALUE="Send">

</td>
<td> 

<input TYPE="reset"  VALUE="Reset All Fields">

</td>

</tr>

</table>
</form>

        

Last updated on 02/09/2009  by L.M. Hicks