Chapter 2

Forms & Input Validation

The <form> element, every major input type, grouping controls and HTML5 validation.

Forms — Introduction & <form> Tag

<form action="/submit.php" method="POST" autocomplete="on">
  <!-- form elements go here -->
</form>

Attribute	Purpose
`action`	URL of the server-side script that processes the form data
`method`	`GET` appends data to the URL; `POST` sends data in the request body (for sensitive data)
`novalidate`	Disables the browser's built-in validation (when validating with JavaScript)
`autocomplete`	`on`/`off` — enables/disables browser autocomplete
`enctype`	`multipart/form-data` — required when uploading files

GET: data in URL. Use for search/filters, bookmarkable. POST: data in body. Use for login/registration/payments.

Input Types

The <input> element changes behaviour based on its type attribute.

Type	Purpose
`text`	Single-line text
`password`	Masked input
`email`	Email with validation
`number`	Numeric with spinners
`tel`	Phone number field (supports `pattern`)
`url`	URL with validation
`search`	Search field
`date` / `time`	Date / time picker (HTML5)
`color`	Colour picker (HTML5)
`range`	Slider control (HTML5)
`checkbox`	Multi-select toggle
`radio`	Single-select group
`file`	File upload selector (supports `multiple`)
`hidden`	Not shown to the user
`submit` / `reset`	Submit form button / reset to defaults
`image`	Image submit button

Checkboxes & Radio Buttons

<fieldset>
  <legend>Grocery List</legend>
  <input type="checkbox" id="item1" name="item" value="tea" checked>
  <label for="item1">Tea</label>
  <input type="checkbox" id="item2" name="item" value="coffee">
  <label for="item2">Coffee</label>
</fieldset>

Checkboxes allow zero or more selections. Group with the same name to send an array of values; checked pre-selects an option.
Radios allow exactly ONE selection. All radios in a group must share the same name; checked pre-selects one.
Always pair every <input> with a <label> using matching id/for values, and group related controls with <fieldset> + <legend>.

Select, Textarea & Buttons

<select name="city">
  <optgroup label="East Malaysia">
    <option value="">-- Select --</option>
    <option value="kl">Kuala Lumpur</option>
    <option value="mlk" selected>Melaka</option>
  </optgroup>
</select>

<textarea name="message" rows="4"></textarea>

<button type="submit">Send Form</button>
<button type="reset">Clear Fields</button>
<button type="button" onclick="validate()">Check</button>

Prefer <button type="button"> over <input type="button"> — buttons can contain HTML. Always specify type to avoid accidental form submission.

HTML5 Validation

Attribute	Meaning
`required`	Field must not be empty
`minlength` / `maxlength`	Minimum / maximum number of characters
`min` / `max`	Minimum/maximum value for numbers and dates
`pattern`	Regular expression the value must match
`type="email"` / `type="url"`	Validates email / URL format automatically
`type="number"`	Enforces numeric input

<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="age">Age</label>
  <input type="number" id="age" name="age" min="1" max="120">

  <button type="submit">Submit</button>
</form>

HTML5 validation is a first layer only. Always validate on the server side too — client validation can be bypassed.

Activity — complete the code

Complete the code correctly to mark this lesson as complete automatically.

Complete the form so it posts an email address and requires it.

<form action="/submit.php" ="POST">
  <label for="email">Email</label>
  <input type="" id="email" name="email" >
  <button type="">Send</button>
</form>