HTML Forms and Inputs
Forms collect user input — login data, search queries, contact messages, orders. The <form> element is a container. Inside it go <input>, <textarea>, <select>, and <button> elements.
Complete Login Form
Example 1 — Real Login Form
<form action="/login" method="POST"> <!-- Text input --> <label for="email">Email Address</label> <input type="email" id="email" name="email" required placeholder="you@example.com" autocomplete="email" /> <!-- Password input --> <label for="pass">Password</label> <input type="password" id="pass" name="password" required minlength="8" /> <button type="submit">Login</button> </form>
label for="email" connects to input id="email". Click the label and the input gets focus — this is critical for accessibility.
Input Types
Example 2 — All Common Input Types
<!-- These types give different keyboards on mobile --> <input type="text" placeholder="Any text"/> <input type="email" placeholder="Email"/> <input type="tel" placeholder="Phone"/> <input type="number" min="1" max="100"/> <input type="date"/> <input type="checkbox"/> Remember me <input type="radio" name="plan" value="free"/> Free <input type="file"/> <input type="range" min="0" max="100"/> <!-- Textarea for multi-line text --> <textarea rows="4" placeholder="Your message..."></textarea> <!-- Select dropdown --> <select> <option value="">Select course</option> <option value="html">HTML</option> <option value="css">CSS</option> </select>
type="email" shows @ keyboard on iPhone. type="tel" shows number keypad. type="date" shows a date picker. Always use the right type.
Key Form Attributes
actionURL where form data is sent. Leave blank to send to same page.
method="POST"POST hides data in request body. Use for login, signup, any sensitive data.
method="GET"GET appends data to URL as ?query=value. Use for search forms.
requiredBrowser prevents submission if field is empty. Shows error automatically.
autocompleteTells browser what data to autofill. "email", "name", "tel", "off".
Never Skip the label
Every input must have a label connected via for and id attributes. Without it: clicking the label does not focus the input, screen readers cannot describe the field, browser autocomplete does not work reliably, and Google may penalize your form for poor accessibility.
GET vs POST — Real Difference
GET: data goes in the URL (?search=html). Bookmarkable, shareable, cached by browser. Use for search. POST: data goes in the request body. Not visible in URL, not cached, more secure. Use for login, signup, payment. Never send passwords via GET.