ID value generating colon before actual value

Question

In a salesforce login form, input field have ID value, and ID value is adding the prefix of parent div, please see the code below:

<apex:inputText id="login__idvalue" value="{!Inputvalue}" />

Expected result in web page is:

<input type="text" id="login_idvalue" value="ABC value" />

But since the input is wrapped in a DIV its generating the following:

<input type="text" id="test:login_idvalue" value="ABC value" />

How do I remove/avoid that test:?

Answer 1

That's normal behavior, the Visualforce component id's don't correspond directly to the ids of their corresponding DOM elements.

One option would be to use the $Component variable in your Visualforce to get the DOM id generated for a given component. see: Using $Component to Reference Components from JavaScript

Or you could use HTML directly in you visualforce, where the id value will be passed through unchanged. There would be more work doing it this way vs using a standard component, but it might be worth considering.