name / value / placeholder / required

Since:		HTML5(2014)

Form controls have various attributes related to submitting, displaying, and managing input values. Among these, name, value, placeholder, and required are fundamental attributes used in almost every form.

Syntax

<!-- Basic attribute combination -->
<input type="text"
  name="username"
  value="default value"
  placeholder="e.g. kiryu_kazuma"
  required
  autofocus
  autocomplete="name">

<!-- Read-only and disabled -->
<input type="text" name="code" value="ABC123" readonly>
<input type="text" name="locked" value="Cannot be changed" disabled>

Attribute List

Attribute	Description
name	Specifies the key name for the data when the form is submitted. The server receives the data under this name.
value	Specifies the initial value of the control, or the value to be submitted.
placeholder	Specifies hint text displayed when the field is empty. It disappears as soon as the user starts typing.
required	Makes the field required. An error is shown if the user tries to submit the form while the field is empty.
autofocus	Automatically focuses the control when the page loads. Only one element per page can have this attribute.
autocomplete	Controls the browser's autocomplete behavior. Accepts values such as `on`, `off`, or hint tokens like `email`.
readonly	Prevents the user from modifying the value, but the field is still included in form submission.
disabled	Fully disables the control. The field is excluded from form submission.

Sample Code

sample_name_value_placeholder_required.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Form Attributes</title>
</head>
<body>

  <form>
    <!-- autofocus automatically focuses this field on page load -->
    <p>
      <label for="uname">Username (required):</label>
      <input type="text" id="uname" name="username"
        placeholder="e.g. kiryu_kazuma"
        required autofocus autocomplete="username">
    </p>

    <!-- email type + required -->
    <p>
      <label for="mail">Email address (required):</label>
      <input type="email" id="mail" name="email"
        placeholder="example@mail.com"
        required autocomplete="email">
    </p>

    <!-- readonly: cannot be changed, but is submitted -->
    <p>
      <label for="plan">Your plan:</label>
      <input type="text" id="plan" name="plan" value="Standard" readonly>
    </p>

    <!-- disabled: inactive and not submitted -->
    <p>
      <label for="point">Points:</label>
      <input type="text" id="point" name="point" value="1500" disabled>
    </p>

    <p><button type="submit">Register</button></p>
  </form>

</body>
</html>

View sample page

Result

The "Username" field is focused automatically when the page loads. If you click "Register" while a required field is empty, a validation error is shown. The "Your plan" field cannot be changed but is submitted, while the "Points" field is grayed out and not submitted.

View sample page

Notes

The name attribute is the backbone of any form. Data from a control without a name attribute is not sent when the form is submitted. Always give each input an appropriate name.

placeholder cannot substitute for a label. Because it disappears when the field is focused, users may forget what they were supposed to enter. Always provide a <label> element separately.

Both readonly and disabled prevent editing, but there is an important difference. A readonly field is included in form submission, while a disabled field is not. In addition, a disabled field cannot receive focus. Use readonly when you want to display a value on a confirmation screen while still submitting it.

Validation-related attributes (such as min, max, and pattern) are covered in detail on the "Input Validation Attributes" page.

Practical Tips and Common Mistakes

Each form attribute has a clear purpose, but the combination and usage significantly affect UX and accessibility.

Attribute	Common Mistake	Correct Approach
placeholder	Using it as a replacement for a label	Always use it together with a label. placeholder is for hints and examples only — it disappears when the user starts typing, making it unsuitable as a label
required	Making a field required without any visual indicator	Add a visual marker like "* (required)" with CSS, and also add aria-required="true"
name	Omitting name on submit forms	Without a name attribute, data is not sent to the server. This applies even when using form.submit() or FormData
value	Forgetting value on radio and checkbox inputs	For radio and checkbox, the value attribute is the data that gets submitted — always specify it

<!-- Correct use of label and placeholder -->
<form>
  <div>
    <!-- label is required. placeholder is supplementary only -->
    <label for="username">Username <span class="required">*</span></label>
    <input type="text"
           id="username"
           name="username"
           placeholder="e.g. kazuma_kiryu"
           required
           aria-required="true">
  </div>

  <!-- The value attribute of radio buttons is the data sent to the server -->
  <fieldset>
    <legend>Gender (optional)</legend>
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
    <label><input type="radio" name="gender" value="other"> Other</label>
  </fieldset>
</form>

Common Mistakes

Mistake 1: An input without name is not submitted with the form

When a form is submitted, the server receives data keyed by each control's name attribute. Controls without a name attribute are not included in the submission. This applies whether using a regular form submit or FormData.

<!-- NG: name attribute is missing -->
<form action="/submit" method="post">
  <input type="text" id="search" placeholder="Search">
  <button type="submit">Search</button>
</form>

The corrected version looks like this:

<!-- OK: specify the name attribute -->
<form action="/submit" method="post">
  <input type="text" id="search" name="q" placeholder="Search">
  <button type="submit">Search</button>
</form>

Mistake 2: Using placeholder as a substitute for label

placeholder is meant to show a hint or example, not serve as a label. It disappears as soon as the user starts typing, leaving no indication of what the field requires. Always provide a separate label element for each input.

<!-- NG: label is omitted, relying on placeholder alone -->
<input type="email" placeholder="Enter your email">

The corrected version looks like this:

<!-- OK: use label and placeholder together -->
<label for="mail">Email address:</label>
<input type="email" id="mail" name="email" placeholder="example@mail.com">