</> WebClass
Log in Sign up
Chapter 1 deck Chapter 2 deck Chapter 3 deck Chapter 4 deck Chapter 5 deck Chapter 6 deck Chapter 7 deck Chapter 8 deck Chapter 9 deck Chapter 10 deck Chapter 11 deck Chapter 12 deck Chapter 13 deck Chapter 14 deck

Forms & Input Validation

7 slides · use ←/→ or Space to navigate, F for fullscreen.

Reading view

← Back to the full Chapter 2 deck

Forms & Input Validation
Fullscreen for presentation · Print / PDF for a handout
1 / 7
Lesson

Forms & Input Validation

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

Forms & Input Validation

Forms — Introduction & <form> Tag

<form action="/submit.php" method="POST" autocomplete="on">
  <!-- form elements go here -->
</form>
AttributePurpose
actionURL of the server-side script that processes the form data
methodGET appends data to the URL; POST sends data in the request body (for sensitive data)
novalidateDisables the browser's built-in validation (when validating with JavaScript)
autocompleteon/off — enables/disables browser autocomplete
enctypemultipart/form-data — required when uploading files

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

Forms & Input Validation

Input Types

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

TypePurpose
textSingle-line text
passwordMasked input
emailEmail with validation
numberNumeric with spinners
telPhone number field (supports pattern)
urlURL with validation
searchSearch field
date / timeDate / time picker (HTML5)
colorColour picker (HTML5)
rangeSlider control (HTML5)
checkboxMulti-select toggle
radioSingle-select group
fileFile upload selector (supports multiple)
hiddenNot shown to the user
submit / resetSubmit form button / reset to defaults
imageImage submit button
Forms & Input Validation

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>.
Forms & Input Validation

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.

Forms & Input Validation

HTML5 Validation

AttributeMeaning
requiredField must not be empty
minlength / maxlengthMinimum / maximum number of characters
min / maxMinimum/maximum value for numbers and dates
patternRegular 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.

Forms & Input Validation

Activity — complete the code

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>