HTML Forms
Forms (<form>) are the primary way web pages interact with users — login, registration, search, and contact messages all rely on forms to collect data.
Form Basics
The <form> tag defines a form area that contains various input controls. When users fill in and submit the form, data is sent to the server:
Example
HTML
<form action="/submit" method="post">
<label>Username: <input type="text" name="username"></label>
<label>Password: <input type="password" name="password"></label>
<button type="submit">Login</button>
</form>
Common Input Controls
<input> is the most versatile control — its type attribute transforms it into different input forms:
Example
HTML
<!-- Text input -->
<input type="text" placeholder="Enter your name">
<!-- Email -->
<input type="email" placeholder="you@example.com">
<!-- Number -->
<input type="number" min="1" max="100">
<!-- Radio buttons -->
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<!-- Checkbox -->
<input type="checkbox" name="hobby" value="coding"> Coding
<!-- Dropdown -->
<select>
<option>Select a city</option>
<option>New York</option>
<option>London</option>
</select>
<!-- Textarea -->
<textarea rows="4" placeholder="Enter your message..."></textarea>
💡 Form Attributes:
action specifies the submission URL; method specifies the request method (get for search, post for login/registration). placeholder shows input hints; required marks fields as mandatory.
Form Grouping & More Elements
<fieldset> groups related controls, <legend> provides a group title. <datalist> offers a pre-populated suggestion list for input fields:
Example
HTML
<form>
<fieldset>
<legend>Personal Info</legend>
<label>Name: <input type="text" name="name" list="names"></label>
<label>Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</label>
</fieldset>
<datalist id="names">
<option value="Alice">
<option value="Bob">
<option value="Charlie">
</datalist>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('You clicked me!')">Regular Button</button>
</form>
<fieldset>+<legend>: Group form controls with a title<datalist>+<option>: Provides input suggestions, used with thelistattribute<button>types:submitsubmits,resetclears,buttonis a generic button
❓ FAQ
Q What are the
action and method attributes on a <form>?A
action specifies the server URL where form data is sent; method specifies how to send it. Two methods: GET appends data to the URL (suitable for search queries), POST puts data in the request body (suitable for login, registration, and sensitive data). If you have no server to handle it, omit action and use JavaScript's event.preventDefault() to intercept submission.Q What's the difference between
radio (single choice) and checkbox (multiple choice)?A
radio is single-select — only one option per group (grouped by name attribute); checkbox is multi-select — you can select multiple options simultaneously. Key point: radio must share the same name value to be mutually exclusive; checkbox names can be the same or different. Both use checked to set default selection.Q What does the
type attribute on <button> do?A
type determines button behavior: submit (default) submits the form to the action URL; reset clears all form inputs; button has no default behavior — you need JavaScript to bind events. Note: without type, it defaults to submit, which may accidentally submit your form. Always specify type explicitly.Q Is HTML5 form validation enough? Do I still need JavaScript?
A HTML5 provides basic validation (
required, minlength, pattern, etc.) for simple scenarios. But it has limits: 1) error message styling is hard to customize; 2) complex validation (like matching passwords) isn't possible; 3) UX isn't great (timing, styling inconsistencies). Recommendation: use HTML5 validation for basic protection, JavaScript for enhanced validation and better user experience.📖 Summary
<form>defines a form;actionandmethodcontrol submission behavior<input>types: text, password, email, number, radio, checkbox<select>+<option>for dropdowns;<textarea>for multi-line text<fieldset>+<legend>for grouping;<datalist>for input suggestions<button>type determines behavior: submit / reset / button
📝 Exercises
- Registration form: Create a registration page with username, email, password, confirm password, gender (radio), interests (checkbox), a submit button, and a reset button. Use
<fieldset>for grouping. - Input suggestions: Use
<datalist>to create a "City Selection" input that automatically suggests New York, London, Tokyo, and Sydney as you type.