Creating HTML Forms Using KompoZer — Detailed
Notes
1. What is a Form?
A form is a section of a webpage that allows users to enter and submit data.
Examples: login form, registration form, feedback form, contact form, online survey.
Purpose:
- Collect user information
- Send data to a server
- Allow interaction between user and website
Basic HTML structure:
form elements here
2. What is KompoZer?
KompoZer is a WYSIWYG web page editor used to create websites easily.
WYSIWYG means “What You See Is What You Get”. The page is designed visually and the HTML
code is generated automatically.
Features:
- Easy webpage design
- No need to remember HTML code
- Drag■and■drop editing
- Built■in form tools
- Free and open source
3. Form Controls
Form controls are elements used to collect user input.
Common controls:
- Text Field – enter short text
- Password Field – hidden password entry
- Radio Button – choose one option
- Check Box – choose multiple options
- Text Area – enter long text
- Drop■down List – choose from list
- Submit Button – send form data
- Reset Button – clear form
4. Steps to Create a Form in KompoZer
1. Open KompoZer.
2. Create new webpage: File → New → Blank Page.
3. Insert form: Insert → Form → Form.
4. A red dotted box appears showing the form area.
Form Properties:
- Action URL – location where form data is sent.
- Method – method used to send data.
Two methods:
- GET
- POST
5. Text Field
Used to enter single■line text like name or email.
Steps:
Insert → Form → Text Field
Properties:
- Field Name – name of field
- Initial Value – default value
- Size – width of box
- Maximum Length – maximum characters
6. Password Field
Used to enter password securely. Characters appear as dots or stars.
Steps:
Insert → Form → Text Field → choose Password Field
7. Radio Buttons
Radio buttons allow only one option to be selected from a group.
Example: Gender selection
Male / Female
Important rule:
All radio buttons in the same group must have the same name.
8. Check Boxes
Allow multiple selections.
Example:
Music
Sports
Reading
Steps:
Insert → Form → Check Box
9. Text Area
Used for entering long text like feedback or comments.
Steps:
Insert → Form → Text Area
Properties:
- Name
- Rows (height)
- Columns (width)
10. Drop■Down List
Allows user to select one option from a list.
Steps:
Insert → Form → Selection List
Example list:
India
USA
UK
11. Submit Button
Submit button sends form data to the server.
Steps:
Insert → Form → Submit Button
12. Reset Button
Reset button clears all entered data in the form.
Steps:
Insert → Form → Reset Button
13. Form Validation
Validation ensures correct data is entered before submission.
Examples:
- Email must contain @
- Password must have minimum characters
- Required fields must be filled
14. Example HTML Form
Name:
Password:
Gender:
Male
Female
Hobbies:
Music
Sports
15. Advantages of Using KompoZer
- Easy form creation
- Visual editing
- No need to write HTML manually
- Beginner friendly