6

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 4

2

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.

1

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

0
1

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.

1
  • 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.
    – Prophet
    May 30, 2021 at 8:39
0

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 :

enter image description here

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 :

enter image description here

Now, having said all these, a placeholder attribute is not a mandatory field it depends on UI developer and Business unit.

5
  • 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.
    – Prophet
    May 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 the value attribute and this will give me it's value.
    – Prophet
    May 30, 2021 at 7:03
  • 1
    in 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
  • 1
    Well, I have asked our FE developer. He is a very experienced engineer. So I just posted the correct answer.
    – Prophet
    May 30, 2021 at 8:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.