Winter '14 Prerelease Code Sample for HTML5 Features

01_ContactExtras.page

<apex:page standardController="Contact" extensions="ContactExtras" showHeader="true" sidebar="false" docType="html-5.0">
    <apex:form id="theForm">
        <apex:pageBlock title="Contact: {!Contact.Name}">
            <apex:pageBlockSection id="contactDetails" title="Contact Details" columns="1">    
                <apex:inputField value="{!Contact.MobilePhone}" type="tel"
                    html-placeholder="999-999-9999"
                    html-autofocus="true"
                />
                <apex:inputField value="{!Contact.Email}" type="email"
                    html-placeholder="you@example.com$"
                    html-pattern="^[a-zA-Z0-9._-]+@example.com$"
                    html-title="Please enter an example.com email address"
                />
                <apex:inputField value="{!Contact.Birthdate}" type="date"
                    showDatePicker="false"
                    style="width:200px;"
                />
                <apex:inputField value="{!Contact.Pick_A_Number__c}" type="auto"
                    html-min="0" html-max="100" html-step="5"
                    html-title="Must be between 0 and 100"
                />
                <apex:inputField value="{!Contact.Favorite_Color__c}" type="text"
                    list="{!colorsList}"
                />
                <apex:inputField value="{!Contact.Favorite_Shape__c}" type="text"
                    list="circle,square,rectangle,triangle,hexagon,cube,sphere"
                />
                <apex:selectRadio value="{! Contact.LeadSource}" layout="pageDirection"
                    legendText="Select a source for this contact" borderVisible="true">
                    <apex:selectOptions value="{! sourcesList }"/>
                </apex:selectRadio>
            </apex:pageBlockSection>
            <apex:pageBlockSection id="contactExtras" title="Contact Extras" columns="1">
                <apex:input label="Car Color" value="{! fText }" list="{! colorsList }"/>
                <apex:input label="Steps Today" value="{! fNumber }" type="number"
                    html-min="0" html-max="50000"
                />
                <apex:input label="Favorite Date in History" value="{! fDate }"
                    type="auto"
                />
            </apex:pageBlockSection>
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton id="commandButton" value="Update"
                    action="{!quickSave}" reRender="theForm"
                />
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

02_ContactExtras.cls

public class ContactExtras {
    public ContactExtras(ApexPages.StandardController controller) { }
    
    public String fText { get; set; }
    public Integer fNumber { get; set; }
    public Date fDate { get; set; }
    
    public List<String> getColorsList() {
        List<String> colors = new List<String>();
        Schema.DescribeFieldResult picklistColors = Contact.Favorite_Color__c.getDescribe();
        
        for (Schema.PicklistEntry color : picklistColors.getPicklistValues()) {
            colors.add(color.getValue());
        }
        return colors;
    }
    
    public List<SelectOption> getSourcesList() {
        List<SelectOption> sources = new List<SelectOption>();
        Schema.DescribeFieldResult picklistSources = Contact.LeadSource.getDescribe();
        for (Schema.PicklistEntry source : picklistSources.getPicklistValues()) {
            sources.add(new SelectOption(source.getValue(),source.getValue()));
        }
        return sources;
    }
}