Home arrow HTML arrow Page 2 - Completing Construction of a Database Form with HTML
HTML

Completing Construction of a Database Form with HTML


In this conclusion to a thirteen-part series on building database forms with HTML, I will talk about the program that receives the data of the transmitted table at the server. I will show you how to do it using CGI and Perl. Recall that the data is actually HTML Form elements sent from the client’s computer.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
October 08, 2008
TABLE OF CONTENTS:
  1. · Completing Construction of a Database Form with HTML
  2. · The Body Element
  3. · The Third Main Row
  4. · The Last Two Rows
  5. · Cgi-bin Directory
  6. · Brief Explanation of the Web Page Code

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Completing Construction of a Database Form with HTML - The Body Element
(Page 2 of 6 )

Again, to simplify things, the table of the body element is the Transmitted Table. After going through this part, you will be able to fit the information to the rest of the series. If I do the fitting, the series, which already extends to thirteen parts, will become too long.

This is the start of the body element and the first main row:

<body>


<form action="http://localhost/cgi-bin/receiveData.pl" method="post" enctype="multipart/form-data">


<!-- Transmitted Table -->

<table id="TransmittedTable">

<tbody>

<tr id="TR0">

<td>

<table cellspacing="0" cellpadding="0" border="1">

<tbody>

<tr>

<td colspan="3" id="TD00"><input type="hidden" name="W0" value="W0"><input type="text" name="T00" value="Square Pink Dial Women's Leather Watch"></td>

</tr>

<tr>

<td id="TD01">

<textarea style="width:245px;height:90px" name="Dn01" rows="1" cols="20">An attractive case in a polished silvertone finish, this JLO timepiece features a metallic pink dial and matching leather strap, making it a distinctive addition to any woman's wardrobe.</textarea>

</td>

<td id="TD02">

<textarea style="width:245px;height:90px" name="F02" rows="1" cols="20">Polished silvertone square case. Stainless steel caseback. Silvertone hands. Funky 3, 6, and 9 numbers. JLO logo at 12 o'clock. Metallic pink dial. Japanese quartz movement. Pink leather strap. Tang buckle.</textarea>

</td>

<td rowspan="2" id="TD03">

<input type="file" class="file" name="Pi03" value="watch1.jpg">

</td>

</tr>

<tr>

<td id="TD04">

<input type="text" name="Pr04" value="39.95">

</b>

</td>

<td id="TD05">

<input type="text" name="De05" value="ADDED">

</td>

</tr>

</tbody>

</table>

</td>

</tr>

There are five main rows for the table. Each main row has one cell. That one cell has the controls that make up one record. One record has one table. The configuration of the table is like that of the record table in the recordset, in the previous part. This simplifies the program code that relates to the recordset and the Transmitted table.

Let me emphasize here that the text for the TEXTAREA element can be very large. There is no problem with that, since the problem of download time can be solved today. I intend to write an article on that. This large amount of text will not occupy too much space since the TEXTAREA element has small dimensions. By default the TEXTAREA element has the vertical scroll bar. The user can use this to scroll down if he finds the content interesting.

This is the second main row:

<tr id="TR1">

<td>

<table cellspacing="0" cellpadding="0" border="1">

<tbody>

<tr>

<td colspan="3" id="TD10"><input type="hidden" name="W1" value="W1"><input type="text" name="T10" value="Platinum Rhinestone Lined Fashion Wrist Watch"></td>

</tr>

<tr>

<td id="TD11">

<textarea style="width:245px;height:90px" name="Dn11" rows="1" cols="20">Glittering rhinestones set on a stylish silverplated case make this cuff watch a dazzling fashion accessory.</textarea>

</td>

<td id="TD12">

<textarea style="width:245px;height:90px" name="F12" rows="1" cols="20">2-mm rhinestone border. Silverplated case. Base metal band with faux leather overlay. Stainless steel caseback. White dial with black numbers and hands. Hinged cuff. Japanese quartz movement. Case dimensions: 32 mm wide x 39.4 mm long x 8 mm thick. Bracelet dimensions: 14 mm wide x 6 inches long.</textarea>

</td>

<td rowspan="2" id="TD13">

<input type="file" name="Pi13" value="watch2.jpg">

</td>

</tr>

<tr>

<td id="TD14">

<input type="text" name="Pr14" value="29.95">

</b>

</td>

<td id="TD15">

<input type="text" name="De15" value="ADDED">

</td>

</tr>

</tbody>

</table>

</td>

</tr>


At this point I want you to note that each control has a name and value (content). The HTML specification requires that each control must have a name and value (content); and any form control that does not have a name/value pair is invalid. Each control is in one table cell.

Note the way I have given the name of the control. The name starts with one or two letters of the alphabet, then the main row number and then the record position number. This naming system will help us to identify the records at the server. All of the names are unique.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 9 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials