How to Set the Default Value of a Text Input Field Using JavaScript
Last updated 2 weeks, 3 days ago | 22 views 75 5
Setting default values in HTML form inputs is a common task when building dynamic forms — especially when pre-filling fields with previously saved data or providing suggested entries. JavaScript makes it easy to programmatically set or change the value of an <input> element.
In this article, you’ll learn:
-
How default values work in HTML and JavaScript
-
Multiple ways to set input values using JavaScript
-
A complete working example
-
Tips and common pitfalls
Understanding the Basics
What is a Default Value?
A default value is what appears in an input field before the user types anything.
In plain HTML:
<input type="text" value="John Doe">
This displays “John Doe” as the prefilled value.
Setting Default Values in JavaScript
There are two main ways to set the value of an input field:
✅ 1. Using value property
document.getElementById("myInput").value = "Jane Smith";
This sets the current value of the input field.
✅ 2. Using setAttribute()
document.getElementById("myInput").setAttribute("value", "Jane Smith");
This updates the default value (HTML attribute), but not necessarily the current displayed value if the input has already been modified.
⚠️ Difference Between value and defaultValue
-
value: Current value in the input box (user can change it) -
defaultValue: The value originally set via HTML or JavaScript usingsetAttribute("value", ...)
✅ Recommended: Use .value for User Interaction
Unless you're manipulating the DOM directly or regenerating the form, use .value for dynamic behavior.
Complete Example
Here’s a full HTML + JavaScript example that sets default input values on page load or button click.
HTML + JS
<!DOCTYPE html>
<html>
<head>
<title>Set Input Default Value with JavaScript</title>
</head>
<body>
<h2>Set Default Value in Input</h2>
<label for="username">Username:</label><br>
<input type="text" id="username" placeholder="Enter your username"><br><br>
<button onclick="setDefault()">Set Default</button>
<button onclick="clearInput()">Clear</button>
<script>
function setDefault() {
// Method 1: Recommended
document.getElementById("username").value = "default_user123";
// Optional: Update the HTML attribute too
document.getElementById("username").setAttribute("value", "default_user123");
}
function clearInput() {
document.getElementById("username").value = "";
}
</script>
</body>
</html>
Output:
-
Clicking Set Default fills the input with
default_user123 -
Clicking Clear empties the field
Tips
-
Use
.valuewhen you want to set or read the current input content -
Use
setAttribute("value", ...)if you're working with HTML templates or want to modify form behavior before submission resets -
You can set values dynamically using variables:
const name = "Alice"; input.value = name;
⚠️ Common Pitfalls
| Pitfall | Why It Happens | Fix |
|---|---|---|
Input shows blank even after .setAttribute() |
Only sets the HTML, not the live DOM value | Use .value instead |
| Trying to set value before the DOM is ready | Script runs before the element is loaded | Wrap code inside window.onload or place script after HTML |
Reset button clears .value but not value attribute |
HTML reset resets to original value attribute |
Set both .value and setAttribute("value", ...) if needed |
Summary
-
Use
element.value = "some text"to set input value dynamically -
Use
element.setAttribute("value", "text")to set the HTML default -
Know the difference between
valueanddefaultValue -
Always ensure DOM elements are loaded before accessing them
Would you like a version of this using React or with form validation included?
Click here
