Forms and inputs
Forms collect user input. Use <form>, <input> (text, number, checkbox, submit), <label>, and <button>. The name attribute identifies the field when the form is submitted.
Appy Says…
Every login page, signup form, search bar, and checkout form is built with HTML form elements. Forms are how users send data to your app. Learn this and you can build real interactive features.
What are HTML Forms?
HTML forms collect user input and submit it to a server (or handle it with JavaScript). The <form> element wraps input elements, and the <input> tag creates individual fields.
- •
<form action="/submit" method="post"> - •
<input type="text" name="username" placeholder="Enter name"> - •Common types:
text,email,password,number,checkbox,radio,file - •
<label for="id">— connects a label to its input (click label to focus input) - •
<textarea>— multi-line text input - •
<select><option>— dropdown menu - •
<button type="submit">Send</button>
Think of it like a Roblox character creation screen
The character creation screen is a form — name input, appearance dropdowns, colour pickers. When you click 'Create', the form submits all your choices. Every HTML form does exactly the same: gather input, submit when the user is ready.
How It Works
- •1.
<form>wraps all the inputs - •2. Each input has a
nameattribute — this becomes the key in the submitted data - •3. Clicking a submit button (or pressing Enter in a text field) submits the form
- •4.
method="post"sends data in the request body (secure);getputs it in the URL - •5. JavaScript can intercept:
form.addEventListener('submit', e => { e.preventDefault(); ... }) - •6.
required,minlength,patternattributes add built-in validation
Real-World Examples
- •Login: two
<input>s (email + password) and a submit button - •Google Search: a single text input inside a form that submits on Enter
- •Registration: username, email, password, confirm password, terms checkbox
- •YouTube comment box: a
<textarea>with a submit button - •Checkout: name, address, card number — each a labelled
<input>
Key Facts
- •
<input type="email">adds built-in email format validation on mobile devices it shows the email keyboard - •Labels are mandatory for accessibility — always use
<label for="inputId"> - •The
requiredattribute prevents submission if the field is empty - •
<fieldset>and<legend>group related inputs (e.g. shipping vs billing address)
Watch Out!
Never rely on HTML validation alone for security. Client-side validation (required, type="email") can be bypassed by anyone with DevTools. Always validate and sanitise on the server side too.
Remember
Every input needs a name (for form data) and a <label> (for accessibility). Use type to get the right keyboard and built-in validation.
What You Learned
- •Forms collect user input using
<input>,<textarea>,<select> - •Labels, names, and input types are essential for accessibility and function
- •Unlocks: login pages, search bars, registration forms, any user-input feature
Key Facts
- →
<input type="email">adds built-in email format validation on mobile devices it shows the email keyboard - →Labels are mandatory for accessibility — always use
<label for="inputId"> - →The
requiredattribute prevents submission if the field is empty - →
<fieldset>and<legend>group related inputs (e.g. shipping vs billing address)
Real-World Examples
Remember
Every input needs a name (for form data) and a <label> (for accessibility). Use type to get the right keyboard and built-in validation.
Quick Quiz
Which input type is for numbers?