Problem Statement
What does the value attribute do in an input field?
Explanation
The value attribute sets the initial or default value for an input field. Unlike placeholder text which disappears when users start typing, the value is actual data that appears in the field. For text inputs, the value is the text that appears initially. Users can change it. For checkboxes and radio buttons, the value is the data sent to the server when selected. For submit buttons, the value is the button text. The value attribute has different uses depending on input type. For text fields, it can pre-fill data when editing existing information. For hidden inputs, it holds data to send with the form. For buttons, it sets the label. When a form is submitted, the server receives the name-value pairs for each input. Understanding how value works with different input types is important for form development.
Code Solution
SolutionRead Only
<!-- Pre-filled text input -->
<form>
<label for="country">Country:</label>
<input type="text"
id="country"
name="country"
value="United States">
</form>
<!-- Edit form with values -->
<form action="/update-profile" method="POST">
<input type="text" name="name" value="John Doe">
<input type="email" name="email" value="john@example.com">
<input type="text" name="city" value="New York">
<button type="submit">Update Profile</button>
</form>
<!-- Radio buttons with values -->
<form>
<label>
<input type="radio" name="size" value="small">
Small
</label>
<label>
<input type="radio" name="size" value="medium" checked>
Medium
</label>
<label>
<input type="radio" name="size" value="large">
Large
</label>
</form>
<!-- Hidden input with value -->
<form action="/submit" method="POST">
<input type="hidden" name="user_id" value="12345">
<input type="text" name="feedback">
<button type="submit">Send Feedback</button>
</form>