Why input elements "value" attributes are sometimes not presented in the HTML? - html

Question

Sometimes input elements are visually presenting their values however these values are not presented in the element HTML. Not as "text" and not as "value" attributes. Like here
Actually, it's a value attribute, but it is hidden.
I mean even existence of value attribute itself is hidden.
I'd like to understand why those value attributes are hidden ?

Answer 1

From the frontend development side, I believe there are a few ways to ensure value stays empty while the element still displays the user's input from the DOMString. For example, From this HTML documentation
input and textarea elements have a dirty value flag. This is used to track the interaction between the value and default value. If it is false, value mirrors the default value. If it is true, the default value is ignored.
So, if the default value is empty, and this dirty value flag is set, value attribute will remain empty regardless of user input.

Answer 2

<button> , <input> and <option> elements, the value attribute specifies the initial value of the element. that's why input elements “value” attributes are not presented in the HTML?

Answer 3

In case of text type input elements (and some others as well), in native HTML value attribute of the element presents its default value.
The text value inserted by the user is not presented there, so only the default value will always presented in value attribute.
In case no default value is set for that element, the value attribute will not be presented in the element HTML.
Similarly to the presented in the attached screenshot.

Answer 4

We need to understand what is value attribute ?
In general, The value attribute specifies the value of an <input> element.
Let's say for button - it defines the text on the button.
for password input field it must be hidden.
So for any sensitive field a value attribute should be hidden.
Update 1 :
To answer your question in more details, I have created 2 html files.
HTML File 1 :
<form>
<div>
<label for="title">Post title:</label>
<input type="text" id="title" name="title" value="My excellent blog post">
</div>
<div>
<label for="content">Post content:</label>
<textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
</textarea>
</div>
<div>
<button type="submit">Update post</button>
</div>
<input type="hidden" id="postId" name="postId" value="34657">
</form>
here value is
value="My excellent blog post"
and in UI it looks like this :
Now let's assume if it was a username input field just as you have described, we don't want to pass value attribute in that case, instead it should be placeholder attribute.
Let me remove value attribute and put placeholder instead.
HTML :
<form>
<div>
<label for="title">Post title:</label>
<input type="text" id="title" name="title" placeholder="Enter your title here">
</div>
<div>
<label for="content">Post content:</label>
<textarea id="content" name="content" cols="60" rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
</textarea>
</div>
<div>
<button type="submit">Update post</button>
</div>
<input type="hidden" id="postId" name="postId" value="34657">
</form>
and in UI it looks like this :
Now, having said all these, a placeholder attribute is not a mandatory field it depends on UI developer and Business unit.