Data Object

Forms Using Tables

A formatting option often used with forms is an html table. By creating a table with two columns and multiple rows, the programmer can align data input widgets and the descriptive labels that go along with them.

The discussion below describes a basic html form that is embedded in a table. It also illustrates the use of multiple submit buttons, each with its own name and value attribute, that can be used to signal different user actions.

Example Table

Notice that the table is "live" in the sense that you can click on a button and see the reflect back the various data included in the table as well as an indication of the intended user action.

HTML code for the Example Table

<form action="http://wwwj.cs.unc.edu:8888/jbs/servlet/jbsGetPostEcho" method="post">
<H3 align="center">Data Object: Person</H3>
<input type="hidden" name="dataObject" value="Person">
<table cellpadding="0" cellspacing="4" width="100%" border="0">
<tr>
<td align="right" width="20%"><b>PersonID</b></td>
<td align="left" width="60%"><input type="text" size="25" name="personID" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>First Name</b></td>
<td align="left" width="60%"><input type="text" size="25" name="nameFirst" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>Middle Name</b></td>
<td align="left" width="60%"><input type="text" size="25" name="nameMiddle" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>Last Name</b></td>
<td align="left" width="60%"><input type="text" size="25" name="nameLast" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>Address</b></td>
<td align="left" width="60%"><input type="text" size="25" name="address" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>City</b></td>
<td align="left" width="60%"><input type="text" size="25" name="city" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>State</b></td>
<td align="left" width="60%"><input type="text" size="25" name="state" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>Zip Code</b></td>
<td align="left" width="60%"><input type="text" size="25" name="zip" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>Home Phone</b></td>
<td align="left" width="60%"><input type="text" size="25" name="phoneHome" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>Work Phone</b></td>
<td align="left" width="60%"><input type="text" size="25" name="phoneWork" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>Fax</b></td>
<td align="left" width="60%"><input type="text" size="25" name="phoneFax" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>Cell Phone</b></td>
<td align="left" width="60%"><input type="text" size="25" name="phoneCell" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>Email</b></td>
<td align="left" width="60%"><input type="text" size="25" name="email" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>URL</b></td>
<td align="left" width="60%"><input type="text" size="25" name="url" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>Date Created</b></td>
<td align="left" width="60%"><input type="text" size="25" name="dateCreated" value=""></td>
</tr>
<tr>
<td align="right" width="20%"><b>Date Modified</b></td>
<td align="left" width="60%"><input type="text" size="25" name="dateModified" value=""></td>
</tr>
<tr>
<td align="right" width="20%"></td>
<td margin-left="2" align="left" width="60%">
<input type="submit" value="Add" name="userAction" style="background-color: rgb(252, 250, 204)">
<input type="submit" value="Search" name="userAction" style="background-color: rgb(224, 250, 226)">
<input type="submit" value="Update" name="userAction" style="background-color: rgb(252, 250, 204)">
<input type="submit" value="Delete" name="userAction" style="background-color: rgb(254, 219, 219)">
<input type="submit" value="Clear" name="userAction" style="background-color: rgb(224, 250, 226)">
<input type="reset" value="Reset" name="userAction" style="background-color: rgb(224, 250, 226)"></td>
</tr>
<tr>
<td align="right" width="20%"></td>
<td align="left" width="60%"><input type="submit" value=" << " name="userAction" style="background-color: rgb(163, 200, 250)"><input type="submit" value="  <  " name="userAction" style="background-color: rgb(163, 200, 250)"><input type="submit" value="  >  " name="userAction" style="background-color: rgb(163, 200, 250)"><input type="submit" value=" >> " name="userAction" style="background-color: rgb(163, 200, 250)"></td>
</tr>
<tr>
<td align="right" width="20%"><b>Messages:</b></td>
<td align="left" width="60%"><textarea rows="4" cols="25" name="messages"></textarea></td>
</tr>
<tr>
<td align="right" width="20%"></td>
<td align="left" width="60%"><input type="submit" value="Select Table" name="userAction" style="background-color: rgb(224, 250, 226)"></td>
</tr>
<tr>
<td align="right" width="20%"></td>
<td align="left" width="60%"><input type="submit" value="Quit" name="userAction" style="background-color: rgb(252, 250, 204)"></td>
</tr>
</table>
</form>

PersonID
First Name
Middle Name
Last Name
Address
City
State
Zip Code
Home Phone
Work Phone
Fax
Cell Phone
Email
URL
Date Created
Date Modified


Messages: