Click here to Skip to main content
Click here to Skip to main content

HTML Cute Submit Button (Server Control )

, 7 Oct 2002
Rate this:
Please Sign up or sign in to vote.
Creating a custom good looking Submit button.

Introduction

This article is about creating a custom good-looking submit button. There are a lot of situations, where you will find necessary of using such a control. If you create one site with a particular theme, it is naturally to want all parts (controls) to use the same style. Sometimes regular 'Submit' button doesn't fit, never mind you apply any style on it. These situations happen very often to me, so I created a server control, which I use instead of the regular one.

I will not explain the basics of creating a ‘User Web Control’, but only specific parts. Here are steps you need to take for creating such a control:

  1. Create a web application (I am using C# as implementation language)
  2. Add Custom Web Control
  3. Write necessary code
  4. Put control into container (web form)

Explanations

  1. Create a web application – It is not necessary to create a web application. I have created it, only for debugging purpose. You can create a control without application.
  2. Add Custom Web Control - if you skip creating a web application, then you need not do ADD, but create a Web Control project.
  3. Write necessary code – because code is so trivial I will not emphasize on it.
    namespace CSBApplication
    {
        using System;
        using System.Data;
        using System.Drawing;
        using System.Web;
        using System.Web.UI.WebControls;
        using System.Web.UI.HtmlControls;
        using System.Web.UI;
    
        public abstract class CuteSubmitButton : 
                            System.Web.UI.UserControl
        {
            private string m_title = " ";
            private string m_formName = "";
            private string m_action = "";
            private string m_status = "enabled";
            private string m_imagesPath = "";
            private string m_linkStyleClass = "";
            private int m_tabIndex = -1;
            private string m_enabledHelpTitle = "";
            private string m_disabledHelpTitle = "";
    
            private static bool m_ShowScript = true;
    
            /****************************************************/
            /* properties needed for configuration              */
            /****************************************************/
            public string Title
            {
                get { return m_title; }
                set { m_title = value; }
            }
            public string FormName
            {
                get { return m_formName; }
                set { m_formName = value; }
            }
            public string Action
            {
                get { return m_action; }
                set { m_action = value; }
            }
            public string Status
            {
                get { return m_status; }
                set { m_status = value; }
            }
            public string ImagesPath
            {
                get { return m_imagesPath; }
                set { m_imagesPath = value; }
            }
            public string LinkStyleClass
            {
                get { return m_linkStyleClass; }
                set { m_linkStyleClass = value; }
            }
            public int TabIndex
            {
                get { return m_tabIndex; }
                set { m_tabIndex = value; }
            }
            public string EnabledHelpTitle
            {
                get { return m_enabledHelpTitle; }
                set { m_enabledHelpTitle = value; }
            }
            public string DisabledHelpTitle
            {
                get { return m_disabledHelpTitle; }
                set { m_disabledHelpTitle = value; }
            }
            /****************************************************/
            private void Page_Load( object sender, System.EventArgs e )
            {
                m_ShowScript = true;
            }
            /****************************************************/
            protected override void Render( HtmlTextWriter output )
            {
                if( m_ShowScript )
                    this.Page.Response.Write( getScript() );
    
                            // submit button status check
                string html;
                if( m_status.ToLower().CompareTo( "disabled" ) != 0 )
                    html = getEnabledHTML();
                else
                    html = getDisabledHTML();
    
                this.Page.Response.Write( html );
    
                m_ShowScript = false;
            }
            /****************************************************/
            private string getScript()
            {
                string script = "\n<script lang=JavaScript>\n";
                script += "function submitForm( form , action )\n";
                script += "{\n";
                script += " form.action = action;\n";
                script += " form.submit()\n";
                script += "}\n";
                script += "</script>\n";
    
                return script;
            }
            /****************************************************/
            /* warning IMG tags are placed into                 */
            /* 'just for correct viewing                        */
            /****************************************************/
            private string getEnabledHTML()
            {
                string TabIndex = "";
                string HelpTitle = "";
                string LinkClass = "";
                string ImagesPath = m_imagesPath + "/";
    
                ImagesPath += "enabled/";
                HelpTitle = "title='" + m_enabledHelpTitle + "'";
    
                if( m_linkStyleClass.Length != 0 )
                    LinkClass = "class='" + m_linkStyleClass + "'";
    
                if( m_tabIndex != -1 )
                    TabIndex = "tabindex='" + m_tabIndex + "'"; 
                
                string html = "\n<TABLE align='center' cellspacing='0' 
                                          cellpadding='0' border='0'>\n";
                html += "<TR>\n";
                html += " <TD nowrap><'IMG' border='0' src='" + 
                                  ImagesPath + "left.gif'></TD>\n";
                html += " <TD nowrap border='0' background='" + ImagesPath 
                            + "middle.gif'><A " + 
                            LinkClass + " " +  TabIndex + 
                            " href='javascript:submitForm( document." +
                            m_formName + " , \"" + m_action + "\" )' " + 
                            HelpTitle +">  " +
                            m_title + "  </A></TD>\n";
                html += " <TD nowrap><'IMG' border='0' src='" + 
                            ImagesPath + "right.gif'></TD>\n";
                html += "</TR>\n";
                html += "</TABLE>\n";
    
                return html;
            }
            /****************************************************/
            /* warning IMG tags are placed into                 */
            /* 'just for correct viewing                        */
            /****************************************************/
            private string getDisabledHTML()
            {
                string TabIndex  = "";
                string HelpTitle = "title='" + m_enabledHelpTitle + "'";
                string LinkClass = "";
                string ImagesPath = m_imagesPath + "/disabled/";
    
                if( m_linkStyleClass.Length != 0 )
                    LinkClass = "class='" + m_linkStyleClass + "'";
    
                if( m_tabIndex != -1 )
                    TabIndex = "tabindex='" + m_tabIndex + "'"; 
                
                string html = "\n<TABLE align='center' cellspacing='0' 
                                        cellpadding='0' border='0'>\n";
                html += "<TR>\n";
                html += " <TD nowrap><'IMG' border='0' src='" + 
                                ImagesPath + "left.gif'></TD>\n";
                html += " <TD nowrap border='0' background='" + 
                            ImagesPath + "middle.gif' " + 
                            LinkClass + " " +  TabIndex + " " + HelpTitle 
                            +">  " + m_title + "  </TD>\n";
                html += " <TD nowrap><'IMG' border='0' src='" 
                            + ImagesPath + "right.gif'></TD>\n";
                html += "</TR>\n";
                html += "</TABLE>\n";
    
                return html;
            }
        
            #region Web Form Designer generated code
            override protected void OnInit( EventArgs e )
            {
                InitializeComponent();
                base.OnInit(e);
            }
    
    
    
            private void InitializeComponent()
            {
                this.Load += new System.EventHandler(this.Page_Load);
            }
            #endregion
        }
    }
  4. Put control into a container. Here is the code to be placed into the container:
    <%@ Register TagPrefix="uc1" TagName="CuteSubmitButton" 
                                    Src="CuteSubmitButton.ascx" %>
    
    <uc1:CuteSubmitButton id="CuteSubmitButton1" Title="enabled button" 
           Action="CSBTestWebForm.aspx" ImagesPath="images" 
           Status="enabled" 
           LinkStyleClass="cutesubmitbutton" 
           EnabledHelpTitle="This button is enabled." 
           FormName="CSBForm" runat="server">
    </uc1:CuteSubmitButton>

    or

    <uc1:CuteSubmitButton id=CuteSubmitButton2 title="disabled button" 
           runat="server" FormName="CSBForm" Status="disabled" 
           ImagesPath="images" Action="CSBTestWebForm.aspx" 
           EnabledHelpTitle="This button is disabled." 
           LinkStyleClass="cutesubmitbutton">
    </uc1:CuteSubmitButton>

    You should define the css class cutesubmitbutton. Example:

    <STYLE>
        .cutesubmitbutton 
        { FONT: 12px Verdana,Arial,Helvetica,Sans Serif;
        COLOR: #003366; TEXT-DECORATION: none }
    </STYLE>

Hope you like my solution.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Rumen Yankov
Web Developer Digital Cable Television ltd
Bulgaria Bulgaria
Rumen Yankov was born and live in Plovdiv, second biggest city in Bulgaria.
He has Master's degree of computer science and mathematics.

Comments and Discussions

 
QuestionHelp on rollover submit button? Pinmembermacupryk4-Aug-03 11:24 
QuestionNeat, but what is the advantage? PinmemberMarc Merritt11-Oct-02 3:55 
Generalumm.. wow PinmemberPaul Menefee8-Oct-02 14:02 
QuestionWhy have you implemented abstract class? PinmemberSoliant8-Aug-02 7:50 
AnswerRe: Why have you implemented abstract class? PinmemberRumen Yankov8-Aug-02 21:20 
GeneralRe: Why have you implemented abstract class? PinmemberSoliant9-Aug-02 7:36 
GeneralRe: Why have you implemented abstract class? PinsussAnonymous11-Aug-02 15:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141220.1 | Last Updated 8 Oct 2002
Article Copyright 2002 by Rumen Yankov
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid