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 ?
4 Answers
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.
<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?
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.
-
The screenshot presents situation after the user inserted some text input there. So the text is visually presented on the page, it can be received with Selenium by element.getAttribute("value") but the
value
attribute is not presented in the HTML view since it has no default value and no external library is used there to present the actual dynamic value of the element.– ProphetMay 30, 2021 at 8:39
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.
-
In the screenshot I presented the value is presented in UI but not presented in HTML. Moreover, the existence of the
value
itself is hidden and this is what I'm asking about.– ProphetMay 30, 2021 at 6:35 -
@Prophet : Updated the answer above. It depends on what kind of HTML tag a UI dev is developing. for mostly username or password field you won't see value attribute. May 30, 2021 at 6:48
-
I see, thank you. But still, in the HTML I presented there is no
placeholder
attribute, just nothing. Also, in case I want to get that value I have to get thevalue
attribute and this will give me it's value.– ProphetMay 30, 2021 at 7:03 -
1in the HTML I presented there is no placeholder attribute - it depends on UI dev, if he wants to show on the UI or not. You can remove the placeholder attribute as well, it's not mandatory. for your second question : - have to get the value attribute and this will give me it's value - you can get the value once you have supplied something in the input field. otherwise you should be getting null. May 30, 2021 at 7:16
-
1Well, I have asked our FE developer. He is a very experienced engineer. So I just posted the correct answer.– ProphetMay 30, 2021 at 8:12