Forms and Inputs
Forms let users send data to servers — login, signup, search, checkout. The <form> element is one of HTML's most powerful tags. HTML forms made e-commerce possible.
Basic Form
Example — Simple Contact Form
<form action="/submit" method="POST"> <!-- label for= links to input id= --> <label for="name">Your Name</label> <input type="text" id="name" name="name"/> <label for="email">Email</label> <input type="email" id="email" name="email"/> <button type="submit">Send</button> </form>
Clicking the label focuses the input. This is why label for= and input id= must match.
Checkbox and Radio
Example — Checkbox and Radio
<!-- Checkbox: multiple can be selected --> <label> <input type="checkbox" name="agree"/> I agree to terms </label> <!-- Radio: only ONE can be selected from group --> <label><input type="radio" name="plan" value="free"/> Free</label> <label><input type="radio" name="plan" value="paid"/> Paid</label>
Radio buttons share the same name attribute — that makes them a group where only one can be selected.
Select Dropdown
Example — Dropdown
<label for="course">Pick a course</label> <select id="course" name="course"> <option value="">Select...</option> <option value="html">HTML Basics</option> <option value="css">CSS Styling</option> </select>
Input TypesHTML5
type="text"Single line text. For names, usernames, general input
type="email"Email field. Browser validates format. Email keyboard on mobile
type="password"Hides characters as user types
type="checkbox"Check or uncheck. Multiple can be selected
type="radio"Select one from a group. Group with same name attribute
type="number"Numbers only with min, max, step
type="date"Date picker. Native calendar UI on mobile
type="file"File upload. Opens native file picker
type="submit"Submit button that sends the form
label is Essential
Every input needs a label. Without labels, screen readers cannot tell blind users what each field is for. Labels also improve tap targets on mobile — the whole label area becomes clickable.
GET vs POST
Use GET for search forms (data visible in URL). Use POST for login, signup, checkout (data in request body, more secure). NEVER use GET for passwords.
Forms Built E-Commerce
The first secure online purchase was in 1994 — a Sting CD sold on NetMarket using an encrypted HTML form. Today HTML forms process trillions of dollars in transactions every year.