The resulting HTML would create a div for the input like the following:

<div id='form:name'>
...
</div>

Now, if you want to use Jquery to do something to this element, you would probably do it like this:

$("#form:name")

The problem is that you can’t do this, because in Jquery selectors the colon “:” is a special character and cannot be used like this to select an id. In order for the jquery selector to work you have to escape the colon with a double backslash, like the following:

$("#form\\:name")

But that is one ugly piece of code… you can do the following to ease the pain:

$(document.getElementById('form:name'))

Document.getElementById does not interpret selector, as such there’s no problem having the colon, and since the jQuery selector accepts a DOM element, all is well. If you’re using the XEO Framework, you can do the following as well:

$(XVW.get('form:name'))

And what about CSS?

Well with CSS the problem is the same, you cannot have the colon in identifiers, so you have to escape it, like the following: