Create Custom Picklist , Radio Button, Checkbox, InputText using apex class and Visualforce page.
1. Create Apex Class:
public class customPickListInVFDemoController {
public String selectedCountry1{get;set;}
public String selectedCountry2{get;set;}
public string selectedgender{get;set;}
public list<string> selectCheckBoxesItem{get;set;}
public string selectedInputText{get;set;}
public string selectedInputName{get;set;}
public string selectedInputEmail{get;set;}
//public string selectedInputEmailaddress{get;set;}
public customPickListInVFDemoController(){
selectCheckBoxesItem = new list<string>();
}
public List<SelectOption> getCountriesOptions() {
List<SelectOption> countryOptions = new List<SelectOption>();
countryOptions.add(new SelectOption('','-None-'));
countryOptions.add(new SelectOption('INDIAN','India'));
countryOptions.add(new SelectOption('USA','USA'));
countryOptions.add(new SelectOption('United Kingdom','UK'));
countryOptions.add(new SelectOption('Germany','Germany'));
countryOptions.add(new SelectOption('Ireland','Ireland'));
return countryOptions;
}
public list<selectOption> getgenderdetail(){
list<selectOption> selectgender = new list<selectOption>();
selectgender.add(new selectOption('Female','Female'));
selectgender.add(new selectOption('Male','Male'));
selectgender.add(new selectOption('Transgender','Transgender'));
return selectgender;
}
public list<selectOption> getcheckboxes(){
list<selectOption> checkbox = new list<selectOption>();
checkbox.add(new selectOption('Bihar','Bihar'));
checkbox.add(new selectOption('Arrah','Arrah'));
checkbox.add(new selectOption('Bhojpur','Bhojpur'));
return checkbox ;
}
public PageReference save(){
return null;
}
}
2. Create Visualforce Page for UI :
<apex:page controller="customPickListInVFDemoController" tabStyle="opportunity" >
<div style="background-color:pink">
<marquee><apex:image url="{!$Resource.MyImage}">Randhir Singh</apex:image></marquee>
</div>
<apex:form style="color:pink">
<apex:pageBlock title="Custom PickList Demo" id="out">
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!save}" rerender="out" status="actStatusId"/>
<apex:actionStatus id="actStatusId">
<apex:facet name="start">
<img src="/img/loading.gif" />
</apex:facet>
</apex:actionStatus>
</apex:pageBlockButtons>
<apex:pageBlockSection title="Custom Picklist Using selectList and selectOption" collapsible="false">
<apex:selectList value="{!selectedCountry1}" multiselect="false" size="1">
<apex:selectOption itemValue="None" itemLabel="--None--"/>
<apex:selectOption itemValue="INDIA" itemLabel="India"/>
<apex:selectOption itemValue="USA" itemLabel="USA"/>
<apex:selectOption itemValue="JP" itemLabel="Japan"/>
<apex:selectOption itemValue="United Kingdom" itemLabel="UK"/>
</apex:selectList>
<apex:outputText value="{!selectedCountry1}" label="You have selected Country:"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Custom Picklist Using selectList and selectOptions" collapsible="false">
<apex:selectList value="{!selectedCountry2}" multiselect="false" size="1">
<apex:selectOptions value="{!countriesOptions}"/>
</apex:selectList>
<apex:outputText value="{!selectedCountry2}" label="You have selected nationality:"/>
</apex:pageBlockSection>
<apex:pageblockSection title="Custom Radio Using in Visualforce Page">
<apex:selectRadio value="{!selectedgender}">
<apex:selectOptions value="{!genderdetail}"/>
</apex:selectRadio>
<apex:outputText value="{!selectedgender}" label="You have selected gender :"/>
</apex:pageblockSection>
<apex:pageBlockSection title="Custom CheckBox using in Visualforce Page">
<apex:selectCheckboxes value="{!selectCheckBoxesItem}">
<apex:selectOptions value="{!checkboxes}"/>
</apex:selectCheckboxes>
<apex:outputText value="{!selectCheckBoxesItem}" label="You have selected"/>
</apex:pageBlockSection>
<apex:pageblockSection title="Custom InputText using in Visualforce Page">
<apex:inputText value="{!selectedInputText}">First Name : </apex:inputText>
<apex:outputText value="{!selectedInputText}" label="You have selected First name :"/>
<apex:inputtext value="{!selectedInputName}" >Last Name : </apex:inputtext>
<apex:outputText value="{!selectedInputName}" label="You have selected Last name :"/>
<apex:inputText value="{!selectedInputEmail}" > E-Mail : </apex:inputtext>
<apex:outputText value="{!selectedInputEmail}" label="You have selected E-mail :"/>
<!-- Email : <input type="email" title="Enter valid E-mail"/>
<input type="submit"/><br/><br/>-->
<!-- E-Mail : <input id="email" type="text" class="validate" value="{!selectedInputEmailaddress}"/>
<label for="email"/>
<input type="submit"/>-->
</apex:pageblockSection>
</apex:pageblock>
</apex:form>
</apex:page>
Output : You can see the following screen screen once you complete above steps.