Back to Top

How to use HTML attributes in Visualforce

Updated 18 July 2017

For every Web developer the basic requirement is HTML. This markup language works as the basis of developing any Webpage. Visualforce, also being a web development platform, gives the support of using HTML tags directly. However for that we have to sacrifice some of the standard functionality it provides like the rendered attribute, or the action attribute used in command button. We would always want the ability to use both html attributes and Visualforce tags together. This is what I am going to demonstrate, how to use HTML attributes in Visualforce.

HTML- Pass through

Visualforce gives us the ability to use ‘html-‘ passed through to use attributes which are supported by HTML but are not available in the former. Using this attribute is pretty easy, all we have to do is add ‘html-‘ in the beginning of the attribute that we want to use and the attribute will be passed as it is in the final output of the HTML page.

For example, we have a placeholder attribute in HTML, but <apex:inputtext> does not give the functionality to use the it. In order to get that attribute we will write the tag something like this.

<apex:inputtext html-placeholder="Write Text"/>

Now the placeholder will be visible in the output of the page. You can use this code in your Visualforce page and see the changes.

More Examples

We can also use this pass through with many other attributes, like for example, I have created a page called JS1Clone. The code for this page is as follows:

Searching for an experienced
Salesforce Company ?
Find out More
<apex:page showHeader="false" sidebar="false" docType="html-5.0" controller="testcontroller">
        <apex:inputText value="{!emptyvar}" html-placeholder="Name"/><br/><br/>
        <apex:input type="number" html-min="3" html-max="9" html-step="2" value="{!emptynumber}"/><br/><br/>
        <input type="submit" value="Submit"/>

As you can see in this example that the html- passthrough is used to show the placeholder and also the min and max attribute of an input type number.

Also I have created a class for this example, which literally does nothing. It is there to just show the functionality of the attributes.

public class testcontroller {
    public string emptyvar { get; set;}
    public integer emptynumber { get; set;}
    public void nothing(){

Another example is used with iFrame, where the passthrough is used to get it’s attributes.

<apex:page controller="testcontroller" docType="html-5.0" sidebar="false" showHeader="false">

    <link rel="stylesheet" href=""/>
  	<script src=""></script>
  	<script> src=""></script>

        <apex:iframe html-srcdoc="<p>The iFrame below me contains a form</p>" src="JS1Clone" frameborder="true" height="50px"/>
        <apex:iframe src="JS1Clone" html-sandbox="" height="300px" scrolling="true" frameborder="true"/>

        <apex:outputLink value="{!$CurrentPage.URL}" html-download="testpage.html" html-media="screen">Download this page</apex:outputLink>
        <apex:outputPanel layout="block" styleclass="progress">
    		<apex:outputPanel layout="block" styleclass="progress-bar" html-role="progressbar" html-aria-valuenow="70" html-aria-valuemin="0" html-aria-valuemax="100" style="width:70%">
      			<apex:outputPanel styleclass="sr-only">70% Complete</apex:outputPanel>

        <apex:commandButton reRender="none" styleclass="btn btn-success" html-data-toggle="collapse" html-data-target="div[id*=demo]" value="Simple collapsible"></apex:commandButton>
  			<apex:outputPanel layout="block" id="demo" styleclass="collapse">
    			Lorem ipsum dolor sit amet, consectetur adipisicing elit,
			    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Now in this example we can see that I have used Bootstrap, however attributes like data-target which are required in bootstrap, are not available in Visualforce, so html- can be used to get them to work. The iFrame attributes which are not available in Visualforce are also used with pass through.

Also the target id for collapse is given as a wildcard character, as the output of visualforce pages modifies the id of the components.


The output of the final created page with all the iFrame will look something like this:


That’s all for how to use pass through attribute in Visualforce, for any further queries feel free to add a ticket at:

Or let us know your views on how to make this code better, in comments section below.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content