HtmlHow-ToBeginner · 3 min read

How to Validate Email in HTML: Simple Guide with Examples

To validate an email in HTML, use the input element with type="email". This ensures the browser checks the email format automatically before form submission.

📐

Syntax

The basic syntax to validate an email in HTML uses the input element with type="email". You can add required to make the field mandatory and pattern to customize validation rules.

type="email": Tells the browser to expect an email format.
required: Makes sure the user cannot leave the field empty.
pattern: Allows custom regular expressions for stricter validation.

html

<input type="email" name="user_email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />

💻

Example

This example shows a simple form with an email input that requires a valid email format before submission. The browser will show an error if the email is missing or invalid.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Email Validation Example</title>
</head>
<body>
  <form>
    <label for="email">Enter your email:</label><br />
    <input type="email" id="email" name="email" required placeholder="example@domain.com" />
    <br /><br />
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Output

A form with a labeled email input box and a submit button. If the input is empty or not a valid email, the browser shows a message like "Please enter an email address." or "Please include an '@' in the email address."

⚠️

Common Pitfalls

Common mistakes when validating emails in HTML include:

Using type="text" instead of type="email", which skips built-in validation.
Not adding required, allowing empty submissions.
Overcomplicating the pattern attribute with incorrect regular expressions.
Relying only on HTML validation without server-side checks.

html

<!-- Wrong: no email validation -->
<input type="text" name="email" />

<!-- Right: simple email validation -->
<input type="email" name="email" required />

📊

Quick Reference

Use these tips for quick email validation in HTML forms:

Always use type="email" for email inputs.
Add required to prevent empty submissions.
Use pattern only if you need custom rules beyond basic format.
Test your form in different browsers to see validation messages.

✅

Key Takeaways

Use input type="email" for automatic email format validation in HTML.

Add required to ensure the email field is not left empty.

Use pattern only for custom email format rules, but keep it simple.

HTML validation helps user experience but always validate emails on the server too.

Test your form in multiple browsers to understand built-in validation messages.