The <apex: input> is a general-purpose input component that adapts to the data required for a form field. The <apex:input> component supports the HTML type attribute, which allows the client browser to display type-appropriate user input widgets.
We use the <apex: input> component for getting user input for a controller property or method that doesn't correspond to a field on a Salesforce object. This component does not use Salesforce styling.
The HTML pass-through attributes are supported by this component using the "html-" prefix, which is attached to the generated <input> tag.
The <apex: input> component has the following attributes:
1. accesskey
The acesskey is a string type attribute that defines the keyboard access key that puts the field in focus.
Syntax
<apex:input accesskey="f"></apex:input>
2. alt
The alt is a string-type attribute used to define the field's alternative text description.
Syntax
<apex:input alt="Alternative Text Here"></apex:input>
3. dir
The dir is a string-type attribute used to specify the direction in which the generated HTML component should be used. RTL and LTR are the two possible values for the dir attribute.
Syntax
<apex:input dir="RTL"></apex:input>
4. disabled
The disabled is a Boolean type attribute that specifies whether this text box should be displayed in the disabled state or not. By default, its value is set to false.
Syntax
<apex:input disabled="true"></apex:input>
5. 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:input id="inputId"></apex:input>
6. label
The label is a string-type attribute used to display text next to the control and reference the control in the error message.
Syntax
<apex:input label="Label Text"></apex:input>
7. lang
The lang is a string type attribute used for specifying the base language used for the generated HTML output. The possible values of this attribute are "en" and "en-US".
AD
Syntax
<apex:input lang="en"></apex:input>
8. list
The list is an Object type attribute, i.e., a list of auto-complete values to be added to an HTML <datalist> block associated with the input field. This attribute is either a comma-delimited static string or a VF expression.
Syntax
<apex:input list="listName"></apex:input>
9. onblur
The onblur is a string-type attribute used to invoke the JavaScript method when the onblur event occurs or simply when the focus moves off the field.
Syntax:
AD
<apex:input onblur="saveRecords();"></apex:input>
10. 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:input onchange="saveRecords();"></apex:input>
11. 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:input onclick="saveRecords();"></apex:input>
12. ondblclick
The ondblclick is a string type attribute used to invoke the JavaScript method when the ondblclick event occurs or simply when the user clicks the field twice.
Syntax:
<apex:input ondblclick="saveRecords();"></apex:input>
13. 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:input onfocus="saveRecords();"></apex:input>
14. 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:input onkeydown="saveRecords();"></apex:input>
15. 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.
Syntax:
<apex:input onkeypress="saveRecords();"></apex:input>
16. 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:input onkeyup="saveRecords();"></apex:input>
17. 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:input onmousedown="countKeys();"></apex:input>
18. 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:input onmousemove="countKeys();"></apex:input>
19. onmouseout
The onmouseout is a string-type attribute used to invoke the JavaScript method when the onmouseout event occurs or simply when the user moves the mouse pointer away from the field.
Syntax:
<apex:input onmouseout="countKeys();"></apex:input>
20. onmouseover
The onmouseover is a string-type attribute used to invoke the JavaScript method when the onmouseover event occurs or simply when the user moves the pointer over the input.
Syntax:
<apex:input onmouseover="countKeys();"></apex:input>
21. 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:input onmouseup="countKeys();"></apex:input>
22. 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:input rendered="true"></apex:input>
23. 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:input required="true"></apex:input>
24. size
The size is an Integer type attribute used to specify the width of the input field. Width is expressed by the number of characters displayed at a time.
Syntax:
<apex:input size="50"></apex:input>
25. 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:input style="display:none;"></apex:input>
26. 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:input styleClass="inputClass"></apex:input>
27. tabindex
The tabindex is a string type attribute used to specify the order in which this field is selected compared to other page components when a user presses the Tab key repeatedly. The value of this attribute should be between 0 to 32767.
Syntax:
<apex:input tabindex="1024"></apex:input>
28. title
The title is a string-type attribute that specifies the text to display as a tooltip when the user's mouse pointer hovers over this component.
Syntax:
<apex:input title="Image Title"></apex:input>
29. type
The type is another 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:input type="date"></apex:input>
30. value
The value is an Object type attribute, i.e., an expression that references the controller class variable associated with this field.
Syntax:
<apex:input value="{!variableName}"></apex:input>
Let's take an example to understand how we can use the <apex: input> component on the Visualforce page.
ApexInputExample.vfp
<!-- create apex page with custom controller-->
<apex:page standardController="Contact" extensions="ApexInputController" 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:input value="{!accName}" label="Account Name"/>
<apex:input value="{!accAccountNumber}" label="Account Number"/>
<apex:input value="{!accPhone}" label="Phone"/>
<apex:input value="{!accRating}" label="Rating"/>
<apex:input value="{!accWebsite}" label="Website"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Contact Information">
<apex:input value="{!conFirstName}" label="First Name"/>
<apex:input value="{!conLastName}" label="Last Name"/>
<apex:input value="{!conAccountId}" label="Account Id"/>
<apex:input value="{!conEmail}" label="Email"/>
<apex:input value="{!conPhone}" label="Phone"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
ApexInputController.apxc
// create ApexInputController class to get list of Accounts and Contacts
public class ApexInputController {
public string accName{get;set;}
public string accAccountNumber{get;set;}
public string accPhone{get;set;}
public string accRating{get;set;}
public string accWebsite{get;set;}
public string conFirstName{get;set;}
public string conLastName{get;set;}
public string conAccountId{get;set;}
public string conEmail{get;set;}
public string conPhone{get;set;}
public String conId {get;set;}
//default constructor to get record Id from the page
public ApexInputController(ApexPages.StandardController controller){
conId = controller.getRecord().Id; //'001x00000035SxX' ;
Contact con = [Select Id, FirstName, LastName, AccountId, Email, Phone From Contact Where Id =:conId];
Account acc = [Select Id, Name, AccountNumber, Phone, Rating, Website From Account where Id =:con.AccountId ];
accName = acc.Name;
accAccountNumber = acc.AccountNumber;
accPhone = acc.Phone;
accRating = acc.Rating;
accWebsite = acc.Website;
conFirstName = con.FirstName;
conLastName = con.LastName;
conAccountId = con.AccountId;
conEmail = con.Email;
conPhone = con.Phone;
}
}
