<INPUT NAME="button4" TYPE="BUTTON" VALUE=" 4 GHI " onclick="numPressed(4)">

The button specification includes the VALUE of the button (the text printed on it), its NAME, and its onclick event handling. The event handling is the numPressed() function. Each button is sending a number between 0 to 11. The key itself is sent for keys 0 to 9. The asterix (*) button is sending a value of 10 and the pound sign (#) is sending a value of 11. The whole table is positioned within a FORM element, to facilitate the buttons inside. Here is the form:

<FORM NAME="phonePlate">
<TABLE BORDER=2WIDTH=150 HEIGHT=60CELLPADDING=1 CELLSPACING=5>
<TR>
  <TD><INPUT NAME="button1" TYPE="BUTTON" VALUE=" 1       "
       onclick="numPressed(1)"></TD>
  <TD><INPUT NAME="button2" TYPE="BUTTON" VALUE=" 2 ABC "
       onclick="numPressed(2)"></TD>
  <TD><INPUT NAME="button3" TYPE="BUTTON" VALUE=" 3 DEF "
       onclick="numPressed(3)"></TD>
  <TD ROWSPAN="4" VALIGN="top" NOWRAP><SPAN ID="foundSoFar"></SPAN></TD>
</TR>
<TR>
  <TD><INPUT NAME="button4" TYPE="BUTTON" VALUE=" 4 GHI "
       onclick="numPressed(4)"></TD>
  <TD><INPUT NAME="button1" TYPE="BUTTON" VALUE=" 5 JKL  "
       onclick="numPressed(5)"></TD>
  <TD><INPUT NAME="button1" TYPE="BUTTON" VALUE=" 6 MNO"
       onclick="numPressed(6)"></TD>
</TR>
<TR>
  <TD><INPUT NAME="button7" TYPE="BUTTON" VALUE=" 7 PRS"
       onclick="numPressed(7)"></TD>
  <TD><INPUT NAME="button8" TYPE="BUTTON" VALUE=" 8 TUV "
       onclick="numPressed(8)"></TD>
  <TD><INPUT NAME="button9" TYPE="BUTTON" VALUE=" 9 WXY"
       onclick="numPressed(9)"></TD>
</TR>
<TR>
  <TD><INPUT NAME="button*" TYPE="BUTTON" VALUE=" *        "
       onclick="numPressed(10)"></TD>
  <TD><INPUT NAME="button0" TYPE="BUTTON" VALUE=" 0        "
       onclick="numPressed(0)"></TD>
  <TD><INPUT NAME="button#" TYPE="BUTTON" VALUE=" #        "
       onclick="numPressed(11)"></TD>
</TR>
</TABLE>
</FORM>

The display on the right hand side of the keypad is created by a fourth column of the table, spanning all four rows, and including a SPAN element:

<SPAN ID="foundSoFar"></SPAN>

See an example for using the phone pad in Column 57, The Doc Dialer.

People who read this tip also read these tips:

• Removing Paragraphs on the Fly
• Defining a Filter in STYLE
• Printing Frames
• Setting the Background Color
• Coloring the Scrollbar's 3D Light