HTML Required Fields

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.

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.

<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.

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>

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.

<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.

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

• 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

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

Choose the option that lists all and only the correct statements.

1. Student's full name
2. Parent's phone number
3. Optional feedback
4. Class selection

Choose the option that lists all and only the correct statements.

1. <input type="text" name="student_name" required>

2. <textarea name="remarks" required></textarea>

3. <select name="class" required><option>--Choose--</option></select>

4. <input type="file" required>

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