Lernzettel: Mastering HTML Forms and Input Elements

HTML Forms (Part 2) - Revision Sheet

1. 📌 Essentials

• <form> tag encloses user input elements; controls data submission.
• action attribute specifies server script URL; method defines data transmission (POST or GET).
• Data is URL-encoded; unsafe characters replaced with %xx; spaces as + or %20.
• <input type="submit"> triggers form submission; <input type="reset"> clears inputs.
• HTML5 introduces diverse input types: color, date, email, file, hidden, number, password, radio, range, search, tel, time, url, week.
• Date/time inputs require RFC3339 formats: YYYY-MM-DD, YYYY-MM-DDTHH:MM:SS, etc.
• <textarea> supports multi-line input; size via rows, cols; maxlength limits characters.
• <select> creates dropdowns with <option>; supports multiple and size.
• Validation attributes: required, autofocus, formnovalidate, autocomplete, datalist.
• Group radio buttons with the same name for single selection.

2. 🧩 Key Structures & Components

• <form> — container for user inputs, defines submission behavior.
• <input> — various types for specific data (text, email, date, file, etc.).
• <textarea> — multi-line text input.
• <select> — dropdown menu with options.
• <option> — individual choice within <select>.
• <datalist> — provides input suggestions.
• <button> — clickable buttons; type can be submit, reset, button.
• name attribute — groups inputs for server-side processing.
• value attribute — data sent to server; default display text.

3. 🔬 Functions, Mechanisms & Relationships

• <form> submits data via specified action and method.
• Data encoding converts special characters to %xx; spaces as + or %20.
• Input types tailor user interaction and validation (e.g., email, date, color).
• Date/time inputs enforce RFC3339 formats for correct parsing.
• <textarea> allows multi-line input; size controls visible area.
• <select> with <option> creates dropdown; selected sets default.
• Validation attributes enforce mandatory fields and improve UX.
• Radio buttons with same name allow only one selection within group.
• <input type="file"> supports multiple files with multiple.
• <input type="hidden"> stores invisible data; not secure.
• <input type="image"> acts as a submit button with image.
• Range sliders (type="range") accept min, max, step.
• Date/time inputs require specific formats for proper validation.
• <datalist> enhances <input> with suggestions.

4. Comparative Table

5. Hierarchical Diagram

Form
 ├─ Action & Method
 │    ├─ action: server script URL
 │    └─ method: post or get
 ├─ Data Encoding
 │    └─ unsafe characters replaced with %xx
 ├─ Buttons
 │    ├─ Submit: `<input type="submit">`
 │    └─ Reset: `<input type="reset">`
 ├─ Input Elements
 │    ├─ Text: `<input type="text">` (size, maxlength, placeholder)
 │    ├─ Date/Time: date, datetime-local, time, week (RFC3339)
 │    ├─ Email, URL, Tel: validation enforced
 │    ├─ File: upload with `multiple`
 │    ├─ Hidden: invisible data
 │    ├─ Color: hex code (`#RRGGBB`)
 │    ├─ Number: min, max, step
 │    ├─ Password: masked input
 │    ├─ Radio/Checkbox: grouped via `name`
 │    ├─ Range: slider with min, max, step
 │    └─ Search: search input
 └─ Textarea & Select
     ├─ `<textarea>`: multi-line input
     └─ `<select>`: dropdown with `<option>`s

6. ⚠️ High-Yield Pitfalls & Confusions

• Forgetting to set name attribute on inputs; data won't be sent.
• Using incorrect date/time formats; causes validation errors.
• Confusing GET (URL parameters) with POST (request body).
• Not validating email or URL formats; rely on HTML5 validation.
• Overusing <input type="reset">; can frustrate users.
• Assuming <input type="hidden"> provides security; it does not.
• Mixing value and display text in <option>; ensure value is correct.
• Not setting multiple attribute when multiple files or options are needed.
• Overlooking required attribute; missing mandatory fields.
• Using incompatible input types for data; e.g., date input with wrong format.

7. ✅ Final Exam Checklist

• Understand <form> structure, action, and method.
• Know URL encoding rules; spaces as + or %20.
• Recognize all HTML5 input types and their formats.
• Date/time inputs require RFC3339 formats.
• <textarea> supports multi-line input; size and maxlength.
• <select> with <option> for dropdowns; default selection via selected.
• Use validation attributes: required, autofocus, formnovalidate.
• Group radio buttons with same name.
• Support multiple files with <input type="file" multiple>.
• Hidden inputs store data not visible to users.
• <input type="image"> submits form with image button.
• Range sliders accept min, max, step.
• <datalist> provides suggestions for <input>.
• Be cautious with reset buttons; they clear all inputs.
• Always validate date/time formats before submission.
• Use autocomplete to enhance user experience.
• Test form submission with different input types and attributes.

---