HtmlButton Control
Creates a server-side control that maps to the <button> HTML element and allows you create push buttons.
<button id="programmaticID"
OnServerClick="onserverclickhandler"
runat="server" >
buttontext, image, or control
</button>
Remarks
Use the HtmlButton control to program against the HTML <button> element. You can provide custom code for the ServerClick event of the HtmlButton control to specify the action performed when the control is clicked.
Note The HtmlButton control renders JavaScript to the client browser. The client browser must have JavaScript enabled for this control to function properly. For more information on client script, see Client Script in Web Forms Pages.
You can also customize the appearance of the buttons you place in ASP.NET (.aspx) pages. The HTML 4.0 <button> element enables you to create buttons composed of embedded HTML elements (and even other Web Forms controls).
Note The <button> element is defined in the HTML 4.0 specification. Therefore, the HtmlButton control is supported only in Microsoft Internet Explorer version 4.0 and later.
There are a number of ways to modify the appearance of an HtmlButton control. You can assign style attributes to the button in the opening tag of the control element, include formatting elements around the text that you insert between the opening and closing tags of the control, or assign property value changes for the client-side onmouseover and onmouseout events, to name a few. You can also include images within the button elements themselves, or even include other Web Forms controls.
To add styles to an HtmlButton control
Declare an HtmlButton control on your Web Forms page:
<button runat="server"> </button>In the opening tag of the control, include a style attribute and declare the styles that you want the button to display. For example, the following code in the opening tag defines the font size and style, background color, border color, height, and width for the control.
style="font: 8pt verdana;background-color:lightgreen;border-color:black;height=30;width:100"
To include DHTML events in an HtmlButton control
Declare an HtmlButton control on your Web Forms page:
<button runat="server"> </button>In the opening tag of the control, include the DHTML events that you want to occur on the browser in response to user behaviors. For example, the following code causes the background color of the control to change to light green when users move the mouse pointer over the control.
mouseover="this.style.backgroundColor='lightgreen'"
To include formatted text, images, or other Web Forms controls in an HtmlButton control
Declare an HtmlButton control on your Web Forms page:
<button runat="server"> </button>Declare the text with formatting tags between the opening and closing tags of the control. For example, include
<b>Click Me!</b>between the control's opening and closing tags to bold the control text.Between the control's opening and closing tags, include the markup for the image or control that you want to display. For example, include
<img src="/images/MyImage.gif">to display the MyImage.gif file stored in your application's image directory.**Note **See the control syntax for the control you want to include in the HtmlButton control.
Example
The following example shows the procedures presented in this topic. It also includes code for two simple event handlers that display a message through an instance of an HtmlGenericControl that is created by a <span> element.
<%@ Page Language="VB" AutoEventWireup="True" %>
<html>
<head>
<script runat="server">
Sub Button1_OnClick(Source As Object, e As EventArgs)
Span1.InnerHtml = "You clicked Button1"
End Sub
Sub Button2_OnClick(Source As Object, e As EventArgs)
Span1.InnerHtml = "You clicked Button2"
End Sub
</script>
</head>
<body>
<h3>HtmlButton Sample</h3>
<form runat="server">
<p>
<button id="Button1"
OnServerClick="Button1_OnClick"
style="font: 8pt verdana;
background-color:lightgreen;
border-color:black;
height=30;
width:100"
runat="server">
<img src="/quickstart/aspplus/images/right4.gif"> Click me!
</button>
With embedded <img> tag
<p>
<p>
<button id=Button2
OnServerClick="Button2_OnClick"
style="font: 8pt verdana;
background-color:lightgreen;
border-color:black;
height=30;
width:100"
onmouseover="this.style.backgroundColor='yellow'"
onmouseout="this.style.backgroundColor='lightgreen'"
runat="server">
Click me too!
</button>
With rollover effect
<p>
<p>
<span id=Span1 runat="server" />
</form>
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<html>
<head>
<script runat="server">
void Button1_OnClick(object Source, EventArgs e)
{
Span1.InnerHtml="You clicked Button1";
}
void Button2_OnClick(object Source, EventArgs e)
{
Span1.InnerHtml="You clicked Button2";
}
</script>
</head>
<body>
<h3>HtmlButton Sample</h3>
<form runat="server">
<p>
<button id="Button1"
OnServerClick="Button1_OnClick"
style="font: 8pt verdana;
background-color:lightgreen;
border-color:black;
height=30;
width:100"
runat="server">
<img src="/quickstart/aspplus/images/right4.gif"> Click me!
</button>
With embedded <img> tag
<p>
<p>
<button id=Button2
OnServerClick="Button2_OnClick"
style="font: 8pt verdana;
background-color:lightgreen;
border-color:black;
height=30;
width:100"
onmouseover="this.style.backgroundColor='yellow'"
onmouseout="this.style.backgroundColor='lightgreen'"
runat="server">
Click me too!
</button>
With rollover effect
<p>
<p>
<span id=Span1 runat="server" />
</form>
</body>
</html>