Button - Sign Up Form

Subscribe to Newsletter
Subscribe to RSS Feeds
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates how you can use RadButton to customize the look of your SignUp form. You can use the client-side or server-side API of the control to submit the page, and collect the information entered.

Two RadButton controls with ButtonType="ToggleButton" and ToggleType="Radio" are used to determine the gender of the user. Two other toggle buttons (RadButton with ButtonType="ToggleButton" and ToggleType="CheckBox") are used to subscribe the user for the provided services.

The remaining buttons are image buttons where the image is either used as background, or represents the button itself (ImageButton).

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
    <div class="signUpScenario">
        <div class="signUpHeader">
            <div class="signButton">
                <telerik:RadButton RenderMode="Lightweight" ID="ImageButton" runat="server" Width="75px" Height="22px" Text="Click Here to Sign in" Skin="Default">
                    <Image ImageUrl="images/signInBtn.png" HoveredImageUrl="images/signInBtnHov.png"></Image>
                </telerik:RadButton>
            </div>
        </div>
        <div class="signUpBody">
            <div class="formElements">
                <label for="Name">
                    Name:</label>
                <input type="text" class="itext" />
            </div>
            <div class="formElements">
                <label for="Password">
                    Password:</label>
                <input type="password" class="itext" />
            </div>
            <div class="formElements">
                <label for="Gender">
                    Gender:</label>
                <telerik:RadButton RenderMode="Lightweight" ID="btnFemale" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
                    AutoPostBack="false" Text="Female" Width="75px" Height="22px" ForeColor="Black"
                    GroupName="Gender" Skin="Default">
                    <ToggleStates>
                        <telerik:RadButtonToggleState ImageUrl="images/btnHov.png" Selected="true" IsBackgroundImage="true">
                        </telerik:RadButtonToggleState>
                        <telerik:RadButtonToggleState ImageUrl="images/btn.png" HoveredImageUrl="images/btnHov.png"
                            IsBackgroundImage="true"></telerik:RadButtonToggleState>
                    </ToggleStates>
                </telerik:RadButton>
                <telerik:RadButton RenderMode="Lightweight" ID="btnMale" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
                    AutoPostBack="false" Text="Male" Width="75px" Height="22px" ForeColor="Black"
                    GroupName="Gender" Skin="Default">
                    <ToggleStates>
                        <telerik:RadButtonToggleState ImageUrl="images/btnHov.png" Selected="true" IsBackgroundImage="true">
                        </telerik:RadButtonToggleState>
                        <telerik:RadButtonToggleState ImageUrl="images/btn.png" HoveredImageUrl="images/btnHov.png"
                            IsBackgroundImage="true"></telerik:RadButtonToggleState>
                    </ToggleStates>
                </telerik:RadButton>
            </div>
            <div class="subscription">
                <div>
                    <telerik:RadButton RenderMode="Lightweight" ID="btnNewsletter" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                        AutoPostBack="false" Width="38px" Height="22px" ToolTip="Subscribe to Newsletter" Skin="Default">
                        <Icon PrimaryIconCssClass="rbMail" PrimaryIconTop="3px" PrimaryIconLeft="10px"></Icon>
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="images/smallBtnHov.png" Selected="true" IsBackgroundImage="true">
                            </telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="images/smallBtn.png" HoveredImageUrl="images/smallBtnHov.png"
                                IsBackgroundImage="true"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                    <span>Subscribe to Newsletter</span>
                </div>
                <div style="padding-top: 5px">
                    <telerik:RadButton RenderMode="Lightweight" ID="btnRss" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox"
                        AutoPostBack="false" Width="38px" Height="22px" ForeColor="Black" ToolTip="Subscribe to RSS Feeds" Skin="Default">
                        <Icon PrimaryIconCssClass="rbRSS" PrimaryIconTop="3px" PrimaryIconLeft="10px"></Icon>
                        <ToggleStates>
                            <telerik:RadButtonToggleState ImageUrl="images/smallBtnHov.png" Selected="true" IsBackgroundImage="true">
                            </telerik:RadButtonToggleState>
                            <telerik:RadButtonToggleState ImageUrl="images/smallBtn.png" HoveredImageUrl="images/smallBtnHov.png"
                                IsBackgroundImage="true"></telerik:RadButtonToggleState>
                        </ToggleStates>
                    </telerik:RadButton>
                    <span>Subscribe to RSS Feeds</span>
                </div>
            </div>
            <div class="signUp">
                <telerik:RadButton RenderMode="Lightweight" ID="RadButton5" runat="server" Width="112px" Height="28px" Text="Submit the Form to Sign Up" Skin="Default">
                    <Image ImageUrl="images/signUpBtn.png" HoveredImageUrl="images/signUpBtnHov.png"></Image>
                </telerik:RadButton>
                <telerik:RadButton RenderMode="Lightweight" ID="RadButton6" runat="server" Width="89px" Height="22px" Text="Cancel" Skin="Default">
                    <Image ImageUrl="images/cancel.png" HoveredImageUrl="images/cancelHov.png"></Image>
                </telerik:RadButton>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?