Form Attributes & Basic Validation: required, placeholder, value

HTML provides a set of attributes that make forms more useful and harder to submit incorrectly. You do not need JavaScript for basic validation — the browser handles it automatically.

required — prevent empty submission

Adding required to an input means the form cannot be submitted while that field is empty. The browser blocks submission and shows a validation message automatically.

<label for="contact-name">Your name</label>
<input type="text" id="contact-name" name="name" required>

required is a boolean attribute — it has no value. Simply writing the word is enough.

It works on <input>, <textarea>, and <select>:

<textarea id="message" name="message" required></textarea>

<select id="topic" name="topic" required>
  <option value="" disabled selected>Choose a topic...</option>
  <option value="general">General question</option>
</select>

placeholder — hint text inside a field

placeholder displays hint text inside an input before the user types. It disappears as soon as the user starts typing.

<input type="text" id="contact-name" name="name" placeholder="e.g. Jane Smith">
<input type="email" id="contact-email" name="email" placeholder="you@example.com">

Use placeholder for format hints (“e.g. 07700 900000”) not as a label replacement. The user needs the label to always be visible — placeholder text vanishes and cannot be relied on for identification.

value — default or preset data

The value attribute sets the initial content of an input. For text inputs, it pre-fills the field:

<input type="text" id="contact-name" name="name" value="Jane Smith">

For checkboxes and radio buttons, value is the data submitted when the option is selected — as you saw in Lesson 04. It does not appear in the UI.

<input type="radio" id="level-easy" name="difficulty" value="easy">

For <button>, value can carry data but is rarely needed for a basic submit button.

type="email" — automatic email validation

You already know type="email" from Lesson 01. The browser validates that the field contains an @ symbol before submitting. No JavaScript needed.

<input type="email" id="contact-email" name="email" required placeholder="you@example.com">

Combining type="email" with required means the field must be filled in and must look like an email address.

A complete validated form

<form>
  <label for="contact-name">Your name</label>
  <input type="text" id="contact-name" name="name" required placeholder="e.g. Jane Smith">

  <label for="contact-email">Email address</label>
  <input type="email" id="contact-email" name="email" required placeholder="you@example.com">

  <label for="topic">Topic</label>
  <select id="topic" name="topic" required>
    <option value="" disabled selected>Choose a topic...</option>
    <option value="general">General question</option>
    <option value="feedback">Feedback</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

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

Exercise

Open index.html in VS Code.

You are going to enhance your existing form by adding required and placeholder to the appropriate fields.

1. Add required to your name input, email input, and textarea.
2. Add a placeholder to your name input (e.g. placeholder="Your name") and your email input (e.g. placeholder="you@example.com").
3. If your <select> has a prompt option with an empty value, add required to it as well.

Before:

<input type="text" id="contact-name" name="name">

After:

<input type="text" id="contact-name" name="name" required placeholder="Your name">

4. Save and open index.html in your browser.
5. Try clicking the submit button without filling anything in — the browser should highlight the first required field and prevent submission.
6. Fill in an invalid email address (e.g. “notanemail”) and try submitting — the browser should reject it with a validation message.

Module 06 Recap

• <form> — the container for all form elements.
• <input> — self-closing. type controls the field kind (text, email, password, checkbox, radio). Always include name.
• <label> — identifies a field. Connect to inputs using for (on label) and id (on input).
• <textarea> — multi-line text. Not self-closing. Needs a label.
• <select> + <option> — dropdown menu. value on each option is what gets submitted.
• <button type="submit"> — submits the form.
• type="checkbox" — any number selectable. type="radio" — one per name group.
• required — prevents submission if empty. placeholder — hint text inside field. value — default or submitted data.
• Basic validation (required fields, email format) is handled by the browser with no JavaScript.