Quest 1 • Lesson 5
📝 Forms & Inputs
HTML forms collect user input – search boxes, login fields, contact messages. The <form> element wraps all input elements, and <input> defines the field type.
"Forms are the bridge between users and your website. They enable interaction, searches, and data submission."
form.html
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Send</button>
</form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Send</button>
</form>
🧠 Form Elements Explained
<form>– container for inputs. Attributes:action(where data goes),method(GET or POST).<label>– text description linked to an input viaforattribute (improves accessibility).<input>– the field itself. Thetypeattribute defines behaviour (text, email, password, etc.).<button>– submits the form when clicked.
🎛️ Common Input Types
text
password
number
🔘 Radio Buttons & Checkboxes
Radio (select one):
Checkbox (select multiple):
<input type="radio" name="gender" value="male"> Male
🚀 Live Demo: Contact Form
Fill out the form and click "Submit" – see the data in the console (right‑click → Inspect → Console).
📘 JavaScript used (only for demo)
function handleFormSubmit(event) {
event.preventDefault();
const formData = new FormData(event.target);
console.log("Form data:", Object.fromEntries(formData));
document.getElementById('formFeedback').classList.remove('hidden');
}
✨ Challenge: Build a Survey Form
Create a simple survey with:
- Text input for name
- Radio buttons for experience (Beginner / Intermediate / Advanced)
- Checkbox for interests (HTML, Python, AI)
- Submit button
❤️ Support Free Education
This course is 100% free. If it helps you, consider buying me a coffee.
☕ Buy Me a Coffee➡️ Ready for more?
Next lesson: Semantic HTML & Accessibility – build better websites.
Continue to Lesson 1.6 →(Coming soon – check back or buy Pro Pack for instant access)