Home arrow HTML arrow 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 / 7
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

Database Form Functions with HTML
(Page 1 of 4 )

FORM OPERATION

This is the diagram of the form for easy reference.



Before you add a record to the recordset, you must click the Add button; this puts you in the add-mode. Before you edit a record, you must click the Edit button; this puts you in the edit-mode. You can only type text into the text input controls when you are in the Add or Edit mode. Depending on the state of the form, some buttons are enabled and others are disabled. All this is to protect the user from accidentally changing his data. It also makes the use of the form convenient.

The default state of the HTML Input element allows you to type in text. So we have to always put these Input controls in the read-only state to prevent the user from accidentally changing his own data.

For information, note that any button in its default state is enabled.

Each button has an effect only on one row of the recordset; that is, clicking any button affects only one row at a time.

Each element in the form has an ID.

Each button has an event associated with it. The following code segment shows the code for the Add, Edit, Delete and Clear buttons:

<button type="button" id="A1" onclick="addRow()"> Add </button>

<button type="button" id="E1" onclick="editRow()"> Edit </button>

<button type="button" id="D1" onclick="deleteRow()"> Delete </button>

<button type="button" id="C1" onclick="clearAdd()"> Clear </button>



blog comments powered by Disqus
HTML ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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