<apex: outputLabel> Component in Visualforce Page

The <apex: outputLabel> is another most used component on the Visualforce page that acts as a label for an input/output field that doesn't correspond to a Salesforce Object's field.

This component supports HTML pass-through attributes by using the "html" prefix.

The <apex: outputLabel> component has the following attributes on the Visualforce page:

1. accesskey

The accesskey is a string-type attribute used for specifying the shortcut key that puts the outputLabel and its associated fields in focus.

Syntax:

2. dir

The dir is a string-type attribute used to specify the direction in which the generated HTML component should be read. LTR and RTL are the two possible values for this attribute.

Syntax:

3. escape

The escape is a Boolean-type attribute used for specifying whether the sensitive HTML and XML characters should be escaped in the generated HTML output by this component.

Syntax:

4. for

The for is a string-type attribute used to specify the component Id with which the label should be associated.

Syntax:

5. id

The id is a string-type attribute that allows this component to be referenced by other components on the page.

Syntax:

6. lang

The lang is a string-type attribute that specifies the base language used for the generated HTML output. The values can be "en" or "en-US", etc.

Syntax:

7. onblur

The onblur is another string-type attribute used to specify the JavaScript method that needs to be invoked when the onblur event occurs or simply focus moves off of the output label.

Syntax:

8. onclick

The onclick is another string-type attribute used to specify the JavaScript method that needs to be invoked when the onclick event occurs or simply when the user clicks the outputLabel.

Syntax:

9. ondblclick

The ondblclick is a string-type attribute used to specify the JavaScript method that needs to be invoked when the ondblclick event occurs or simply when the output label is clicked twice.

Syntax:

10. onfocus

The onfocus is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onfocus event occurs or simply focuses on the output label.

Syntax:

11. onkeydown

The onkeydown is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onkeydown event occurs or simply when the user presses a keyboard key.

Syntax:

12. onkeypress

The onkeypress is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onkeypress event occurs or simply when the user holds down or presses a keyboard key.

Syntax:

13. onkeyup

The onkeyup is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onkeyup event occurs or simply when the user releases a keyboard key.

Syntax:

14. onmousedown

The onmousedown attribute is a string-type attribute used to invoke the JavaScript method when the onmousedown event occurs or simply when the user presses the mouse button.

Syntax:

15. onmousemove

The onmousemove is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onmousemove event occurs or simply when the user moves the mouse pointer.

Syntax:

16. onmouseout

The onmouseout is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onmouseout event occurs or simply when the user moves the mouse pointer away from the output label.

Syntax:

17. onmouseover

The onmouseover attribute is of type string that is used to invoke the JavaScript method when the onmouseover event occurs or simply when the user moves the pointer over the output label.

Syntax:

18. onmouseup

The onmouseup is a string-type attribute used for specifying the JavaScript method that needs to be invoked when the onmouseup event occurs or simply when the user releases the mouse button.

Syntax:

19. rendered

The rendered is a Boolean-type attribute used to specify whether this component is rendered on the page. By default, its value is set to true.

Syntax:

20. style

The style is a string-type attribute used to specify the CSS that needs to be applied to it. Inline CSS is used as a value for this attribute.

Syntax:

21. styleClass

The styleClass is a string-type attribute used to specify the external CSS stylesheet that needs to be applied to it to display the output label.

Syntax:

22. tabindex

The tabindex is a string-type attribute used for specifying the order in which this button is selected compared to other page components when the user presses the Tab key repeatedly.

Syntax:

23. title

The title is a string-type attribute used to specify the text that needs to be displayed as a tooltip when the mouse hovers over this component

Syntax:

24. value

The value attribute is a string-type attribute used to specify the text displayed as the label.

Syntax:

Let's take an example to understand how we can use the <apex: outputLabel> component inside the VF page:

ApexOutputLabelExample.vfp

<!-- apex page with Contact standard controller to demonstrate the functionality of apex outputLabel-->
<apex:page standardController="Contact" tabStyle="Contact">
    <apex: form>
        <apex:pageBlock>
            <apex:pageBlockSection title="Contact Information">
                <apex:outputField value="{!Contact.OwnerId}"/>
                
                <apex:outputLabel value="Enter Phone Number" for="phone">
                    <apex:inputText value="{!Contact.Phone}" id="phone">
                    </apex:inputText>
                </apex:outputLabel>
                
                
                <apex:outputLabel value="Enter First Name" for="fName">
                    <apex:inputText value="{!Contact.FirstName}" id="fName">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Last Name" for="lName">
                    <apex:inputText value="{!Contact.LastName}" id="lName">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Home Phone" for="homePhone">
                    <apex:inputText value="{!Contact.HomePhone}" id="homePhone">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Account" for="accId">
                    <apex:inputText value="{!Contact.AccountId}" id="accId">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Mobile Phone" for="mobile">
                    <apex:inputText value="{!Contact.MobilePhone}" id="mobile">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Title" for="title">
                    <apex:inputText value="{!Contact.Title}" id="title">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Secondary Phone" for="other">
                    <apex:inputText value="{!Contact.OtherPhone}" id="other">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Department" for="department">
                    <apex:inputText value="{!Contact.Department}" id="department">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Fax" for="fax">
                    <apex:inputText value="{!Contact.Fax}" id="fax">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Birthdate" for="bday">
                    <apex:inputText value="{!Contact.Birthdate}" id="bday">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Email" for="email">
                    <apex:inputText value="{!Contact.Email}" id="email">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Reports To" for="reports">
                    <apex:inputText value="{!Contact.ReportsToId}" id="reports">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Assistant Name" for="assName">
                    <apex:inputText value="{!Contact.AssistantName}" id="assName">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Lead Source" for="source">
                    <apex:inputText value="{!Contact.LeadSource}" id="source">
                    </apex:inputText>
                </apex:outputLabel>
                
                <apex:outputLabel value="Enter Assistant Phone" for="asstPhone">
                    <apex:inputText value="{!Contact.AssistantPhone}" id="asstPhone">
                    </apex:inputText>
                </apex:outputLabel>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex: form>
</apex: page>

Output