name / value / placeholder / required

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. John Doe"
  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

<!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. taro_yamada"
        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>

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.

Rendered HTML Image

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.