How to use apex:actionRegion in Visualforce page?

<apex:actionRegion> 

         An area of a Visualforce page that demarcates which components should be processed by the Force.com server when an AJAX request is generated. Only the components in the body of the < apex:actionRegion > are processed by the server, thereby increasing the performance of the page.

         Note that an < apex:actionRegion >component only defines which components the server processes during a request—it does not define what area(s) of the page are re-rendered when the request completes. To control that behavior, use the rerender attribute on an < apex:actionSupport >, < apex:actionPoller >, < apex:commandButton >, < apex:commandLink >, < apex:tab >, or < apex:tabPanel >component.

This tag supports following attributes:

Attribute	Description
id	An identifier that allows the component to be referenced by other components in the page.
immediate	A Boolean value that specifies whether the action associated with this component should happen immediately, without processing any validation rules associated with the fields on the page. If set to true, the action happens immediately and validation rules are skipped. If not specified, this value defaults to false.
rendered	A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true.
renderRegionOnly	A Boolean value that specifies whether AJAX-invoked behavior outside of the actionRegion should be disabled when the actionRegion is processed. If set to true, no component outside the actionRegion is included in the AJAX response. If set to false, all components in the page are included in the response. If not specified, this value defaults to true.

Example:

<apex:page standardController="Opportunity">
  <apex:form >
    <apex:pageBlock title="Edit Opportunity" id="thePageBlock" mode="edit">
   
      <apex:pageBlockButtons >
        <apex:commandButton value="Save" action="{!save}"/>
        <apex:commandButton value="Cancel" action="{!cancel}"/>               
      </apex:pageBlockButtons>
 
    <apex:pageBlockSection columns="1">
      <apex:inputField value="{!opportunity.name}"/>
      <apex:pageBlockSectionItem >
      <apex:outputLabel value="{!$ObjectType.opportunity.fields.stageName.label}" for="stage"/>
     
      <apex:actionRegion >
        <apex:inputField value="{!opportunity.stageName}" id="stage">
          <apex:actionSupport event="onchange" rerender="thePageBlock"
                              status="status"/>
          </apex:inputField>
          </apex:actionRegion>
      </apex:pageBlockSectionItem>
        <apex:inputfield value="{!opportunity.closedate}"/>
        {!text(now())}
        </apex:pageBlockSection>
 
      </apex:pageBlock>
    </apex:form>
</apex:page>

The above code generated the below page: