Why Input Elements "value" Attributes Are Sometimes Not Presented In The Html?

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 Act

Solution 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.

Solution 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?

Solution 3:

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 passwordinput field it must be hidden.

So for any sensitivefield 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><labelfor="title">Post title:</label><inputtype="text"id="title"name="title"value="My excellent blog post"></div><div><labelfor="content">Post content:</label><textareaid="content"name="content"cols="60"rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea></div><div><buttontype="submit">Update post</button></div><inputtype="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><labelfor="title">Post title:</label><inputtype="text"id="title"name="title"placeholder="Enter your title here"></div><div><labelfor="content">Post content:</label><textareaid="content"name="content"cols="60"rows="5">
This is the content of my excellent blog post. I hope you enjoy it!
    </textarea></div><div><buttontype="submit">Update post</button></div><inputtype="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.

Solution 4:

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.