How to use HTML attributes in Visualforce

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.

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:

<apex:page showHeader="false" sidebar="false" docType="html-5.0" controller="testcontroller">
    <apex:form>
        <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"/>
    </apex:form>
</apex:page>

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  	<script> src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <apex:form>

        <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:outputPanel>
  		</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.
  			</apex:outputPanel>
    </apex:form>
</apex:page>

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:

https://webkul.uvdesk.com/en/customer/create-ticket/

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