Home arrow HTML arrow Page 2 - Database Form Functions with HTML
HTML

Database Form Functions with HTML


In this third part to a 13-part series on building database forms with HTML, we take an in-depth look at the various form controls: how they work, how to code them, and why they work the way they do. We'll cover text input, editing, and more. You'll also learn about the navigation controls.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
July 23, 2008
TABLE OF CONTENTS:
  1. · Database Form Functions with HTML
  2. · Text Input Controls Operation
  3. · The Edit Operation
  4. · The Code

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Database Form Functions with HTML - Text Input Controls Operation
(Page 2 of 4 )

When the form (web page) opens for the first time, the text input controls are made read-only. You must make a conscious attempt to add or change data by clinking the relevant button. When you click the Add or Edit button, the text input controls are put in a state that lets you type in data. After this, they are made read-only (see how below). They remain read-only for all other modes or conditions. When the web page opens for the first time, the field values of the text input controls are the field values (first six) of the first record (row) of the recordset.

Navigation Buttons Operation

When the form comes up for the first time, the field values of the text input controls are the field values of the first row of the recordset. So the Show-First (|<<) and Show-Previous (<<) buttons are disabled. This is because you are already at the first row of the recordset; the Show-First button has to be disabled; you cannot go to any row lower than that, so the Show-Previous button also has to be disabled. If the recordset is empty the Show-Next (>>) and Show-Last buttons are also disabled; there are no rows for you to navigate to.

As you are navigating, while you are at any row between the first and last, all the navigation buttons are enabled. When you reach the last row, the Show-Next (>>) and Show-Last buttons will be disabled. If you go back until you reach the first button, the Show-First (|<<) and Show-Previous (<<) buttons will be disabled.

The Add Operation

When you click the Add button, to set the form into the add-mode, the text input controls are freed for you to type. The Edit, Delete, Find and Sort buttons are disabled. They are disabled because it is not proper for you to edit, delete, find or sort while in the add-mode.

After you have just finished typing, a row of what you have just typed cannot automatically be made in the recordset or the Transmitted Table. An event has to be triggered before the row is created in the recordset and a copy made in the Transmitted Table. It is up to us to decide what event should be triggered.

For this, I decided that if any of the enabled buttons is clicked, the text input controls should be made read-only; a row of the information typed should be created in the recordset; and a copy of this row should be added to the Transmitted Table. Then any button that was disabled, because the Add button was clicked, becomes enabled. This action (enabling) ends the add process (add-mode).


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 5 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials