Part 4: Forms and User Input

Introduction

Forms are the primary way users send data to a server. Every login page, search box, settings panel, and data entry screen is built on HTML form elements. Getting forms right — semantically correct labels, proper input types, built-in validation — reduces the amount of JavaScript needed and makes pages more accessible by default.

This part covers every form element I use regularly, along with the patterns that make forms work correctly without relying entirely on custom JavaScript.

---

The <form> Element

<form action="/submit" method="post">
  <!-- form fields -->
  <button type="submit">Submit</button>
</form>

Key attributes:

Attribute	Values	Purpose
action	URL	Where to send the form data. Defaults to current URL if omitted.
method	get, post	HTTP method. get appends data to URL; post sends in body.
enctype	application/x-www-form-urlencoded, multipart/form-data, text/plain	How to encode form data. Required multipart/form-data for file uploads.
novalidate	boolean	Disables browser's built-in validation (useful when handling validation in JavaScript).
autocomplete	on, off	Whether to allow browser autocomplete.

GET vs POST:

• GET — data goes in the URL query string. Use for search forms, filtering, anything that should be bookmarkable.

• POST — data goes in the request body, not visible in the URL. Use for logins, data submissions, anything that modifies server state.

---

Labels

Labels are the most important accessibility element in a form. Every interactive form field needs a label.

Explicit Label

<label for="username">Username</label>
<input type="text" id="username" name="username" />

The for attribute matches the id of the input. Clicking the label focuses the input — this is especially important on mobile where tap targets are small.

Implicit Label (Wrapped)

<label>
  Username
  <input type="text" name="username" />
</label>

When the input is inside the <label>, the for/id linkage is implicit. Both styles are valid.

Never use placeholder text as a substitute for a label. Placeholders disappear when typing starts and do not work as accessible labels. They are appropriate as examples of expected format, not as the field's purpose.

---

The <input> Element

<input> is the most versatile form element. The type attribute controls what kind of input it renders.

Text Inputs

<!-- Single-line text -->
<input type="text" name="username" id="username" placeholder="e.g. htunn" />

<!-- Email — browser validates email format -->
<input type="email" name="email" id="email" />

<!-- Password — masks input -->
<input type="password" name="password" id="password" />

<!-- URL — browser validates URL format -->
<input type="url" name="website" id="website" />

<!-- Search — hint to browser for search-specific UI -->
<input type="search" name="q" id="q" />

<!-- Telephone — numeric keyboard on mobile -->
<input type="tel" name="phone" id="phone" />

Using the correct type does several things without any JavaScript:

• Triggers the right keyboard on mobile (numeric for tel, @ key for email)

• Enables browser-native format validation

• Enables browser autocomplete for the correct category of data

Number Inputs

<input type="number" name="port" id="port" min="1" max="65535" step="1" value="8080" />

Date and Time Inputs

<input type="date" name="start-date" id="start-date" />
<input type="time" name="meeting-time" id="meeting-time" />
<input type="datetime-local" name="scheduled-at" id="scheduled-at" />
<input type="month" name="billing-month" id="billing-month" />

Date inputs render a date picker natively in most browsers, removing the need for a JavaScript date picker library for basic use.

Checkbox

<label>
  <input type="checkbox" name="agree" id="agree" value="yes" />
  I agree to the terms of service
</label>

For multiple independent options:

<fieldset>
  <legend>Notification preferences</legend>
  <label><input type="checkbox" name="notify" value="email" /> Email</label>
  <label><input type="checkbox" name="notify" value="sms" checked /> SMS</label>
  <label><input type="checkbox" name="notify" value="push" /> Push notification</label>
</fieldset>

checked pre-checks the box.

Radio Buttons

Radio buttons form a group where only one can be selected. Group them with the same name:

<fieldset>
  <legend>Scan mode</legend>
  <label><input type="radio" name="mode" value="passive" checked /> Passive</label>
  <label><input type="radio" name="mode" value="active" /> Active</label>
  <label><input type="radio" name="mode" value="aggressive" /> Aggressive</label>
</fieldset>

File Input

<label for="report-upload">Upload scan report</label>
<input type="file" id="report-upload" name="report" accept=".json,.txt,.pdf" />

For multiple files:

<input type="file" name="logs" multiple accept=".log,.txt" />

The form must use enctype="multipart/form-data" for file uploads to work.

Hidden Input

<input type="hidden" name="csrf_token" value="abc123xyz" />

Hidden inputs submit data with the form without being visible to the user. Commonly used for CSRF tokens, pre-filled values, or state management.

Range Slider

<label for="timeout">Request timeout: <span id="timeout-value">30</span>s</label>
<input type="range" id="timeout" name="timeout" min="5" max="120" step="5" value="30" />

Color Picker

<label for="highlight-color">Highlight color</label>
<input type="color" id="highlight-color" name="highlight-color" value="#ff6b35" />

---

<textarea>

Multi-line text input:

<label for="notes">Notes</label>
<textarea id="notes" name="notes" rows="6" cols="50" placeholder="Optional notes..."></textarea>

rows and cols set the default visible size. resize: none in CSS if you want to prevent user resizing.

---

<select> and <option>

Dropdown menu:

<label for="region">Region</label>
<select id="region" name="region">
  <option value="">Select a region…</option>
  <option value="us-east-1">US East (N. Virginia)</option>
  <option value="ap-southeast-1">Asia Pacific (Singapore)</option>
  <option value="eu-west-1">Europe (Ireland)</option>
</select>

Pre-select an option with selected:

<option value="ap-southeast-1" selected>Asia Pacific (Singapore)</option>

Option Groups

<select id="runtime" name="runtime">
  <optgroup label="Python">
    <option value="python3.12">Python 3.12</option>
    <option value="python3.11">Python 3.11</option>
  </optgroup>
  <optgroup label="Rust">
    <option value="rust-stable">Stable</option>
    <option value="rust-nightly">Nightly</option>
  </optgroup>
</select>

Multiple Select

<select id="tags" name="tags" multiple size="4">
  <option value="security">security</option>
  <option value="rust">rust</option>
  <option value="automation">automation</option>
  <option value="cli">cli</option>
</select>

---

<fieldset> and <legend>

Group related inputs visually and semantically:

<fieldset>
  <legend>Target Configuration</legend>

  <label for="target-url">Target URL</label>
  <input type="url" id="target-url" name="target_url" required />

  <label for="scan-depth">Scan depth</label>
  <input type="number" id="scan-depth" name="scan_depth" min="1" max="10" value="3" />
</fieldset>

<fieldset>
  <legend>Authentication</legend>

  <label for="api-key">API Key</label>
  <input type="password" id="api-key" name="api_key" autocomplete="current-password" />
</fieldset>

Screen readers announce the <legend> text as context for the fields within the <fieldset>.

---

Buttons

<!-- Submit the form -->
<button type="submit">Submit</button>

<!-- Reset all fields to default values -->
<button type="reset">Reset</button>

<!-- Button with no default form behaviour (trigger JS) -->
<button type="button" id="preview-btn">Preview</button>

Always specify type. Without it, the default is submit, which means buttons inside a form will submit it unless explicitly typed otherwise. This catches many developers by surprise.

---

Built-in Validation Attributes

HTML provides validation attributes that work without JavaScript:

Attribute	Purpose
required	Field must have a value
minlength="n"	Minimum character count
maxlength="n"	Maximum character count
min="n"	Minimum value (number/date inputs)
max="n"	Maximum value (number/date inputs)
pattern="regex"	Value must match regular expression
type="email"	Browser validates email format
type="url"	Browser validates URL format

<label for="api-url">API Endpoint</label>
<input
  type="url"
  id="api-url"
  name="api_url"
  required
  placeholder="https://api.example.com"
/>

<label for="token">Access Token</label>
<input
  type="text"
  id="token"
  name="token"
  required
  minlength="32"
  maxlength="256"
  pattern="[A-Za-z0-9_\-]+"
  autocomplete="off"
/>

Use the :valid and :invalid CSS pseudo-classes to style fields based on validation state:

input:invalid {
  border-color: #e53e3e;
}

input:valid {
  border-color: #38a169;
}

---

Accessibility Best Practices for Forms

1. Every input has a visible label — do not rely on placeholder text alone

2. Group related fields with <fieldset> and <legend>

3. Provide error messages — don't just highlight in red, say what's wrong in text

4. Associate error messages with inputs using aria-describedby:

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  aria-describedby="email-error"
  required
/>
<p id="email-error" role="alert" class="error-message">
  Please enter a valid email address.
</p>

1. Use autocomplete attributes to help password managers and browsers fill fields correctly:

<input type="text" name="name" autocomplete="name" />
<input type="email" name="email" autocomplete="email" />
<input type="password" name="current-password" autocomplete="current-password" />
<input type="password" name="new-password" autocomplete="new-password" />

---

A Complete Form Example

<form action="/scan" method="post">
  <fieldset>
    <legend>Scan Configuration</legend>

    <div class="field">
      <label for="target">Target URL</label>
      <input
        type="url"
        id="target"
        name="target"
        placeholder="https://example.com"
        required
      />
    </div>

    <div class="field">
      <label for="timeout">Request Timeout (seconds)</label>
      <input
        type="number"
        id="timeout"
        name="timeout"
        min="5"
        max="120"
        value="30"
      />
    </div>

    <fieldset>
      <legend>Scan Mode</legend>
      <label><input type="radio" name="mode" value="passive" checked /> Passive</label>
      <label><input type="radio" name="mode" value="active" /> Active</label>
    </fieldset>

    <div class="field">
      <label for="payload-file">Custom Payload File (optional)</label>
      <input type="file" id="payload-file" name="payload_file" accept=".json" />
    </div>
  </fieldset>

  <fieldset>
    <legend>Output Options</legend>

    <label>
      <input type="checkbox" name="verbose" value="1" />
      Verbose output
    </label>

    <label for="output-format">Output Format</label>
    <select id="output-format" name="output_format">
      <option value="terminal">Terminal</option>
      <option value="json">JSON</option>
      <option value="csv">CSV</option>
    </select>
  </fieldset>

  <button type="submit">Start Scan</button>
  <button type="reset">Reset</button>
</form>

---

Summary

Element	Purpose
<form action method>	Container for all form fields
<label for>	Accessible label linked to an input
`<input type="text	email
`<input type="checkbox	radio">`
<input type="file">	File uploads
<input type="hidden">	Hidden data (CSRF tokens etc.)
<textarea>	Multi-line text input
<select> / <option>	Dropdown menus
<fieldset> / <legend>	Grouping related fields
`<button type="submit	reset
required, pattern, min, max	Built-in validation
autocomplete	Hint for browser/password manager
aria-describedby	Link error messages to inputs

---

Up Next

Part 5 covers accessibility, SEO fundamentals, and HTML5 features that make pages more robust and discoverable.