HTML Required Attribute - Form Validation with required

Required Fields in HTML Forms

Not every form field is optional — sometimes you absolutely need a user’s name, email, or opinion. That’s where the required attribute comes in. It's the simplest way to add client-side form validation, and it works right out of the box without JavaScript.

What Does required Do?

The required attribute ensures a user cannot submit the form unless the field is filled out. If they try, the browser automatically shows a validation message — no extra coding needed.

Using required with Text Inputs

<form>
  <label for="fruit">Favorite Fruit (required):</label><br>
  <input type="text" id="fruit" name="fruit" required><br>
  <input type="submit" value="Submit">
</form>

Favorite Fruit (required): [           ]
[Submit]

Try clicking "Submit" without typing anything — the browser will stop you with a warning.

Using required with Other Input Types

You can apply required to many form elements: text, email, checkboxes, select, and even textareas.

Email Example:

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

Textarea Example:

<label for="comment">Your Comment:</label><br>
<textarea id="comment" name="comment" rows="4" cols="40" required></textarea>

Select Dropdown Example:

<label for="fruit-choice">Pick one fruit:</label><br>
<select id="fruit-choice" name="fruit" required>
  <option value="" disabled selected>-- Choose one -->
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

Required Checkboxes

To ensure a user accepts terms or confirms a checkbox, add required to the checkbox.

<input type="checkbox" id="agree" name="terms" required>
<label for="agree">I agree to the terms</label>

☐ I agree to the terms

The form won't submit unless the box is checked.

Real-World Example: Required Fields in a Survey Form

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

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

  <label for="comment">Comment:</label><br>
  <textarea id="comment" name="comment" rows="4" cols="50" required></textarea><br><br>

  <input type="submit" value="Send">
</form>

Name: [             ]  
Email: [             ]  
Comment:
[                                    ]
[                                    ]
[                                    ]
[                                    ]

[Send]

Try submitting the form without filling a field. Each required field will be highlighted until completed.

Browser Behavior

Modern browsers handle required validations automatically. They show messages, highlight empty fields, and prevent submission — no extra scripting required.

Best Practices

• Only mark fields as required when absolutely necessary
• Combine with clear <label> elements so users know what’s expected
• Don’t use required on hidden fields — the user can’t see or interact with them

Summary

The required attribute gives you instant client-side validation. You’ve now learned to:

• Add required to inputs, selects, textareas, and checkboxes
• Use it to block form submission until all key fields are filled
• Enhance user experience without writing any JavaScript

What’s Next?

Coming up: Learn how to use Pattern Matching to validate inputs using regular expressions — for more control and smarter forms.