HTML value Attribute

Introduction

The value attribute is a fundamental HTML form feature that sets the initial or submitted data for a control. On a text field it pre-fills what the user sees; on a checkbox or radio it defines what gets sent when that option is selected.

Understanding value is essential for building forms with defaults, hidden fields, submit button labels, and grouped radio options. It works together with name (how data is labeled on submit) and type (what kind of control it is).

What You’ll Learn

Purpose of value

The primary purpose of the value attribute is to specify data associated with a form element. For text-like inputs, it is the starting content in the field. For checkboxes and radios, it is the payload paired with the control’s name when selected. For type="submit" and type="button" inputs, it sets the button’s visible label.

Users can edit text values, but unchecked checkboxes are omitted from form submission entirely regardless of their value.

📝 Syntax

Add value with a string on supported form elements:

<input type="text" name="username" value="JohnDoe">
<input type="checkbox" name="subscribe" value="yes" checked>
<input type="submit" value="Send">

Syntax Rules

• Always a string (quote special characters appropriately).
• On text, email, number, etc.: initial displayed value; user can change it.
• On checkbox/radio: submitted value when checked; visibility comes from labels.
• On hidden inputs: fixed data sent with the form (not shown to users).
• JavaScript: read/write with element.value (live current value).
• On <option>: value submitted for that select choice.

💎 Values

The value attribute accepts a string. Meaning depends on the element and input type:

• Text inputs (text, email, search, etc.) — Pre-filled string shown in the field.
• Checkbox / radio — Data associated with that option when selected (e.g. value="pro").
• Submit / reset / button inputs — Label text on the button face.
• Hidden — Data included in submission without display.
• <option> — Value for that dropdown item (falls back to option text if omitted).

<!-- Text default -->
<input type="text" value="Hello">

<!-- Checkbox payload when checked -->
<input type="checkbox" name="agree" value="yes">

<!-- Radio: same name, different values -->
<input type="radio" name="plan" value="free">
<input type="radio" name="plan" value="pro">

Applicable Elements

value vs name vs defaultValue

Examples Gallery

Pre-fill a form, update values with JavaScript, and see how radio buttons share a name but use different values.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" value="JohnDoe">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="john.doe@example.com">

  <input type="checkbox" id="subscribe" name="subscribe" value="yes" checked>
  <label for="subscribe">Subscribe</label>

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

<input type="text" id="dynamicField">

<script>
  document.getElementById("dynamicField").value = "DynamicValue";
</script>

<input type="radio" name="size" value="s"> Small
<input type="radio" name="size" value="m" checked> Medium
<input type="radio" name="size" value="l"> Large

♿ Accessibility

• Do not rely on value for visible labels — Use <label> elements so screen readers announce checkbox and radio options clearly.
• Pre-filled values — Users with assistive tech hear defaults; ensure they are accurate and editable where appropriate.
• Avoid sensitive defaults — Do not pre-fill passwords or private data without user consent.
• Submit button value — Acts as accessible name for input type="submit"; make it descriptive (“Send message” not “OK” alone).
• Distinguish placeholder from value — Placeholders are hints and may be skipped by some assistive technologies.

💡 Best Practices

• Use value to provide default or pre-filled values for form elements.
• When dynamically setting values with JavaScript, ensure it aligns with user experience and form logic.
• Be mindful of accessibility when using pre-filled values with assistive technologies.

🎉 Conclusion

The value attribute is a crucial part of HTML forms, letting you set defaults, button labels, and submission payloads. Used with name and the right type, it structures how data flows from browser to server.

Master both HTML defaults and the JavaScript .value property to build forms that are easier to use and easier to process on the backend.