What is value attribute in form in html

HtmlConceptBeginner · 3 min read

What is the value attribute in HTML form elements?

The value attribute in HTML form elements sets the initial or current content of an input field, button, or other form control. It defines what data is sent to the server when the form is submitted or what text appears inside the element.

⚙️

How It Works

The value attribute works like a label or preset content inside form controls such as text boxes, radio buttons, checkboxes, and buttons. Imagine filling out a paper form where some fields already have a suggested answer written in pencil. That suggestion is like the value attribute in HTML.

When you open a webpage with a form, the value attribute sets what you see inside the input box or button by default. If you change the input, the new content replaces the value. When you submit the form, the browser sends the current value of each form control to the server.

💻

Example

This example shows a text input with a preset value and a submit button with a label set by the value attribute.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Value Attribute Example</title>
</head>
<body>
  <form action="#" method="GET">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" value="John Doe">
    <br><br>
    <input type="submit" value="Send">
  </form>
</body>
</html>

Output

A form with a text box showing 'John Doe' inside it and a button labeled 'Send'.

🎯

When to Use

Use the value attribute when you want to provide a default answer or label in a form field or button. For example, you might want to show a common name in a text box so users can edit it instead of typing from scratch.

It is also useful for buttons to display the text users will click, like 'Submit', 'Search', or 'Send'. For radio buttons and checkboxes, the value attribute defines what data is sent if that option is selected.

In short, use value to control what the user sees initially and what data the form sends.

✅

Key Points

The value attribute sets the initial content or label of form controls.
It determines what data is sent to the server when the form is submitted.
For text inputs, it shows default text inside the box.
For buttons, it sets the button's label.
For radio and checkbox inputs, it defines the value sent if selected.

✅

Key Takeaways

The value attribute sets default content or label in form elements.

It controls what data is sent to the server on form submission.

Use it to preset text in inputs or labels on buttons.

For radio and checkbox inputs, it defines the submitted value if selected.