VisualForce Form Elements | What is VisualForce?

Visualforce Form Elements Example in Salesforce

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.