VisualForce Form Elements | What is VisualForce?

Visualforce Form Elements Example in Salesforce

HTML	Visualforce Equivalent
<a>	<apex:outputLink>
Text	<apex:outputText>
<table>	<apex:panelGrid>
<div> grouping	<apex:outputPanel>
Content Section	<apex:pageBlock>
Form	<apex:form>
Input Text	<apex:inputText>
Button	<apex:commandButton>

<apex:page>

    <style>

        *{

            margin:0px;

        }

        body{

            font-size:25px;

            font-family:Verdana;

        }

        .header{

            padding:20px;

            height:100px;

            background-color:blue;

        }

        .header h1{

            font-size:40px;

            color:white;

            font-weight:bold;

        }

        .header a{

            color:white;

            text-decoration:none;

            margin-left:20px;

        }

        .middle{

            padding:50px;

            height:400px;

            background-color:gray;

        }

        .footer{

            height:100px;

            background-color:blue;

            color:white;

            text-align:center;

            line-height:100px;

        }

    </style>

    <!-- Header -->

    <div class="header">

        <apex:panelGrid columns="2" width="100%">

            <apex:outputPanel>

                <h1>VisualForce</h1>

            </apex:outputPanel>

            <apex:outputPanel>

                <apex:outputLink value="/apex/DummyPage">Home</apex:outputLink>

                <apex:outputLink value="/apex/AboutPage">About Us</apex:outputLink>

                <apex:outputLink value="/apex/ContactPage">Contact Us</apex:outputLink>

            </apex:outputPanel>

        </apex:panelGrid>

    </div>

    <!-- Middle Section -->

    <div class="middle">

        <apex:pageBlock title="Contact Us">

            <apex:outputText value="Welcome in Contact Us Page" />

        </apex:pageBlock>

    </div>

    <!-- Footer -->

    <div class="footer">

        <apex:outputText value="This is a Footer Section" />

    </div>

</apex:page>

Visualforce provides many form elements to take user input in Salesforce pages. Mainly we use <apex:form> with different input components.

Common Visualforce Form Elements

Element	Use
<apex:inputText>	Single line text input
<apex:inputSecret>	Password field
<apex:inputTextarea>	Multi-line text area
<apex:inputCheckbox>	Checkbox
<apex:selectList>	Dropdown list
<apex:selectRadio>	Radio buttons
<apex:commandButton>	Submit button
<apex:outputLabel>	Label for fields

Complete Example of Visualforce Form

<apex:page controller="StudentController">

    <apex:form>
    
        <apex:pageBlock title="Student Registration Form">

            <!-- Text Field -->
            <apex:pageBlockSection columns="1">

                <apex:outputLabel value="Student Name"/>
                <apex:inputText value="{!studentName}" />

                <!-- Password -->
                <apex:outputLabel value="Password"/>
                <apex:inputSecret value="{!password}" />

                <!-- Text Area -->
                <apex:outputLabel value="Address"/>
                <apex:inputTextarea value="{!address}" rows="4" cols="40"/>

                <!-- Checkbox -->
                <apex:outputLabel value="Accept Terms"/>
                <apex:inputCheckbox value="{!acceptTerms}" />

                <!-- Dropdown -->
                <apex:outputLabel value="Course"/>
                <apex:selectList value="{!course}" size="1">
                    <apex:selectOption itemValue="Java" itemLabel="Java"/>
                    <apex:selectOption itemValue=".NET" itemLabel=".NET"/>
                    <apex:selectOption itemValue="Salesforce" itemLabel="Salesforce"/>
                </apex:selectList>

                <!-- Radio Button -->
                <apex:outputLabel value="Gender"/>
                <apex:selectRadio value="{!gender}">
                    <apex:selectOption itemValue="Male" itemLabel="Male"/>
                    <apex:selectOption itemValue="Female" itemLabel="Female"/>
                </apex:selectRadio>

            </apex:pageBlockSection>

            <!-- Submit Button -->
            <apex:pageBlockButtons>
                <apex:commandButton value="Submit" action="{!save}" />
            </apex:pageBlockButtons>

        </apex:pageBlock>

    </apex:form>

</apex:page>

Apex Controller Example

public class StudentController {

    public String studentName {get; set;}
    public String password {get; set;}
    public String address {get; set;}
    public Boolean acceptTerms {get; set;}
    public String course {get; set;}
    public String gender {get; set;}

    public PageReference save() {

        System.debug(studentName);
        System.debug(password);
        System.debug(address);
        System.debug(acceptTerms);
        System.debug(course);
        System.debug(gender);

        return null;
    }
}

Output

• Textbox
• Password field
• Textarea
• Checkbox
• Dropdown
• Radio buttons
• Submit button

All data will be handled using the Apex controller.

Important Point

In Visualforce, all input components should be inside:

<apex:form>

Otherwise values will not submit to the controller.