What it shows
Form tags collect text, a choice and a message, and HTML attributes check the input before sending. It shows how websites collect information.
The science
A form has fields, each with a name, and a button that submits them. Attributes such as required, type="email" and minlength make the browser check the input before sending, which is called client-side validation. A real site must also check on the server, because a user can bypass the browser checks.
Materials
Cost: free. Many items come from home or from waste; spare parts such as LEDs, motors and wire are in the store.
- A computer, laptop or phone with a browser (free)
- A text editor and a web browser (free)
- A notebook and a pencil
Safety
For this project: This page does not send data anywhere. Never ask for or enter real personal details, passwords or card numbers in a practice form.
Never use mains electricity: power models with cells, batteries or a low-voltage adapter. Sharp and hot tools, flames and lab chemicals need an adult or your teacher beside you. Keep magnets, button cells and small parts away from young children, and wash your hands after making.
All the safety rulesStep by step
8 steps. Do them in order, and test each part before you go on to the next. Write what you notice in a notebook as you go.
Create form.html with the basic structure and a heading <h1>Contact the library</h1>.
Add <form action="#" method="get"> and close it with </form>; the action # means no data leaves the page.
Add <label for="n">Name</label> <input type="text" id="n" name="name" required minlength="2"> and then a <br>.
Add <label for="e">Email</label> <input type="email" id="e" name="email" required> and note how the browser checks the @ sign.
Add a dropdown: <select name="topic"><option>Book request</option><option>Complaint</option><option>Other</option></select>.
Add <textarea name="msg" rows="4" cols="30" placeholder="Your message"></textarea> and a <button type="submit">Send</button>.
Open the page, click Send with empty fields and read the messages the browser gives; then fill it correctly and see the values in the address bar after the question mark.
Add a style block with label { display: inline-block; width: 80px; } and input:invalid { border-color: red; } for visual feedback.
What you should see
The form refuses to send until the name is filled and the email looks valid, and after a correct send the typed values appear in the address bar.
Viva questions
A teacher or a judge will ask how it works. Try to answer each question before you open it, then compare.
1What does required do?
Stops the form from being sent until the field is filled.
2Why do we still check on the server?
Browser checks can be bypassed.
3What does the label for attribute do?
Connects the label to its field so clicking the label selects the field.
4Why should the practice form not collect passwords?
A test page is not secure; sensitive data belongs only on trusted secure sites.
Take it further
Use JavaScript to show a thank-you message and stop the page from reloading when the form is submitted.
Change one thing, measure what happens, and add a table or chart of your readings: that is what turns a model into your own investigation.
Free ebooks for this project
Computer & office
Computer Fundamentals Study Book
The complete study notes, practice questions and glossary for Computer Fundamentals
Computer & office
Safe UPI and Digital Payments
Pay and receive money online, and recognise the tricks fraudsters use