FormDecorator - Decorating HTML5 Input Elements

Profile image

Quick Profile

Demo Configurator

Decorated Controls


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Telerik FormDecorator for ASP.NET AJAX offers CSS skinning for the following HTML5 input elements:

<input type="search" />

<input type="url" />

<input type="tel" />

<input type="email" />

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FormDecorator.Html5.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel ID="FormDecoratorLoadingPanel" runat="server" />
    <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="DecoratedControlsRadioList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="FormDecorator1" />
                    <telerik:AjaxUpdatedControl ControlID="DemoContainer" LoadingPanelID="FormDecoratorLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="DecoratedControlsRadioList" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadFormDecorator RenderMode="Lightweight" Skin="Silk" ID="FormDecorator1" runat="server" DecoratedControls="All" ControlsToSkip="Zone" />
    <div class="demo-container size-custom no-bg" id="DemoContainer" runat="server">
        <fieldset>
            <img src="images/profileImg.png" alt="Profile image" class="profile-img" />
            <div class="profileData">
                <h3>Quick Profile</h3>
                <div class="inputWrapper">
                    <label for="searchInput">
                        Type your search:
                    </label>
                    <input type="search" id="searchInput" />
                </div>
                <div class="inputWrapper">
                    <label for="urlInput">
                        Your site URL:
                    </label>
                    <input type="url" id="urlInput" />
                </div>
                <div class="inputWrapper">
                    <label for="telephoneInput">
                        Your telephone number:
                    </label>
                    <input type="tel" id="telephoneInput" />
                </div>
                <div class="inputWrapper">
                    <label for="emailInput">
                        Your e-mail address:
                    </label>
                    <input type="email" id="emailInput" />
                </div>
                <div class="inputWrapper">
                    <asp:Button ID="sbmt" runat="server" Text="Submit" />
                </div>
            </div>
        </fieldset>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View>
                <qsf:RadioButtonList ID="DecoratedControlsRadioList" Label="Decorated Controls" runat="server" 
                                     AutoPostBack="true" OnSelectedIndexChanged="DecoratedControlsRadioList_SelectedIndexChanged">
                    <asp:ListItem Text="All" Value="All" Selected="true"></asp:ListItem>
                    <asp:ListItem Text="None" Value="None"></asp:ListItem>
                </qsf:RadioButtonList>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?