Put a MySQL Database on the Web:
Step by Step Tutorial

Step #5: Ajax PHP Forms Feature Tour

The data entry forms are launched by editing an existing record or adding a new one from within the Data Grid. 

Apeel PHP Code Generator Pro chooses the most appropriate type of editor based on the type of field (and can be changed - more on that in next section).


Numeric Fields

Numeric fields prevent entry of non-numeric characters. Decimal fields will additionally allow a single period (.) (Example below from Film Data Entry Form).

Numeric Field

Radio Buttons

Integer, Text and Enum fields can be rendered as Radio Buttons. (Example below from Film Data Entry Form).

Radio Button Field

Rich Text Fields

Large text fields can be rendered as a CK Editor (below) or as a standard TextArea box. (Example below from Film Data Entry Form).

Rich Text Field

Dropdown List

The functionality of a dropdown list should already be familiar to you.  The display values can be populated from a hardcoded list, or they can be retrieved from a lookup table. In the latter case, the display value can be made up of 1 or more fields from the lookup table.  e.g. in the example below taken from the Customer Data Entry Form, the Store dropdown shows the Manager Name and the Address of the store.

Dropdown Fields


An Autocomplete field allows you to enter a few characters and values that match appear below in a list to choose from. At build time you can decide whether to match values contained within the description (as in the example below) or whether to only match values that Begin With the entered value.

PHP Code Generator Pro decides whether to use a dropdown list or Autocomplete field based on the number of records currently in the table. i.e. a dropdown list is ideal with less than 50 options, but an Autocomplete makes much more sense when there are hundreds or even thousands of options to choose from.

This example is from the Address Data Entry Form and is showing cites which contain the entered value (Tam):

Autocomplete Fields

Search Lookup Form

(None created by default in Sakila) A search form is used where the user needs to be able to match a record on multiple criteria.   For example, imagine a company with 20,000 clients - an autocomplete field based on first name and last name may not be enough to identify the particular client. 

The Search Form provides a solution by bringing up the data grid for that particular table / data object and allows the user to use all the filtering options available on the grid to select the desired record. 

Date/Time Picker

Date Fields show the selected month, along with dropdown to select month and year. Date/Time fields (and time fields) additionally have sliders for setting the time. Dates are displayed in the users locale format - in this example (from the Customer Data Entry Form) the date is shown in UK format (i.e. DD MMM YYYY HH:MM).

Date/Time Picker Fields

Upload Fields

There are two types of upload field - File and Image. File Upload fields show a clickable icon if a file has been uploaded, and image fields show the actual image. In both cases an upload box is placed below. (The following example is from the Staff Data Entry Form)

Upload Field

Set Fields

Set fields (a MySQL field type which allows you to select 1 or more options from a hard-coded list) is rendered as checkboxes where 0 or more can be ticked. This example is from the Film Data Entry Form:

Set Fields


One film can have many Categories so a "middle" table called film_category exists to link the two. 

The Dualist allows the user to select one or more Categories in the "available"" box and move them over to the "Selected" box. 

Dualist (All) Fields

The basic type of Dualist as used for Languages lists all the available options, however when there are too many options to list all available options such as in the Actors table there is an alternative version with an autocomplete box to select the "Available" options. 

Dualist (Autocomplete) Fields


When you save a record to the database it first checks any validation rules you have set. It first checks them on the client side, but if the user manages to circumvent this protection then it also validates the data on the server side too.


Now that you are familiar with the Data Entry forms you are ready to move on to the next section Step #6: Advanced Options & Polishing