Database Form Functions with HTML
(Page 1 of 4 )
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.
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>
Next: Text Input Controls Operation >>
More HTML Articles
More By Chrysanthus Forcha
