The <apex:form> component is one of the most important components on the Visualforce page. The <apex:form> component defines a section that allows the user to enter input and submit it using the <apex:commandButton> or <apex:commandLink> component. The data which needs to be displayed in the form is determined by the body of the <apex:form>. It also defines the way in which the data is processed. We can use multiple <apex:form>, but for the best practices, we have to use one <apex:form> in a page or custom component.
The <apex:form> component has the following attributes:
1. accept
The "accept" is a string type attribute, i.e., a list of content types in a comma-separated way. The list holds the content types which can handle by the server. These are some of the possible values for the accept attribute:
text/html
image/png
image/gif
video/mpeg
text/css
audio/basic
Syntax:
<apex:form accept="text/html"></apex:form>
2. acceptcharset
The "acceptcharset" is a string type attribute, i.e., a list of character encoding types in a comma-separated way. The list holds the character encoding types which can handle by the server. UNKNOWN is the default value for this attribute.
Syntax:
<apex:form acceptcharset="UNKNOWN"></apex:form>
3. enctype
The "enctype" is a string type attribute that defines the content type used for submission of the form to the server. The application/x-www-form-urlencoded is the default value for this attribute.
Syntax:
<apex:form enctype="application/x-www-form-urlencoded"></apex:form>
4. dir
The "dir" is a string-type attribute used to specify the direction in which the generated HTML component should be read. Possible values for this attribute include:
LTR
RTL
Syntax:
<apex:form dir="RTL"></apex:form>
5. forceSSL
The forceSSL is a Boolean type attribute that specifies whether the form will be submitted using SSL or not, regardless of whether the page itself was served with SSL.
6. id
The id is a string type attribute, i.e., a unique identifier which is used for referencing this component by other components in the page.
Syntax:
<apex:form id="formId"></apex:form>
7. lang
The lang is a string-type attribute that defines the base language for the generated HTML output. The "en" or "en-US" are the two possible values for this attribute.
Syntax:
<apex:form lang="en"></apex:form>
8. onclick
The onclick is a string-type attribute used to invoke the JavaScript method when the onclick event occurs or simply when the user clicks the apex form.
Syntax:
AD
<apex:form onclick="saveRecords();"></apex:form>
9. ondblclick
The ondblclick is a string-type attribute used to invoke the JavaScript method when the ondblclick event occurs or simply when the form is clicked twice.
Syntax:
<apex:form ondblclick="saveRecords();"></apex:form>
10. onkeydown
The onkeydown is a string type attribute used to invoke the JavaScript method when the onkeydown event occurs or simply when the user presses a keyboard key.
Syntax:
<apex:form onkeydown="saveRecords();"></apex:form>
11. onkeypress
The onkeypress is a string type attribute used to invoke the JavaScript method when the onkeypress event occurs or simply when the user holds down or presses a keyboard key.
AD
Syntax:
<apex:form onkeypress="saveRecords();"></apex:form>
12. onkeyup
The onkeyup is a string-type attribute used to invoke the JavaScript method when the onkeyup event occurs or simply when the user releases a keyboard key.
Syntax:
<apex:form onkeyup="saveRecords();"></apex:form>
13. onmousedown
The onmousedown 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:
<apex:form onmousedown="countKeys();"></form>
14. onmousemove
The onmousemove is a string-type attribute used to invoke the JavaScript method when the onmousemove event occurs or simply when the user moves the mouse pointer.
Syntax:
<apex:form onmousemove="countKeys();"></apex:form>
15. onmouseout
The onmouseout is a string-type attribute used to invoke the JavaScript method when the onmouseout event occurs or when the user moves the mouse pointer away from the form.
Syntax:
<apex:form onmouseout="countKeys();"></apex:form>
16. onmouseover
The onmouseover is a string-type attribute used to invoke the JavaScript method when the onmouseover event occurs or when the user moves the pointer over the form.
Syntax:
<apex:form onmouseover="countKeys();"></apex:form>
17. onmouseup
The onmouseup is a string-type attribute used to invoke the JavaScript method when the onmouseup event occurs or when the user releases the mouse button.
Syntax:
<apex:form onmouseup="countKeys();"></apex:form>
18. onreset
The onreset is a string-type attribute used to invoke the JavaScript method when the onreset event occurs or when the user clicks the reset button on the form.
Syntax:
<apex:form onreset="countKeys();"></apex:form>
19. onsubmit
The onsubmit is a string-type attribute used to invoke the JavaScript method when the onsubmit event occurs or when the user clicks the submit button on the form.
Syntax:
<apex:form onsubmit="countKeys();"></apex:form>
20. prependId
The prependId is a Boolean type attribute used to specify whether this form should prepend its ID to the IDs of its child components or not during the clientid generation process.
Syntax:
<apex:form prependId="true"></apex:form>
21. rendered
The rendered is a Boolean-type attribute used to specify whether this component is rendered on the page or not. The Boolean value true is set as the default value for this attribute.
Syntax:
<apex:form rendered="true"></apex:form>
22. style
The style is a string type attribute used to specify the inline CSS that needs to be applied to it.
Syntax:
<apex:form style="background:red;"></apex:form>
23. styleClass
The styleClass is also a string type attribute used to specify the external CSS stylesheet that needs to be applied to display the form.
Syntax:
<apex:form styleClass="ClassName"></apex:form>
24. target
The target is a string-type attribute used for specifying the frame's name that displays the response after the form is submitted. These are some of the possible values for this attribute:
_blank
_parent
_self
_top
Except for these values, we can specify our own's target names by assigning the value to the name attribute of the desired destination.
Syntax:
<apex:form target="_blank"></apex:form>
25. title
The title attribute is of type string that is used to specify the text that will be displayed as a tooltip when the mouse hovers over this component
Syntax:
<apex:form title="button title"></apex:form>
Let's take an example to understand how we can use the <apex:form> component inside the VF page:
ApexFormExample.vfp
<!-- create apex page with custom controller-->
<apex:page controller="ApexFormController">
<!-- use apex form to show the accounts and contacts table-->
<apex:form id="changeStatusForm">
<apex:pageBlock title="Account/Contact Information">
<!-- command buttons are responsible for showing accounts in the table-->
<apex:pageMessages />
<apex:pageBlockButtons>
<apex:commandButton value="Show Accounts" action="{!getAccounts}"/>
<apex:commandButton value="Show Contacts" action="{!getContacts}"/>
</apex:pageBlockButtons>
<apex:pageBlockSection rendered="{!IF(accounts.size>0, true, false)}">
<!-- create a table for showing accounts information -->
<apex:pageBlockTable value="{!accounts}" var="acc">
<apex:column value="{!acc.Name}"/>
<apex:column value="{!acc.AccountNumber}"/>
<apex:column value="{!acc.Phone}"/>
<apex:column value="{!acc.Rating}"/>
<apex:column value="{!acc.Website}"/>
</apex:pageBlockTable>
</apex:pageBlockSection>
<apex:pageBlockSection rendered="{!IF(contacts.size>0, true, false)}">
<!-- create a table for showing contacts information -->
<apex:pageBlockTable value="{!contacts}" var="con">
<apex:column value="{!con.FirstName}" />
<apex:column value="{!con.LastName}"/>
<apex:column value="{!con.AccountId}"/>
<apex:column value="{!con.Email}"/>
<apex:column value="{!con.Phone}"/>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
ApexFormController.apxc
// create ApexFormController class to get the list of Accounts and Contacts
public class ApexFormController {
public List<account> accounts{get;set;}
public List<contact> contacts{get;set;}
// default constructor
public ApexFormController (){
accounts = new List<account>();
contacts = new List<contact>();
}
// create getAccounts() method to get account records
public void getAccounts() {
system.debug('Call Apex');
accounts = [select Id, Name, Rating, Phone, AccountNumber, Website From Account LIMIT 5];
}
// create getContacts() method to get contact records
public void getContacts() {
contacts = [select Id, FirstName, LastName, AccountId, Email, Phone From Contact LIMIT 5];
}
}
