Home arrow HTML arrow Laying Out a Database Form with HTML

Laying Out a Database Form with HTML

In this tenth part of a thirteen-part series, we shall consider what changes when we use more text (a paragraph or more) and images with tabular forms. It can be difficult to do this with traditional database programming. Here it is easy because we have a recordset whose contents can be seen (the HTML table element with the default display property). All we need for an image in the recordset is a link to the image.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
September 17, 2008
  1. · Laying Out a Database Form with HTML
  2. · The Code
  3. · Body Element cont.
  4. · The Recordset

print this article

Laying Out a Database Form with HTML
(Page 1 of 4 )

Your web page should look like this:

webpage.jpg here

The Layout

You have the main HTML table for the general layout of the web page. The recordset (data) is in a DIV element. The DIV element is in a cell in the main table. As I have been saying, the recordset is an HTML table. The rows of the recordset are not as ordinary as we have seen previously. Each row of the recordset has one Table Cell. Each of these cells has one HTML table. Therefore you do not have to display a record only on one horizontal line. A record here can have text of different sizes, and can have images of different sizes. You lay out a record just as you would lay out an HTML table. Since the DIV element has scroll bars, you can still scroll up and down to see different records, each of which is a small table.

Our web page deals with watches. Each record has a title (name) for a particular watch; then text (a paragraph) that describes the watch; text (another paragraph) that shows the features of the watch; a reasonable-sized picture of the watch; the price of the watch; and a button to click and order the watch.

The title is in an HTML Text Input element. I used CSS to remove the borders of the Text Input element so that it would look like a conventional title. The description is in an HTML TEXTAREA element. When there is a large amount of text, the user can simply scroll up and down to see more text. This solves the problem of struggling to have a lot of text in a small area. The features are also in an HTML TEXTAREA element for the same reasons just mentioned.

I have not removed the borders of the TEXTAREA elements for the sake of clarity, since this is a tutorial article. You limit the width and height of the TEXTAREA elements using CSS. You do so to limit the height and width of a record. You can make the image of the watch the single element of a table cell. However, for the sake of simplicity and consistency I have made the image the background of a File Input Control. The value attribute of this control holds the path (and name) of the image in your server.

Recall that File Input Control has a text area and the browse button, which is used to locate a file. It is expected that this path should appear in the text area of the File Input Control, but my browser does not display the text. I like it this way because I do not even want the user to see the path. If your browser displays this, then that is not a big deal since it will occupy only a small portion of the image; it will not be bold or pronounced. The price is in a Text input element.

You can remove the borders of all the controls if you do not like them. Each data for the recordset is in a table cell. The “labels” e.g. “Features” are ordinary table text elements.

Note: you can format this tabular form in anyway you want. For example, you can remove all the borders of the controls, give them background colors, etc. The size of each control is specified by CSS. The aim is to have records of definite widths and heights.

Many of the other layout aspects of this page are the same as for the tabular form with only text data that we have addressed. I only address issues here that I have not addressed before.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


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