Copperbelt University
School of Information Communication and Technology
Software Development (CS 130)
Design of Input and Control
Module Objectives
• Understand the principles of effective input design.
• Recognize different types of input methods and controls.
• Apply techniques to minimize and streamline user input.
• Identify strategies to prevent input errors.
• Understand methods for capturing and validating input data.
• Appreciate the importance of audit trails and data integrity.
Introduction
Before designing inputs and implementing control mechanisms, it is essential to understand the
basic types of input elements used in forms and user interfaces. These input types form the
fundamental building blocks of interaction between users and systems, enabling the capture of
structured and unstructured data. Throughout this module, we will use HTML5 code snippets and
visual examples to demonstrate the various input types, how they appear, and the attributes that
can be applied to them.
1. Text Input
Text inputs are used for short, single-line text entries such as names, email addresses, or phone
numbers.
Attribute Description
maxlength Limits the number of characters.
placeholder Displays hint text inside the input box.
required Marks the field as mandatory before form submission.
1
Example
<input type="text" name="fullname" placeholder="e.g. John Doe" required maxlength="40">
Figure 1 - Text input
2. Text Area
Text areas allow users to enter multi-line input. They are ideal for collecting feedback, comments,
or longer messages.
Key Features
• Resizable in most browsers.
• Suitable for unstructured or extended text input.
Example
<textarea name="comments" rows="4" cols="50" placeholder="Enter your comments here"></textarea>
Figure 2 - Textarea
3. Number Input
This input type restricts the field to numeric values and is used for quantities, prices, or ratings.
Attribute Description
min Minimum allowable value.
max Maximum allowable value.
step Defines numeric increments (e.g., 0.01 for decimals).
2
Example
<input type="number" name="age" min="18" max="140" step="2">
Figure 3 - Number input
4. Select Dropdown (single)
The select element presents users with a drop-down list of predefined options, allowing a single
selection.
Example
<select name="program" required>
<option value="" disabled selected>Choose your program</option>
<option value="bcs">BSc Computer Science</option>
<option value="ba">BA Economics</option>
<option value="eng">BEng Electrical</option>
</select>
Figure 4 - Select (single)
5. Select Dropdown (multiple)
The select element presents users with a drop-down list of predefined options, allowing multiple
selection.
Example
<select multiple name="courses[]" required>
<option value="" disabled selected>Select your courses</option>
<option value="cs130">Software development</option>
<option value="ma110">Mathematics</option>
<option value="cs110">Introduction to computing</option>
</select>
3
Figure 5 - Select (multiple)
6. Radio Buttons
Radio buttons allow users to select only one option from a set. They must share the same name
attribute to function as a group.
Example
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
Figure 6 - Radio buttons
6. Checkboxes
Checkboxes let users choose one or more options independently. Each checkbox functions
separately.
Example
<label><input type="checkbox" name="interest" value="coding"> Coding</label>
<label><input type="checkbox" name="interest" value="music"> Music</label>
<label><input type="checkbox" name="interest" value="literature">Literature</label>
Figure 7 - Checkboxes
7. File Upload
Allows users to upload files such as images, documents, or PDFs. The accept attribute limits
selectable file types.
Attribute Description
accept Restricts file types (e.g., image/*).
4
Example:
<input type="file" name="resume" accept=".pdf,.docx">
Figure 8 - file input
8. Date and Time Inputs
Specialized input types used to collect date and/or time values in a structured format.
Type Description
date Select a specific date.
time Select a specific time.
datetime-local Select both date and time.
month Select a month and year.
week Select a specific week.
Example
<input type="date" name="dob">
Figure 9 - Date input
9. Buttons
Buttons trigger actions like submitting a form or resetting fields. They come in different types
depending on the intended behavior.
Type Function
submit Submits the form data to the server.
reset Clears all input fields in the form.
button Executes a custom JavaScript function.
5
Example
<input type="submit"></input>
<input type="reset"></input>
Figure 10 - submit & reset
Summary
Type Use Case Tag Example
Text Short text <input type="text">
Textarea Long, multi-line text <textarea></textarea>
Number Numeric data only <input type="number">
Select Dropdown list <select>...</select>
Radio One choice from few <input type="radio">
Checkbox Multiple choices <input type="checkbox">
File Upload files <input type="file">
Date/Time Inputs Date/time values <input type="date">
Buttons Actions / form submission <input type="submit">
6
Minimizing the Amount of Input
Minimizing the amount of user input is a key objective in input design. Reducing manual data
entry helps decrease errors, streamline workflows, and improve the overall user experience.
Efficient input design allows systems to collect only essential data while minimizing the time and
effort required from users.
Importance of Minimizing Input
• Reduces the chance of input errors.
• Improves speed and efficiency of data entry.
• Enhances user satisfaction and reduces frustration.
• Supports faster processing and system responsiveness.
Techniques for Minimizing Input
1. Pre-Fill Known Data
Wherever possible, input fields should be pre-populated with data that the system already
knows. This includes information retrieved from user profiles, previous sessions, or system
defaults.
Examples
• Automatically filling in the current date or logged-in user’s name.
• Pre-filling address fields from stored user preferences.
• Using browser-stored form data for returning users.
Benefits
• Saves user time.
• Reduces repeated entry of the same information.
• Minimizes typing errors and inconsistencies.
2. Use Selective Input Controls
When appropriate, restrict input to a fixed set of valid choices. This not only speeds up data
entry but also ensures consistency in the data collected.
7
Common Controls
• Select Drop Downs Suitable for lists with many options, such as selecting a country
or department.
• Radio Buttons Used when the user must select one option from a small set, such
as gender or preferred contact method.
• Checkboxes Allow the user to select multiple options, for example, selecting
services in a subscription form.
Benefits
• Enforces data standardization.
• Prevents free-text errors or unexpected formats.
• Simplifies the input interface for users.
3. Automated Input Methods
Use hardware and software tools to capture data automatically instead of requiring manual
input. These methods are especially valuable in environments where speed and accuracy
are critical.
Examples
• Barcode Scanners Common in retail and logistics to input product codes quickly.
• RFID Readers Used for inventory control, personnel tracking, and access systems.
• QR Code Readers Enable fast data entry via scanning, commonly used in mobile
applications, event check-ins, and payments.
Benefits
• Eliminates manual typing.
• Speeds up data entry.
• Reduces data entry errors and improves operational efficiency.
Design Considerations
• Only request input when it is truly necessary for processing or decision-making.
• Provide clear labels and default values to guide users.
• Ensure pre-filled and automatically captured data is visible and editable, when appropriate,
so users can confirm or correct it.
8
Avoiding Delays in Input
Efficient input design should not only reduce the quantity of data entered but also ensure that input
processes are fast and responsive. Delays in data entry, form processing, or system feedback can
frustrate users, reduce productivity, and increase the risk of abandonment or errors.
Causes of Input Delays
• Slow-loading forms or interfaces.
• Poorly optimized system responses to user actions.
• Excessive validation steps or confirmation screens.
• Complex or unintuitive form layouts.
Techniques for Avoiding Delays
1. Real-Time Feedback and Validation
Input validation should occur as the user enters data rather than after form submission.
Immediate feedback helps users correct mistakes early and avoid repeating invalid actions.
Examples
• Displaying an error if an email address format is incorrect as the user types.
• Highlighting required fields that are left blank before the user clicks "Submit."
• Showing password strength indicators in real time.
Benefits
• Improves error correction.
• Reduces the need for form re-submissions.
• Enhances user confidence and efficiency.
2. Streamlined Form Design
The layout and structure of input forms directly affect the speed at which users can
complete them.
Best Practices
• Group related fields together logically (e.g., personal information, billing
information).
• Use clear labels and consistent alignment for form fields.
9
• Minimize the number of input fields to only what is necessary.
• Use multi-step forms or progress indicators when many fields are unavoidable.
Benefits
• Reduces visual complexity.
• Helps users navigate forms more easily.
• Prevents confusion and incomplete submissions.
3. Optimizing System Performance
Delays can also be caused by back-end processing or communication between the user
interface and the server.
Strategies
• Saving data without reloading the page.
• Cache commonly used data locally to reduce repeated server calls.
• Minimize form dependencies that require frequent updates or lookups (e.g.,
dynamically updating fields based on user choices).
• Ensure that the underlying application is well-optimized and scalable.
Benefits
• Ensures responsive user interfaces.
• Reduces system wait times.
• Supports real-time applications and mobile-friendly environments.
Design Considerations
• Always provide visual indicators when loading or processing is taking place (e.g., loading
spinners or progress bars).
• Avoid forcing users to wait for unnecessary data lookups or validations.
• Allow partial saves or draft modes for long forms.
10
Preventing Errors in Data Entry
Data entry errors are a common and costly issue in software systems. Mistakes such as incorrect
formats, typos, missing fields, or invalid values can compromise data quality, affect business
operations, and lead to incorrect outputs. Well-designed input systems proactively help users enter
valid, accurate data through smart interface design and validation techniques.
Common Causes of Data Entry Errors
• Ambiguous or poorly labeled fields.
• Inadequate guidance or feedback during input.
• Absence of validation checks.
• Overly complex or cluttered input forms.
• Allowing free-form input where structured options are better suited.
Techniques for Preventing Errors
1. Input Design Techniques
Design plays a critical role in minimizing the likelihood of user mistakes.
Strategies
• Input Masks Restrict entry to a specific format (e.g., phone numbers, credit card
numbers).
• Placeholders and Hints Use in-field examples or brief guidance to show expected
input (e.g., "MM/DD/YYYY" for dates).
• Field Constraints Limit acceptable values by using range limits, character
restrictions, or predefined formats.
• Disable Invalid Options Prevent users from selecting inappropriate choices (e.g.,
graying out unavailable dates in a date picker).
Example
A date-of-birth field may restrict entry to a range of valid years and require a numeric
format.
2. Real-Time Validation and Feedback
Immediate validation alerts users to issues as they type, instead of after form submission.
Implementation
• Highlight fields with errors in real time.
11
• Use tooltips or messages near the field to explain the issue.
• Allow users to fix errors without clearing previously entered data.
Benefits
• Reduces user frustration.
• Increases accuracy on the first attempt.
• Improves form completion rates.
3. Limiting Free-Form Input
Allowing unrestricted text entry increases the chances of inconsistency and errors.
Preferred Alternatives
• Replace open-ended text fields with drop-down menus, radio buttons, or
checkboxes.
• Use controlled vocabularies and autocomplete features.
Example
Instead of asking the user to type their country, offer a searchable drop-down list to prevent
typos or variations (e.g., "USA" vs. "United States").
4. Provide Clear Error Messages
When errors occur, the system should give users helpful, non-technical messages that
explain what went wrong and how to correct it.
Effective Error Messages
• Are specific (e.g., "Email must include '@' and domain" instead of "Invalid input").
• Are positioned close to the problem field.
• Do not blame the user.
5. Use of Required Field Indicators
Visually indicate which fields are mandatory, using asterisks (*) or bold labels, and validate
them before submission.
12
Example
Name, email, and password fields may be required, while secondary fields such as
“Company Name” can be optional.
Design Considerations
• Avoid overwhelming the user with too many constraints.
• Strike a balance between helpful validation and unnecessary interference.
• Always allow users to review and confirm their entries before submission.
Capturing Input Data
Capturing input data effectively is a fundamental aspect of system design. The goal is to collect
accurate, timely, and relevant data through appropriate methods, whether manual or automated.
The quality of input data directly affects the reliability and usefulness of the system’s outputs.
Methods of Capturing Input Data
1. Manual Data Entry
This involves users physically entering data via keyboards, touchscreens, or other
interfaces.
Examples
• Typing customer details into a registration form.
• Filling out an online feedback form.
• Entering product information in an inventory system.
Advantages
• Flexible and adaptable to many use cases.
• Allows for nuanced or context-specific input.
Disadvantages
• Time-consuming and error-prone.
• Relies on user concentration and consistency.
13
2. Automatic Data Capture
Automated methods collect data using electronic devices or sensors, reducing the need for
manual entry.
Examples
• Scanning product barcodes in a point-of-sale system.
• Using GPS data for location tracking.
• Biometric data input such as fingerprints or facial recognition.
Advantages
• Faster and more accurate than manual input.
• Suitable for high-volume or real-time environments.
• Reduces dependency on user training and judgment.
Disadvantages
• May require additional hardware or software integration.
• Less flexible when unique or unexpected input is needed.
Guidelines for Source Documents
Source documents are the original records used to collect and capture data at its point of origin.
These documents may be either physical (paper-based) or digital and serve as the foundation for
entering data into a system. Properly designed source documents help ensure that input data is
complete, accurate, and easy to process.
Purpose of Source Documents
• To capture essential data before it enters a system.
• To serve as a reference or audit trail for transactions.
• To support traceability and accountability in business processes.
• To reduce the likelihood of data entry errors through clear formatting.
14
Common Types of Source Documents
Document Type Example Use Case
Registration Form Collecting personal information
Purchase Order Initiating procurement transactions
Invoice Requesting payment for goods or services
Time Sheet Tracking employee work hours
Inspection Checklist Logging results from quality control
Key Design Guidelines
To ensure that source documents are effective and user-friendly, they should be designed with the
following principles in mind.
1. Clarity
• Use clear, unambiguous labels and instructions.
• Group related fields logically (e.g., contact details, item descriptions, totals).
• Ensure labels are easily readable and properly aligned with fields.
Example - A field labeled “Phone” should indicate the expected format (e.g., (XXX) XXX-
XXXX).
2. Simplicity
• Keep the document as concise as possible while capturing all necessary data.
• Avoid excessive detail or redundant fields.
• Use visual structure (boxes, lines, spacing) to separate sections.
Tip Minimize clutter to help users focus on required inputs.
3. Completeness
• Ensure that all necessary data elements for processing are included.
• Include instructions or notes where there might be confusion.
• Use mandatory field indicators when appropriate.
15
Example - An invoice must include fields for customer details, item descriptions,
quantities, prices, and totals.
4. Consistency
• Maintain consistent terminology and formatting across documents.
• Use standard date formats, currency symbols, and units of measure.
• Align fonts, sizes, and label placements for a professional look.
5. Usability (for Paper or Digital Forms)
• Leave sufficient space for handwritten input if paper-based.
• Use checkboxes or pre-defined options for repetitive choices.
• In digital forms, ensure input fields are easy to navigate with keyboard or touch
input.
Design Features for Digital Source Documents
When designing digital versions of source documents (e.g., online forms or PDFs), consider
• Auto-calculations (e.g., total cost fields based on quantity × unit price).
• Conditional fields that appear only when relevant (e.g., show a "Reason" field if “No” is
selected).
• Input constraints to guide formatting (e.g., date pickers, drop-downs).
• Save and resume functionality for long forms.
Input Validation Techniques
Input validation is the process of verifying that data entered into a system meets predefined rules
before it is accepted and processed. Effective validation helps maintain data integrity, ensures
compliance with business rules, and prevents system errors caused by incorrect, incomplete, or
malicious input.
Validation should be applied at different stages and levels of input, using appropriate techniques
to ensure data is both syntactically correct and logically valid.
16
Types of Input Validation
1. Field-Level Validation
Checks whether individual input fields contain acceptable data in terms of format, type,
and length.
Common Checks
• Data Type Validation Ensures that the input matches the expected type (e.g.,
numeric, date, boolean).
• Length Check Limits the number of characters (e.g., a phone number must be
exactly 10 digits).
• Format Validation Enforces a pattern or structure (e.g., email must follow the
pattern name@example.com).
Example - Rejecting an alphabetic string in a field that expects numeric input.
2. Business Rule Validation
Verifies that input values conform to logical rules or organizational policies.
Examples
• Age must be 18 or older for account registration.
• Quantity ordered must not exceed available stock.
• A loan amount must not exceed a customer’s credit limit.
Purpose
• Ensures that data reflects real-world constraints.
• Prevents invalid transactions from being processed.
3. Cross-Field Validation
Compares values between multiple fields to confirm logical relationships.
Examples
• Start date must be earlier than end date.
• Password and confirm password fields must match.
• Total amount should equal the sum of itemized charges.
17
Importance
• Helps maintain internal consistency within records.
• Avoids logical errors that are not visible in individual fields.
Validation Techniques and Approaches
Client-Side Validation
Performed in the user's browser or application before the data is sent to the server. It provides
immediate feedback and reduces the load on the server. Tools like JavaScript and HTML5
validation attributes are commonly used. While it enhances user experience, it can be bypassed
easily and should not be relied upon for enforcing secure business logic.
Server-Side Validation
Takes place after the data reaches the server, ensuring that the data is properly validated before
being processed or stored. This method uses back-end programming languages and database
constraints to enforce rules. It provides a secure layer of defense, preserving data integrity and
protecting against malicious input.
Combined Validation Strategy
A comprehensive validation approach typically incorporates both client-side and server-side
validation. Client-side validation improves responsiveness and usability, while server-side
validation ensures that all rules are securely enforced, regardless of the client environment.
Examples of Validation Rules by Field Type
Field Type Validation Rules
Email Address Must contain @ and a domain; follow email format.
Password Minimum length, special characters, matching confirmation.
Date of Birth Must be a valid date; must meet age restrictions.
Product Code Must match predefined SKU pattern or exist in database.
Price Must be a non-negative decimal value.
18
Audit Trails
An audit trail is a chronological record that captures system activities, particularly data
modifications. It is a fundamental component for tracing the origin and evolution of data,
supporting accountability, and ensuring transparency within a system.
a. Components of an Audit Trail
An effective audit trail records specific details that help identify and understand each event. These
components include:
Component Description
Who Identifies the user or system process that performed the action.
What Captures the data before and after the change (old value, new value).
When Records the exact time the action occurred.
Where Indicates the system module, device, or location where the event happened.
Why (Optional) Describes the reason for the change, often through notes or log messages.
b. Purposes of Audit Trails
Audit trails serve multiple purposes in system monitoring and control. They help detect
unauthorized changes, support investigations into errors or malicious activity, demonstrate
compliance with legal and regulatory requirements, and assist in debugging or correcting system
errors.
c. Types of Audit Logs
Different types of audit logs serve various monitoring functions:
Type Description
Transaction Record discrete operations like order placements or item returns.
Logs
Access Logs Track login attempts, user authentications, and access to files or systems.
Change Logs Capture modifications to critical data such as financial records or user
profiles.
19
Data Integrity Mechanisms
Beyond procedural controls and audit trails, systems also incorporate technical tools to ensure that
data remains unaltered unless intentionally modified by authorized processes.
a. Checksums and Hashes
These methods generate a unique fingerprint (hash value) for a file or dataset. Any unintended or
malicious alteration results in a changed hash, signaling potential tampering. This mechanism is
widely used for data verification and integrity checks.
b. Input Logging and Time Stamping
Every input or transaction can be timestamped to create a reliable historical sequence of events.
This is especially vital in sectors like banking, healthcare, and government, where traceability is
critical for compliance and accountability.
Best Practices for Input Control and Auditing
To maintain strong data governance and system security, several best practices should be
consistently followed:
• Implement role-based access control to ensure that users can only perform actions aligned
with their responsibilities.
• Maintain secure, tamper-evident audit logs that cannot be altered by end users.
• Conduct regular reviews of audit trails to detect unusual or suspicious activities.
• Promote transparency by informing users that their interactions are being logged.
• Adhere to data protection standards and regulatory frameworks such as GDPR, HIPAA,
and ISO 27001, ensuring proper documentation and safeguards are in place.
20
Study Questions
Q1. The university is developing an online student registration system. New students must fill
out a digital form to register for their first semester. The system must collect accurate data,
minimize user input, and ensure data validation and integrity.
The required fields are:
• Full Name
• National Registration Card Number (NRC)
• Date of Birth
• Gender
• Email Address
• Phone Number
• Program of Study
• Preferred Courses
• Upload of Identity Document (PDF or image)
Design the input form for the student registration system. For each field:
1. Select the appropriate input type.
2. Define any validation rules or constraints.
3. Suggest any input controls to minimize errors.
4. Identify which fields require real-time validation and explain why.
Suggested Solution Sample
Field Input Validation Input Controls / Real-Time Notes /
Name Type Rules Enhancements Validation? Justification
(Y/N)
Full Text Required, Placeholder text, Y Prevents missing
Name Input character limit auto-capitalization names and formats
(e.g., 50) properly
21
Q2. Carefully examine the two form designs shown in the image below. Identify and explain
any design issues you observe. For each issue you highlight, provide a clear justification based
on input design principles.
Figure 11 - illustration by Miro
22
Q3. You are a senior developer tasked with preparing a specification for a new registration
form. Read the narration below carefully and extract all necessary inputs and validation rules.
Your goal is to produce implementation instructions that a junior developer can use to build the
form exactly as required.
Client Narration
We’re building a registration form for professionals attending our annual TechEdge Conference.
The information collected must be accurate and unambiguous, we can’t afford misentered or
conflicting data.
Attendees must provide their full legal name (as it appears on ID), a valid email address (used for
ticket delivery), and select their job title from a predefined list. They must also enter their company
name.
Each participant must choose whether they’re registering as a speaker or an attendee , only one
role can be selected. If they choose ‘speaker’, they must upload a professional headshot and
provide a session title.
The system should ensure all critical fields are completed correctly and that no conflicting or
invalid data is submitted.
Your Tasks:
1. Complete the table below with clear form requirements for the junior developer. Note
Field Name Label on Form Input Type/Control Validation Rules / Notes
xxxx xxxxx xxxxx xxxx
2. Draw a clean layout of the form, showing logical grouping, clear labels, and the
appropriate controls.
Q4. List 10 possible values that can be assigned to the type attribute of the <input> element
in HTML5. For example: <input type="___">.
Note: Each value should represent a valid input type supported in HTML5 (e.g., text etc.).
23
Q5. During the development of an online job application portal, the web designer was tasked
with creating an input form that ensured data accuracy and ease of use. The form began with a
field where applicants could enter their names using _________________. To avoid missing
critical information, the developer made several fields mandatory by adding ____________.
Since applicants needed to provide their availability for an interview, the form included
_____________. For contact purposes, there was a field that required a valid address format
using __________. To limit the number of characters entered in the applicant’s cover letter, the
form made use of __________.___ When choosing their preferred job location, applicants had to
select only one option from a list presented using __________. To indicate skills possessed,
multiple choices were provided through __________. Applicants were also asked to upload their
resumes via __________. In one section of the form, users were asked to input their expected
salary using __________. To make sure inputs followed specific increments, the designer applied
__________.
24
