Home > Getting Started > ASP.NET Syntax > ASP.NET Syntax for HTML Controls > HtmlButton

ASP.NET Syntax   ASP.NET Syntax for HTML Controls

---

Specifies a container for rich HTML that is rendered as a button.

Declarative Syntax

<button id="accessID" runat="server"
   onServerClick = "onServerClickHandler">
      buttontext, image, or control
</button>

For information on the individual members of this class, see HtmlButton in the class library.

• The <button> element is defined in the HTML 4.0 specification. As such, the HtmlButton control is supported only in Microsoft^® Internet Explorer versions 4.0 and later.

The HtmlButton server control renders as an HTML 4.0 <button>. This differs from <input type=button> in that it enables web developers to create rich UI form buttons that can be composed from embedded HTML elements ( and even other server controls ).

The HtmlButton control enables programming of the HTML <button> element. You can use this control to customize the appearance of the buttons you place in .aspx pages. The HTML 4.0 <button> element enables you to create UI form buttons composed from embedded HTML elements and even other Web Forms controls.

The following sample illustrates use of the HtmlButton control.

• Modifying the Appearance of an HtmlButton Control

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, among others. You can also include images within the button elements themselves or even include other Web Forms controls.

1. Declare an HtmlButton control on your Web Forms page:

<button runat="server"> </button>. 

2. In the opening tag of the control, include a style attribute and declare the styles that you want the button to display. For example, including the following code in the opening tag defines the font size and family, background color, border color, height, and width for the control.

style = "font: 9pt verdana; 
   background-color:lightgreen; 
   border-color:black;
   height=30; 
   width:100"

1. Declare an HtmlButton control on your Web Forms page:

<button runat="server"> </button>. 

2. In the opening tag of the control, include the DHTML events that you want to display on the browser in response to user behaviors. For example, including the following code causes the background color of the control to change to yellow when a user moves the mouse over the control.

onmouseover = "this.style.backgroundColor='yellow’" 

1. Declare an HtmlButton control on your Web Forms page:

   <button runat="server"> </button>.

2. To format the button’s text, simply enclose the text within formatting tags. For example, including

   <b>Click Me!</b>

   between the control’s opening and closing tags bolds the control text.

3. To place an image ( or other control ) on the button, include the markup for the image ( or other control ) that you want to display. For example, including

   <img src = "/images/myImage.gif">

   displays the myImage.gif file stored in your application’s /images directory.

NOTE: Check the syntax for the control you want to include in the HtmlButton control.

The following example shows use of the concepts presented above, and also how to include code that is assigned to handle the onServerClick event of each button. Here, we simply display a message through an HtmlGenericControl that is instantiated by a <span> element, whenever a button is clicked.

Modifying the Appearance of an HtmlButton Control Run Sample | View Source

Web Forms Events and Handlers   HtmlButton Class