Where Input Value Will Be Saved?

Let's say we have following HTML: It seems like input doesn't have attribute value, but if I execute document.querySelector('#input_id').value; document.querySelector('#input_id')

Solution 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 " awesome@example.com" (with leading whitespace) into an email field, the user’s input would be the string " awesome@example.com" but the browser’s UI for email fields might translate that into a value of "awesome@example.com" (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);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><inputvalue="default">

Solution 2:

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

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

Then it is like

<inputid="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.