Working with HTML Client Controls

To see an example using HTML client controls with JavaScript, take a look at the JavaScript example on the CD-ROM, which you can see at work in Figure 19.2. When you click the button, the text "Welcome to client coding!" appears in the text field.

Figure 19.2: The JavaScript example.

In this example, I click the HTML tab in the toolbox and add both a text field and an HTML input button to a Web form. I have to give both of these controls an ID value explicitly, which I do by setting their (id) property in the properties window to Text1 and Button1. Now I can refer to these controls in client-side code.

The button is created with an <input> element, which looks like this:

<INPUT id=Button1 style="Z-INDEX: 101; LEFT: 125px; POSITION:
absolute; TOP: 85px" type=button value="Click me">

To connect this to a JavaScript function I'll name Button1_onclick, I use the language and onclick HTML attributes of this button:

<INPUT id=Button1 style="Z-INDEX: 101; LEFT: 125px; POSITION:
absolute; TOP: 85px" type=button value="Click me"
language="javascript" onclick="return Button1_onclick()">

And I also add a <script> element to the Web page's header that defines the Button1_onclick function, which in turn displays the message:

<script language="javascript">
<!--

function Button1_onclick() {
    document.Form1.Text1.value = "Welcome to client coding!"
}

//-->
</script>

And that completes the example; when you run this code, you see the result in Figure 19.2, where the message appears in the text field when the user clicks the button, all using HTML client controls in the browser, no server roundtrip needed.

Here is the code for WebForm1.aspx for this example:

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="JavaScript.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>JavaScript example</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema
        content="http://schemas.microsoft.com/intellisense/ie5">
  <script language=javascript>
<!--

function Button1_onclick() {
    document.Form1.Text1.value = "Welcome to client coding!"
}
//-->
</script>
</HEAD>
  <body MS_POSITIONING="GridLayout">

    <form id="Form1" method="post" runat="server">
<INPUT id=Button1 style="Z-INDEX: 101; LEFT: 125px; POSITION:
absolute; TOP: 85px" type=button value="Click me"
language=javascript onclick="return Button1_onclick()">
&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT
id=Text1
style="Z-INDEX: 102; LEFT: 208px; WIDTH: 155px; POSITION:
absolute; TOP: 86px; HEIGHT: 22px"
type=text>

    </form>

  </body>
</HTML>

That's the way you can work with HTML client controls—in the browser, with code that the browser understands, such as JavaScript.