Visualforce Page Tags in Salesforce

Updated by

In Salesforce Visualforce pages, we have a list of XML markup tags, which are considered components and serve as a container for the data structure returned by the controller.

In this Salesforce tutorial, I will explain the types of tags used in Salesforce Visualforce pages, and with the help of examples, I will also explain their use cases.

What are Visualforce Tags in Salesforce?

In Salesforce, Visualforce tags are similar to HTML tags, and using these custom tags, we can create custom pages and components in Salesforce. Using the visualforce tags, we can display Salesforce data, create forms, and integrate features like Visualforce controller into the visualforce page, which helps control the visualforce page logic.

Each Visualforce tag serves a specific functionality and is grouped into different categories based on its functions and the requirements of the page features.

Visualforce tags are divided into the categories mentioned below.

  • Visualforce Input Field Tags
  • Visualforce  Output Field Tags
  • Select Tags
  • Visualforce  Action component tags
  • Visualforce Page tags

1. Visualforce Input Field Tags: These tags are used to get the data in Salesforce fields through the user input, and on the user interface of the Salesforce pages, we see them as text, dropdown, and checkbox fields. Within the input tags, we have different tags for different input fields.

  • <apex:inputText>: This tag is used to get the details such as name, email, and other text-based information.

Syntax: 

<apex:inputText value="{!contact.Name}" label="Contact Name"/>
  • <apex:inputTextarea>: This tag is also used to get input for large text fields such as description, comment, and address.

Syntax:

<apex:inputTextarea value ="{!contact.Description}" label="Description"/>
  • <apex:inputCheckbox>: This tag is used to take input of boolean values true and false.

Syntax: 

<apex:inputCheckbox value="{!contact.IsActive}" label="Active"/>
  • <apex:inputRadio> – We use the radio button tag when we add multiple options for an input field, and out of that, the user can select any one option.

Syntax:

<apex:inputRadio value="{!selectedOption}" label="Select Option">
        <apex:selectOption itemValue="Option1" itemLabel="Option 1"/>
        <apex:selectOption itemValue="Option2" itemLabel="Option 2"/>
    </apex:inputRadio>
  • <apex:inputSelect>: This tag creates a dropdown list for selecting from multiple predefined options. It is used to display a list of values in a dropdown format for selection, such as states, countries, or contact categories.

Syntax:

<apex:inputSelect value="{!contact.Type}" label="Contact Type">
        <apex:selectOption itemValue= "Customer" itemLabel="Customer"/>
        <apex:selectOption itemValue= "Prospect" itemLabel="Prospect"/>
   </apex:inputSelect>
  • <apex:inputSecret>: This input component in Visualforce is used to create a password input field in a Visualforce page. It allows users to enter text that is masked as (********) to make it confidential, commonly used for password inputs or sensitive data.

Example: 

<apex:inputSecret value="{!inputValue}" id="theSecretInput"/>

2. Visualforce Output Field Tags: These tags are used to display data that is limited to a Salesforce object or a custom controller. The output field tags help in displaying values dynamically within a Visualforce page.

  • <apex:outputText>: This tag displays text on the Visualforce page and is used to get user input for a controller method that does not correspond to a field on a sObject.

Syntax:

<apex:outputText value="{!contact.Name}" />

Here, the contact is a sObject, and this tag is supported for sObjects only.

  • <apex:outputField>: This tag displays the field’s value from a Salesforce object in the standard format, including fields like