<apex: input> Component in Visualforce Page

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

2. alt

The alt is a string-type attribute used to define the field's alternative text description.

Syntax

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

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

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

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

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".

Syntax

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

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:

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:

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:

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:

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:

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; } }

Output

---

Next Topicapex:inputCheckbox Component in Visualforce Page

← prev next →