Visualforce Tutorial for beginners

This blog post covers the Visualforce tags in great detail. This blog post can also be referred as Visualforce tutorial for beginners.

What is Visualforce?

It is the component-based user interface framework for the platform.

Visualforce consist of tag-based markup language, similar to HTML. For example, In HTML we have tags like <body> tag and <p> tag for paragraph, Similarly in visualforce we also have tags.

To check out complete Visualforce course  click here:

When you should use visualforce?

Visualforce consists of a tag-based markup language which gives Salesforce developers a more powerful way of building applications and customizing the Salesforce user interface.

 What can you do with Visualforce?

  • You can override the standard salesforce pages with custom Visualforce page.
  • You can also create your own custom flow control through an application.
  • Define navigation patterns and data-specific rules for optimal, efficient application interaction.


Advantages of visualforce

  • Visualforce follows Model View Controller (MVC) development style.
  • Visualforce Editor Panel is present for every visualforce page below the page.
  • Visualforce contains large number of built-in components.
  • Visualforce cab also be integrated with HTML, CSS, Ajax, jQuery.
  • Visualforce is flexible and customizable with web technologies.


Visualforce tags can be divided into following categories:

  • Page tags
  • Action tags
  • Style tags
  • Input tags
  • Output tags
  • Select tags
  • Form tags

We will start with visualforce page tags. Below is the list of tags available under page tag category.

  • <apex:page>
  • <apex:pageMessage>
  • <apex:pageBlock>
  • <apex:pageBlockSectionItem>
  • <apex:pageBlocktable>
  • <apex:pageBlockButtons>


<apex:page> :-

This is a basic tag that creates a visualforce page. <apex:page> tag can only be used once in a page  and all the other  visualforce Tags have to be enclosed in this <apex:page> tag.


Whenever a button is created using <apex:commandbutton>, a button is positioned where the tag is written.  But most of the times, we may want to display the buttons on the top and bottom of the page. In order to display the button in top and bottom of the page, you need to enclose the button inside of this tag.

[sourcecode lang=”java”]
<apex:page >

<apex:form >

<apex:pageBlock >

<apex:pageBlockButtons >

<apex:commandButton value="Save"/>

<apex:commandButton value="Close"/>


<apex:pageBlockSection title="first Section" id="firstBlock"  >

<apex:pageBlockSectionItem >MyTutorial Rack </apex:pageBlockSectionItem>

<apex:pageBlockSectionItem >Visualforce tutorial for beginners</apex:pageBlockSectionItem>






<apex:pageMessage> :

This tag is used to display custom messages on the page using the Salesforce pattern for errors, warnings and other types of messages based on the severity.

There is one required attribute for this tag named Severity.

Severity: This attribute is used to provide the severity of the message. Values supported are: ‘confirm’, ‘info’, ‘warning’, ‘error’.

Strength: This attribute is used for strength of the message. This attribute controls the visibility and size of the icon displayed next to the message. Use 0 for no image, or 1-3 (highest strength, largest icon).

[sourcecode lang=”java”]
<apex:page >

<apex:pageBlock >

<apex:pageMessage summary="This pageMessage will always display. Validation error

messages appear in the pageMessages component." severity="info" strength="3" />




Input tags

Input tags are used to capture user input for any standard or custom object field, and respects any metadata which is set on the field definition, such as whether the field is required or unique, or whether the current user has permission to view or edit it.

Below are some of the input tags available:

  • <apex:inputsecret>
  • <apex:inputcheckbox>
  • <apex:inputFile>
  • <apex:inputHidden>
  • <apex:inputField>
  • <apex:inputTextArea>


Input tags

<apex:inputText> :

An HTML input element of type text. This tag is used to capture input text from the user.

An HTML input element of type password. Use this tag to capture a value which is masked as the user types.

<apex:inputTextarea> :
A text area input element. Use this tag to capture a value that requires a text area.

<apex:inputCheckbox> :An HTML input element of type checkbox.

[sourcecode lang=”java”]
<apex:page >

<apex:form >

<h1>Please fill the below details :</h1> <br/><br/>

Enter  Name: <apex:inputText id="name" /> <br/><br/>

Enter Age:  <apex:inputText id="age" />  <br/><br/>

Enter Username : <apex:inputText id="username"/><br/><br/>

Enter password: <apex:inputSecret id="password" /> <br/><br/>

Cover letter: <apex:inputTextarea id="cletter" /> <br/><br/>

Are you US citizen: <apex:inputCheckbox />  <br/><br/>

<apex:commandButton value="Save" />


This Post Has 11 Comments

  1. berkey

    Why people still use to read news papers when in this technological world everything is available on web?|

  2. Chas Rethmeier

    I think this is among the most vital info for me. And i’m glad reading your article. But want to remark on few general things, The web site style is wonderful, the articles is really excellent : D. Good job, cheers

  3. Hershel Clarno

    Again some Romulan seeks revenge for his home-planet being destroyed in the future.

  4. thefeed

    Hello all, here every person is sharing these knowledge, thus it’s fastidious to read this weblog, and I used to visit this weblog everyday.|

  5. feed

    I am regular visitor, how are you everybody? This piece of writing posted at this site is in fact pleasant.|

  6. thefeed

    Hello to every one, it’s truly a good for me to pay a quick visit this site, it contains useful Information.|

  7. thefeed

    Howdy! Do you use Twitter? I’d like to follow you if that would be okay. I’m absolutely enjoying your blog and look forward to new posts.|

  8. froleprotrem

    Excellent web site. Lots of useful info here. I’m sending it to some friends ans also sharing in delicious. And obviously, thanks for your effort!

  9. After exploring a few of the blog posts on your website, I really like your way of blogging. I added it to my bookmark site list and will be checking back in the near future. Please check out my website as well and let me know your opinion.|

  10. Dalton Tomich

    How long can my computer keep running with an outdated browser?. I browser my computer is outdated. However my computer’s little outdated too, and doesn’t have what it would need to run the new browser. Should I start saving up for a new one, or can this problem be dealt with for a few more years yet?. . By the way, I love my computer I don’t want to start over because I love all the programs on my computer..

Leave a Reply