Introduction to Database Forms with HTML - Single-Row Forms
(Page 4 of 4 )
The following diagram shows a Single-Row Form.
Fig.1. Single-Row Form
With this form the content of the recordset is shown one row at a time. The form in the figure displays rows of employee data from a company. We shall design this form using HTML, CSS, JavaScript, and a recordset of an HTML TABLE element. First of all, I will let you know what the form does.
At the top of the form you have the title of the form: Employee Information. The top-right area of the form gives you the row number of the recordset and the total number of records (rows). Coming down on the form, you see the labels and their corresponding field values. If you look at the bottom-right of the form, you should see some buttons with the text; |<<, <<, >>, and >>|. These are navigation buttons. The button with |<< will show the first row of the recordset when clicked. The button with << will show the previous row of the recordset. The button with >> will show the next row (forward) and the button with >>| will show the last row.
The form has the following buttons: Add, Edit, Delete, Clear, Find, Sort, Save and Done. When the form appears you cannot do anything to the field values. In order to add a row (record) to the recordset, you must click the Add Button first. In order to edit a row you must click the Edit button first. In order to Delete a row in the recordset, you must click the Delete Button first. In order to Clear the contents of the field of the form (not the values of the row in the recordset), you click the Clear Button.
The recordset can be very long (have many rows); using the navigation buttons will take you a long time (too many clicks), before you arrive at a particular row you may be looking for. So to go to a particular row, that is, to show a particular record you click the Find Button: a Find dialog box appears; you type in keywords and click the OK button of the dialog box; the dialog box disappears; the form code looks for the record and show the data in the fields of the form. When you are navigating the recordset using the navigation buttons, you may realize that the records (rows) are not in the sorted order that you want. You can use the Sort button. This process works in a similar way to that of the Find Button.
The three main things you do to a recordset are to add a record (row), edit a record and delete a record. You can then save these changes to the database. This is why you have the Save button. When the browser brings out (displays) the form, you can process the data of the recordset using the features I have mentioned above. When you are through, you click the Done button. The Done Button saves any data you might not have saved, with your acknowledgment, and then closes the Browser window.
We shall see how all this is achieved using code in the series.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 5 
