Required Fields and Form Validation in HTML5

Creating a simple form is often one of the first real projects when learning HTML. But a form that actually checks what people type is what makes your website feel real and professional.

In this article, you’ll learn how to:

• Mark fields as required using HTML5 (no JavaScript needed)
• Use basic built‑in validation like email and number checks
• Show helpful messages when something is missing or wrong
• Build a small, working form step by step

If you’re a complete beginner, you’re in the right place. We’ll go slowly, explain each part, and you can copy‑paste the code and try it yourself.

---

What is form validation?

Form validation means checking that the information someone types into a form is:

• Present (not empty when it must be filled in)
• In the correct format (for example, a valid email)
• Within allowed limits (for example, a number that’s not too big or too small)

HTML5 (the modern version of HTML) gives you built‑in validation features, so you can do a lot of this without writing any JavaScript.

We’ll start with the simplest and most common feature: required fields.

---

Example 1: Your first required field

Let’s start with a tiny form that has just one required text box.

<!-- Example 1: A simple form with one required field -->
<form>
  <!-- Label: text that tells the user what this field is -->
  <label for="name">Name:</label>

  <!-- Input: where the user types -->
  <input id="name" name="name" type="text" required>

  <!-- Button: sends the form data -->
  <button type="submit">Submit</button>
</form>

What’s happening here?

• <form>: Wraps all the fields and the submit button.
• <label>: Text that describes the input. The for="name" links it to the input with id="name".
• <input>: A single‑line text box where the user types.
• required: This one keyword makes the field mandatory.
• <button type="submit">: Button that tries to send the form.

What the user sees

1. The user sees a text box labeled “Name”.
2. If they click Submit without typing anything, the browser will:
   • Stop the form from being submitted.
   • Show a small message like “Please fill out this field.” (The exact text varies by browser.)

You didn’t write any JavaScript at all. The browser did the validation for you.

Try it yourself

1. Open a text editor (Notepad, VS Code, etc.).
2. Copy the code above into a new file.
3. Save it as form1.html.
4. Double‑click the file to open it in your browser.
5. Click Submit without entering a name and see what happens.

---

Example 2: A simple contact form with multiple required fields

Now let’s build a small “Contact Us” form. We’ll have:

• Name (required)
• Email (required, must look like an email)
• Message (required)

<!-- Example 2: A small contact form -->
<form>
  <!-- Name field (required) -->
  <label for="name">Name:</label><br>
  <input id="name" name="name" type="text" required><br><br>

  <!-- Email field (required, must be a valid email format) -->
  <label for="email">Email:</label><br>
  <input id="email" name="email" type="email" required><br><br>

  <!-- Message field (required textarea for longer text) -->
  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="4" required></textarea><br><br>

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

New things in this example

• type="email":

  • Tells the browser this field should contain an email address.
  • The browser checks for a basic email pattern (like something@domain.com).
  • On phones, it often shows an email‑friendly keyboard.

• <textarea>:

  • This is a multi‑line text box (good for messages or comments).
  • It can also be required.

What happens when users submit

• If any required field is empty, the browser won’t submit the form.
• For the email field:
  • If the user types hello and clicks Send, they’ll see a message like “Please enter an email address.”
  • If they type hello@example.com, the browser is happy.

This is a big step: you now have a real‑world contact form with basic validation.

---

Example 3: Using numbers and limits (min and max)

Required fields are great, but sometimes you also need to control the range of values.

Imagine a simple order form where the user must enter how many items they want. We want:

• The quantity to be required
• The quantity to be at least 1
• The quantity to be no more than 10

<!-- Example 3: Number input with required, min, and max -->
<form>
  <label for="quantity">Quantity (1 to 10):</label><br>
  <input
    id="quantity"
    name="quantity"
    type="number"  <!-- Only numbers allowed -->
    required        <!-- Cannot be left empty -->
    min="1"        <!-- Minimum allowed value -->
    max="10"       <!-- Maximum allowed value -->
  ><br><br>

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

How this validation works

• type="number": Shows a numeric input (may include up/down arrows).
• min="1": The smallest allowed value is 1.
• max="10": The largest allowed value is 10.

When the user clicks Order:

• If the field is empty → error (because it’s required).
• If they type 0 → error (less than the minimum).
• If they type 11 → error (greater than the maximum).
• If they type 5 → accepted.

Try changing the rules

Open your file, change max="10" to max="100", refresh the page, and test again. You’ll see how the browser instantly respects your new limits.

---

Customizing messages with title (simple tip)

Most browsers show their own default error messages. You can’t fully control these without JavaScript, but you can hint at what you expect using the title attribute.

<!-- Example: Adding a helpful title message -->
<form>
  <label for="username">Username (only letters and numbers):</label><br>
  <input
    id="username"
    name="username"
    type="text"
    required
    pattern="[A-Za-z0-9]+"  <!-- Basic pattern: letters and numbers only -->
    title="Username can only contain letters and numbers, no spaces."
  ><br><br>

  <button type="submit">Create Account</button>
</form>

What’s new here?

• pattern="[A-Za-z0-9]+":

  • This is a regular expression (often called a regex).
  • For beginners: think of it as a rule that says what characters are allowed.
  • Here it means: one or more (that’s the +) letters A–Z or numbers 0–9.

• title="...":

  • Shown to the user when the input is invalid in many browsers.
  • Helps explain why their input is not accepted.

If this feels complex, don’t worry. You can build plenty of forms using only required, type, min, and max. Patterns are an advanced extra you can learn later.

---

General tips for beginners

Here are some simple guidelines to keep your forms friendly and easy to use:

1. Don’t make everything required.

   • Only mark fields as required when you truly need the information.

2. Always use labels.

   • Labels help both users and screen readers (for accessibility).

3. Keep forms short.

   • Long forms can feel scary. Start simple and add more only if needed.

4. Test in multiple browsers.

   • Try Chrome, Firefox, Edge, or Safari to see small differences.

5. Save often and experiment.

   • You learn fastest by changing values and seeing what happens.

---

Try it yourself: Build a mini signup form

As a small challenge, combine what you’ve learned to create a signup form with:

• Name (required text)
• Email (required email)
• Age (required number, between 13 and 120)
• A short bio (optional textarea)

Here’s a starting point you can modify:

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

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

  <label for="age">Age (13 to 120):</label><br>
  <input id="age" name="age" type="number" required min="13" max="120"><br><br>

  <label for="bio">Short bio (optional):</label><br>
  <textarea id="bio" name="bio" rows="3"></textarea><br><br>

  <button type="submit">Sign Up</button>
</form>

Open this in your browser and play around with it. Try:

• Leaving required fields empty
• Entering an invalid email
• Entering an age like 10 or 200

Notice how the browser helps you by stopping the form and showing error messages.

Every time you break your own rules and see how the browser reacts, you understand form validation a little better.

---

Quick recap and what’s next

In this article, you learned how to:

• Use the required attribute to make fields mandatory
• Use type="email" and type="number" to get basic format checks for free
• Control number ranges with min and max
• Add extra rules with pattern and extra guidance with title

These HTML5 features give you powerful validation with almost no code. That’s a big win, especially when you’re just starting out.

Next steps you can explore:

• Styling error states with CSS (for example, turning invalid fields red)
• Using JavaScript to fully customize messages and behavior
• Connecting forms to a server so they actually save or use the data

For now, celebrate what you’ve built. You’ve taken a real step toward building interactive, user‑friendly websites. Keep experimenting, keep breaking things on purpose, and watch how your forms (and your skills) improve.