HTML forms and built-in validation

HTML Forms

<form> is the primary HTML element for collecting user input. It groups form controls and handles data submission to a server.

Basic Form Structure

html

<form action="/api/register" method="POST">
  <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="password">Password:</label>
  <input type="password" id="password" name="password" minlength="8" required>
  
  <button type="submit">Register</button>
</form>

Form Elements

Element	Description
`<input>`	Text, email, password, checkbox, radio, etc.
`<textarea>`	Multi-line text input
`<select>`	Dropdown menu
`<button>`	Submit, reset, or generic button
`<fieldset>`	Groups related controls
`<legend>`	Caption for `<fieldset>`
`<label>`	Associates text with a form control
`<output>`	Result of a calculation
`<datalist>`	Predefined options for `<input>`

Built-in Validation

HTML5 provides native form validation without JavaScript:

Validation Attributes

html

<input type="text" required>                    <!-- Must be filled -->
<input type="email">                            <!-- Must be valid email -->
<input type="url">                              <!-- Must be valid URL -->
<input type="number" min="1" max="100">         <!-- Number range -->
<input type="text" minlength="3" maxlength="50"> <!-- Length range -->
<input type="text" pattern="[A-Za-z]{3,}">       <!-- Regex pattern -->

The pattern Attribute

html

<!-- Phone number -->
<input type="tel" pattern="\+?[0-9]{10,13}" title="Enter a valid phone number">

<!-- Username (alphanumeric, 3-16 chars) -->
<input type="text" pattern="[a-zA-Z0-9]{3,16}" title="3-16 alphanumeric characters">

CSS Pseudo-classes for Validation

css

/* Valid input */
input:valid {
  border-color: green;
}

/* Invalid input */
input:invalid {
  border-color: red;
}

/* Required empty field */
input:required:placeholder-shown {
  border-color: orange;
}

/* Optional field */
input:optional {
  border-color: gray;
}

Custom Validation Messages

html

<input type="email" id="email" required
  oninvalid="this.setCustomValidity('Please enter a valid email address')"
  oninput="this.setCustomValidity('')"
>

JavaScript Validation API

javascript

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  const email = form.querySelector('#email');
  
  if (!email.checkValidity()) {
    e.preventDefault();
    email.setCustomValidity('Please provide a valid email');
    email.reportValidity();
  }
});

Disabling Built-in Validation

html

<!-- Disable for entire form -->
<form novalidate>
  <input type="email" required>
  <button type="submit">Submit</button>
</form>

<!-- Disable for specific button -->
<button type="submit" formnovalidate>Save Draft</button>

This is commonly done when using custom JavaScript validation libraries (e.g., React Hook Form, Formik).

Important:

Always pair client-side validation with server-side validation. Client-side validation can be bypassed. Use <label> elements associated with every input for accessibility, and consider novalidate when using JavaScript form libraries.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems