Where input value will be saved?

Question

Let's say we have following HTML:

<div class="form-group">
    <label class="col-md-3 col-xs-3 col-sm-3 control-label">Phone</label>
    <div class="col-md-4 col-xs-4 col-sm-4">                   
        <input id="input_id" type="tel" required="" pattern="^\d{10}$"> 
    </div>
</div>

It seems like input doesn't have attribute value, but if I execute

document.querySelector('#input_id').value;
document.querySelector('#input_id').defaultValue;

I will get:

""
""

as output. Then if I type in input field 123 and execute one more time:

document.querySelector('#input_id').value;
document.querySelector('#input_id').defaultValue;

Output will be:

"123"
""

---

This example means there is an attribute value for an input field. The question is:

Where this values(default and current) are stored, since HTML doesn't have any information about it?

Answer 1

The value of an input is its internal state. It may or may not equal the value attribute on an input element.

A control’s value is its internal state. As such, it might not match the user’s current input.

For instance, if a user enters the word "three" into a numeric field that expects digits, the user’s input would be the string "three" but the control’s value would remain unchanged. Or, if a user enters the email address " [email protected]" (with leading whitespace) into an email field, the user’s input would be the string " [email protected]" but the browser’s UI for email fields might translate that into a value of "[email protected]" (without the leading whitespace).

_{https://www.w3.org/TR/html51/sec-forms.html#forms-value}

Whereas the "value" attribute on an input merely represents its default value:

The value content attribute gives the default value of the input element. When the value content attribute is added, set, or removed, if the control’s dirty value flag is false, the user agent must set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise, and then run the current value sanitization algorithm, if one is defined.

_{https://www.w3.org/TR/html51/sec-forms.html#element-attrdef-input-value}

Keep in mind that even if the user enters any text into the input, it will not update the value attribute of the input. Try typing in text into the input in snippet below, and notice that the value attribute doesn't get updated:

setInterval(function() {
  console.clear();
  console.log("Attribute: ", $("input").attr("value"));
  console.log("Value: ", $("input").val());
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input value="default">

Answer 2

Stored in a property of DOM element object. By default, if you write:

<input id="input_id" type="tel" required="" pattern="^\d{10}$"> 

Then it is like

<input id="input_id" type="tel" required="" pattern="^\d{10}$" value="">

if you write something in value as value="123" then value and default value attribute change accordingly.

Any data for DOM elements are stored within the browser's memory for that tab, which it manages itself. Since your Javascript is just a part of that memory, it is in some way stored there. The actual fiddly bits of how that all works is hidden within the browser and is probably different between browsers.