HTML Forms

Forms are the primary way users interact with web applications — they enable login, registration, search, checkout, feedback, and countless other interactions. A form collects user input and sends it to a server for processing.

The <form> Element

The <form> element wraps all input fields and submission controls:

<form action="/submit" method="POST">
  <!-- form fields go here -->
</form>

Key Attributes

• action — the URL where form data is sent
• method — the HTTP method: GET or POST
• enctype — encoding type for file uploads (multipart/form-data)
• novalidate — disables browser validation
• target — where to display the response (_self, _blank)

GET vs POST

• GET — appends data to the URL as query parameters (visible in the address bar). Use for searches, filters, and idempotent requests. Limited data size (~2000 characters).

• POST — sends data in the request body (not visible in the URL). Use for login, registration, file uploads, and any data that changes server state. No size limit.

<!-- GET: search form (data visible in URL) -->
<form action="/search" method="GET">
  <input type="text" name="q" placeholder="Search...">
  <button type="submit">Search</button>
</form>
 
<!-- POST: login form (data hidden) -->
<form action="/login" method="POST">
  <input type="text" name="username" required>
  <input type="password" name="password" required>
  <button type="submit">Log In</button>
</form>

Input Types

HTML5 offers many type values for <input>:

| Type | Description | |------|-------------| | text | Single-line text input | | password | Masked text input | | email | Email address with validation | | number | Numeric input with spin buttons | | tel | Telephone number | | url | URL input | | search | Search field (stylable) | | date | Date picker | | time | Time picker | | color | Color picker | | file | File upload | | checkbox | Multiple-choice toggle | | radio | Single-choice selector | | range | Slider control | | hidden | Hidden field (not displayed) |

Other Form Elements

• <textarea> — multi-line text input. Use rows and cols to set dimensions.
• <select> and <option> — dropdown menus. Use <optgroup> to group options.
• <button> — clickable button. Types: submit (default), reset, button.
• <label> — associates text with an input, improving accessibility. Use for attribute matching the input's id.
• <fieldset> — groups related fields visually.
• <legend> — caption for a <fieldset>.

<fieldset>
  <legend>Contact Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
</fieldset>

Form Validation

HTML5 provides built-in validation attributes:

• required — field must be filled
• minlength / maxlength — text length limits
• min / max — numeric range limits
• pattern — regex pattern validation (e.g., pattern="[A-Za-z]+")
• type="email" — validates email format automatically

Validation happens client-side before submission. Always validate on the server too, as client-side validation can be bypassed.

Accessibility Best Practices

• Every input should have an associated <label>
• Use fieldset and legend for grouping related inputs
• Use aria-describedby for descriptive help text
• Use autocomplete attributes for common fields (name, email, address)