New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Decorating HTML5 Input Elements

Profile image

Quick Profile

  • Demo Configurator

Decorated Controls


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

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.FormDecorator.Html5.DefaultVB" %>

<!DOCTYPE html>
<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>

Support & Learning Resources

Find Assistance