Visualforce Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Setting Custom HTML Attributes on Visualforce Components

You can add arbitrary attributes to many Visualforce components that will be “passed through” to the rendered HTML. This is useful, for example, when using Visualforce with JavaScript frameworks, such as jQuery Mobile, AngularJS, and Knockout, which use data-* or other attributes as hooks to activate framework functions. It can also be used to improve usability with HTML5 features such as placeholder “ghost” text, pattern client-side validation, and title help text attributes.
To add a pass-through attribute to, for example, an <apex:outputPanel> component, prefix the attribute with “html-” and set the attribute value as normal.
This produces the following HTML output.
Every attribute that begins with “html-” is passed through to the resulting HTML, with the “html-” removed.

Pass-through attributes that conflict with built-in attributes for the component generate a compilation error.

Note

Pass-through attributes are supported by the following Visualforce components.
  • <apex:column>
  • <apex:commandButton>
  • <apex:commandLink>
  • <apex:component>
  • <apex:dataTable>
  • <apex:form>
  • <apex:iframe>
  • <apex:image>
  • <apex:includeScript>
  • <apex:input>
  • <apex:inputCheckbox>
  • <apex:inputField>
  • <apex:inputHidden>
  • <apex:inputSecret>
  • <apex:inputText>
  • <apex:inputTextarea>
  • <apex:messages>
  • <apex:outputField>
  • <apex:outputLabel>
  • <apex:outputLink>
  • <apex:outputPanel>
  • <apex:outputText>
  • <apex:page>
  • <apex:pageBlock>
  • <apex:pageBlockButtons>
  • <apex:pageBlockSection>
  • <apex:pageBlockSectionItem>
  • <apex:pageBlockTable>
  • <apex:panelBar>
  • <apex:panelBarItem>
  • <apex:panelGrid>
  • <apex:sectionHeader>
  • <apex:selectCheckboxes>
  • <apex:selectList>
  • <apex:selectOption>
  • <apex:selectOptions>
  • <apex:selectRadio>
  • <apex:stylesheet>
  • <apex:tab>
  • <apex:tabPanel>
For additional information about individual components, including the specifics of where pass-through attributes are added to their rendered HTML, see Standard Component Reference.
To create HTML markup that can’t be generated using components that support pass-through attributes, combine Visualforce tags with static HTML. For example, to create a jQuery Mobile listview, combine the <apex:repeat> tag with the HTML tags you need.

Pass-through attributes aren’t supported in dynamic Visualforce.