Cambridge IGCSE ICT 0417 – 18 Databases: Data Entry Forms
18 Databases – Creating a Data Entry Form
Learning Objective
By the end of this lesson you will be able to design and build a data entry form that includes:
Specified text fields, numeric fields and date fields
Appropriate font styles and sizes for headings and input areas
Consistent spacing between fields and within field characters
Effective use of white space to improve readability
Radio buttons, check boxes and drop‑down menus for selection
Key Design Considerations
Font style and size – Headings are usually bold and larger (e.g., 14 pt) while input fields use a regular, readable size (e.g., 10 pt).
Vertical spacing – Insert a blank line or a small margin between each label‑field pair to avoid crowding.
Character spacing (letter spacing) – For fields such as “Postcode” or “Phone Number”, a fixed‑width font helps users see each character clearly.
White space – Leave unused areas around groups of related fields (e.g., personal details vs. contact details) to separate sections visually.
Control types – Choose the most suitable control:
Radio buttons for a single choice from a small set.
Check boxes for multiple selections.
Drop‑down menus for longer lists where space is limited.
Typical Form Layout
The following table shows a common arrangement of fields and the corresponding HTML control.
Field Description
Control Type
HTML Example
Student Name
Single‑line text box
<input type="text" name="student_name">
Date of Birth
Date picker
<input type="date" name="dob">
Gender
Radio buttons (Male / Female / Other)
<input type="radio" name="gender" value="M"> Male<input type="radio" name="gender" value="F"> Female
<input type="radio" name="gender" value="O"> Other
Subjects Studied
Check boxes (allow multiple)
<input type="checkbox" name="subject" value="Math"> Mathematics<input type="checkbox" name="subject" value="Science"> Science
<input type="checkbox" name="subject" value="ICT"> ICT
Class
Drop‑down menu
<select name="class"> <option value="10A">10A</option>
<option value="10B">10B</option>
<option value="10C">10C</option>
</select>
Step‑by‑Step Construction of the Form
Start the form with the <form> element and give it a meaningful action attribute.
For each field:
Place a <label> element before the control. Use the for attribute to link it to the control’s id.
Choose the appropriate control (input, select, etc.).
Insert a line break (<br>) or a blank paragraph to create vertical spacing.
Group related fields using <fieldset> and <legend> (optional, not required for the exam).
End the form with a submit button: <input type="submit" value="Submit">.
Sample Form (No Styling)
Suggested diagram: Layout of the form showing headings, spacing, and grouping of related fields.
Common Pitfalls to Avoid
Leaving no space between label and input – makes the form hard to read.
Using the same name attribute for unrelated controls – can cause data to be overwritten.
For radio buttons, forgetting to give each option the same name – prevents exclusive selection.
Omitting the for attribute on <label> – reduces accessibility.
Exam Checklist
All required fields are present and correctly typed.
Headings use a larger font size (conceptually) and are bold.
There is a blank line or paragraph between each field group.
Radio buttons allow only one selection; check boxes allow multiple.
A drop‑down menu is used for a long list of options.
White space is used to separate personal details from contact details.
Form ends with a clearly labelled submit button.