The <apex: inputField> is another important input element in Salesforce. The major difference between <apex: inputField> and <apex: input> is that the <apex: inputField> is used for a value that corresponds to a field on a Salesforce object, whereas the <apex: input> is used for a value that doesn't corresponds to a field on a Salesforce object.
The <apex: inputField> component respects all the attributes associated with this field. Attributes include whether this field is required or unique and the user interface widget for displaying.
If the specified <apex: inputField> component is a date or picklist field, the calendar input widget or picklist dropdown is displayed respectively.
The HTML pass-through attribute are supported by this component by using the "html-" prefix and are attached to the generated <input> tag.
The <apex: inputField> component has the following attributes:
1. id
The id is a string type attribute, i.e., a unique identifier that allows this component to be referenced by other components in the page.
Syntax
<apex:inputField id="inputFieldId"></apex:inputField>
2. ignoreEditPermissionForRendering
The ignoreEditPermissionForRendering is a Boolean type attribute. When its value is true, the user can edit or override the field even when the underlying permission on the object doesn't allow edits.
The overridden data affects all users but is intended only for guest users.
Note: We can use this attribute only with a custom controller without sharing mode.
Syntax
<apex:inputField ignoreEditPermissionForRendering="true"></apex:inputField>
3. label
The label is a string-type attribute used to specify the text value. This attribute overrides the default label of the field with the specified label value. To hide the default label of the field, we can set the label to an empty string.
Syntax
<apex:inputField label="Field Label"></apex:inputField>
4. onblur
The onblur is a string-type attribute used to invoke the JavaScript method when the onblur event occurs or when the focus moves off the field.
Syntax:
<apex:inputField onblur=" handleChange();"></apex:inputField>
5. onchange
The onchange is a string-type attribute used to invoke the JavaScript method when the onchange event occurs or when the user changes the field's content.
Syntax:
<apex:inputField onchange="handleChange ();"></apex:inputField>
6. onclick
The onclick is a string-type attribute used to invoke the JavaScript method when the onclick event occurs or when the user clicks the field.
Syntax:
<apex:inputField onclick="handleChange();"></apex:inputField>
7. ondblclick
The ondblclick is a string type attribute used to invoke the JavaScript method when the ondblclick event occurs or when the user clicks the field twice.
Syntax:
<apex:inputField ondblclick="handleChange();"></apex:inputField>
8. onfocus
The onfocus is a string-type attribute used to invoke the JavaScript method when the input event occurs, or the focus is on the field.
Syntax:
<apex:inputField onfocus="handleChange();"></apex:inputField>
9. onkeydown
The onkeydown is a string attribute used to invoke the JavaScript method when the onkeydown event occurs or when the user presses a keyboard key.
Syntax:
<apex:inputField onkeydown="handleChange();"></apex:inputField>
10. onkeypress
The onkeypress is a string type attribute used to invoke the JavaScript method when the onkeypress event occurs or when the user holds down or presses a keyboard key.
Syntax:
<apex:inputField onkeypress="handleChange();"></apex:inputField>
11. onkeyup
The onkeyup is a string-type attribute used to invoke the JavaScript method when the onkeyup event occurs or when the user releases a keyboard key.
Syntax:
<apex:inputField onkeyup="handleChange();"></apex:inputField>
12. onmousedown
The onmousedown is a string-type attribute used to invoke the JavaScript method when the onmousedown event occurs or when the user presses the mouse button.
Syntax:
<apex:inputField onmousedown="handleChange();"></apex:inputField>
13. onmousemove
The onmousemove is a string type attribute used to invoke the JavaScript method when the onmousemove event occurs or when the user moves the mouse pointer.
Syntax:
<apex:inputField onmousemove="handleChange();"></apex:inputField>
14. 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 field.
Syntax:
<apex:inputField onmouseout="handleChange();"></apex:inputField>
15. 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 input.
Syntax:
<apex:inputField onmouseover="handleChange();"></apex:inputField>
16. 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:inputField onmouseup="handleChange();"></apex:inputField>
17.onselect
The onselect is a string-type attribute used to invoke the JavaScript method when the onselect event occurs or when the user selects a checkbox associated with this field.
Syntax:
<apex:inputField onselect="handleChange();"></apex:inputField>
18. rendered
The rendered is a Boolean type attribute that specifies whether this component needs to be rendered on the page or not. By default, its value is set to true.
Syntax:
<apex:inputField rendered="true"></apex:inputField>
19. required
The required is a Boolean type attribute that specifies whether this field is a required field or not. By default, its value is set to false.
Syntax:
<apex:inputField required="true"></apex:inputField>
20. showDatePicker
The showDatePicker is a Boolean type attribute used to check whether we need to use the VF date picker for this field or not. This attribute affects only date and datetime fields.
Syntax:
<apex:inputField showDatePicker="true"></apex:inputField>
21. style
The style is a string type attribute used to specify the inline CSS style that will be applied for displaying the input component.
Syntax:
<apex:inputField style="display:none;"></apex:inputField>
22. styleClass
The styleClass is a string type attribute used to specify the style class that will be applied for displaying the input component.
Syntax:
<apex:inputField styleClass="inputClass"></apex:inputField>
23. taborderhint
The taborderhint is an Integer type attribute that specifies the hint that indicates the relative order in which this field is selected compared to other page components when the user presses the tab key. The value of this attribute should be between 0 to 32767.
Syntax:
<apex:inputField tabindex="1024"></apex:inputField>
24. type
The type is a string-type attribute used to add the defined type to the generated input element. The possible values for the type attribute include auto, date, datetime, datetime-local, month, week, time, email, number, range, search, tel, text, url.
Syntax:
<apex:inputField type="date"></apex:inputField>
25. value
The value is an Object type attribute, i.e., an expression that references the Salesforce field associated with this inputField.
Syntax:
<apex:inputField value="{!account.Name}"></apex:inputField>
Let's take an example to understand how we can use the <apex:inputField> component on VF page:
ApexInputFieldExample.vfp
<!-- create apex page with custom controller-->
<apex:page standardController="Contact" extensions="ApexInputFieldController" docType="html-5.0">
<!-- 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:pageBlockSection title="Account Information">
<apex:inputField value="{!acc.Name}" label="Account Name"/>
<apex:inputField value="{!acc.AccountNumber}" label="Account Number"/>
<apex:inputField value="{!acc.Active__c}" label="Active"/>
<apex:inputField value="{!acc.Phone}" label="Phone"/>
<apex:inputField value="{!acc.Rating}" label="Rating"/>
<apex:inputField value="{!acc.Website}" label="Website"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Contact Information">
<apex:inputField value="{!con.FirstName}" label="First Name"/>
<apex:inputField value="{!con.LastName}" label="Last Name"/>
<apex:inputField value="{!con.AccountId}" label="Account Id"/>
<apex:inputField value="{!con.Email}" label="Email"/>
<apex:inputField value="{!con.Phone}" label="Phone"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
ApexInputFieldController.apxc
// create ApexInputFieldController class to get list of Accounts and Contacts
public class ApexInputFieldController {
public Account acc{get;set;}
public Contact con{get;set;}
public String conId {get;set;}
//default constructor to get record Id from the page
public ApexInputFieldController(ApexPages.StandardController controller){
conId = controller.getRecord().Id; //'001x00000035SxX' ;
con = [Select Id, FirstName, LastName, AccountId, Email, Phone From Contact Where Id =:conId];
acc = [Select Id, Name, AccountNumber, Phone, Rating, Website, Active__c From Account where Id =:con.AccountId];
}
}
