HtmlButton Server Control Declarative Syntax
Creates a server-side control that maps to the <button> HTML element and allows you to create push buttons.
<button
CausesValidation="False|True"
Disabled="Disabled"
EnableViewState="False|True"
Id="string"
ValidationGroup="String"
Visible="False|True"
OnDataBinding="OnDataBinding event handler"
OnDisposed="OnDisposed event handler"
OnInit="OnInit event handler"
OnLoad="OnLoad event handler"
OnPreRender="OnPreRender event handler"
OnServerClick="OnServerClick event handler"
OnUnload="OnUnload event handler"
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.
.gif) 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 ASP.NET Web 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. |
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.
Example
The following code example demonstrates how to add styles, DHTML events, text, and images to HtmlButton controls. 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" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>HtmlButton Control</title>
<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 id="Form1" runat="server">
<p />
<button id="Button1"
onserverclick="Button1_OnClick"
style="font: 8pt verdana;
background-color:Lime;
border-color:black;
height:30;
width:100"
runat="server">
<img src="/quickstart/aspplus/images/right4.gif" alt="Embedded image" /> Click me!
</button>
With embedded <img> tag
<p />
<p />
<button id="Button2"
onserverclick="Button2_OnClick"
style="font: 8pt verdana;
background-color:Lime;
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>
<%@ Page Language="C#" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>HtmlButton Control</title>
<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 id="Form1" runat="server">
<p />
<button id="Button1"
onserverclick="Button1_OnClick"
style="font: 8pt verdana;
background-color:Lime;
border-color:black;
height:30;
width:100"
runat="server">
<img src="/quickstart/aspplus/images/right4.gif" alt="Embedded image" /> Click me!
</button>
With embedded <img> tag
<p />
<p />
<button id="Button2"
onserverclick="Button2_OnClick"
style="font: 8pt verdana;
background-color:Lime;
border-color:black;
height:30;
width:100"
onmouseover="this.style.backgroundColor='yellow'"
onmouseout="this.style.backgroundColor='Lime'"
runat="server">
Click me too!
</button>
With rollover effect
<p />
<p />
<span id="Span1" runat="server" />
</form>
</body>
</html>