HTML Forms

Forms are containers for interactive input elements that allow users to enter and submit data. The <form> tag wraps all form elements and handles data submission. Key form attributes: • action — The URL where form data is sent when submitted. If omitted, the form submits to the current page. • method — How data is sent: GET (data in URL query string, visible and limited) or POST (data in request body, hidden and unlimited). When to use GET vs POST: • GET: Search forms, filters, pagination — data is in the URL so it can be bookmarked/shared. Limited to ~2000 characters. Data is visible in the address bar. • POST: Login forms, registration, file uploads, payment forms — data is hidden in the request body. No size limit. More secure for sensitive data. Every form input should have: • A name attribute — This is the KEY used to identify the data on the server. Without a name, the input's value will NOT be submitted. • A <label> element — Associates text with an input for accessibility. When users click the label, the input receives focus. Use either wrapping (label around input) or the for/id pairing. • Validation attributes — required (must be filled), pattern (regex validation), min/max (number ranges), minlength/maxlength (text length limits). HTML5 introduced many built-in input types that handle validation automatically: email (validates @ format), url (validates URL format), tel (phone keyboard on mobile), number (numeric keyboard), date (date picker), color (color picker), and more.

HTML5 provides powerful built-in form validation that works without any JavaScript. These validation attributes are checked by the browser when the user clicks the submit button: • required — The field must be filled before submitting. Browser shows an error message automatically. • type='email' — Must contain a valid email format (text@domain.com). • type='url' — Must contain a valid URL (https://...). • minlength='3' / maxlength='50' — Controls text length. • min='0' / max='100' — Controls number range. • pattern='[regex]' — Custom validation using regular expressions. Example: pattern='[0-9]{10}' for a 10-digit phone number. • step='0.01' — Controls increment for number inputs (useful for prices). The browser displays native error messages in the user's language automatically. You can customize these messages with JavaScript if needed. Pro tip: Always validate on the SERVER side too! Client-side validation (HTML/JavaScript) can be bypassed by tech-savvy users. Server-side validation is your last line of defense.