<dd><p>The VALUE attribute specifies the text label that should appear onthe button.</p></dd><dt><b>onClick</b></dt><dd><p>Like submit buttons, reset buttons may have an onClick attribute thatspecifies the JavaScript code to execute if a user clicks on thebutton; returning false from this code will cancel the resetoperation.</p></dd></dl></div><a name="ch04-11-fm2xml" /><div class="sect3"><h3 class="sect3">4.2.3.8. Image buttons</h3><p>You can also have <a name="INDEX-846" /><a name="INDEX-847" />images as buttons. Image buttonsfunction as submit buttons but give you much more flexibility overhow the button looks. Keep in mind that users are generally used tohaving buttons displayed a particular way by the browser andoperating system, and a button in a different format may be confusingto a novice. The HTML for an image button tag looks like this:</p><blockquote><pre class="code">&lt;INPUT TYPE="image" SRC="/icons/button.gif" NAME="result" VALUE="text only"&gt;</pre></blockquote><p>Graphical and text-only browsers treat this element very differently.A text-only browser, such as Lynx, sends the name and value togetherlike most other form elements:</p><blockquote><pre class="code">result=text+only</pre></blockquote><p>However, a graphical browser, like Netscape and Internet Explorer,send the coordinates where the user clicked on the image in additionto the name of the button. The value is not sent. These coordinatesare measured in pixels from the upper-left corner of the image (see<a href="ch04_02.htm#ch04-92099">Figure 4-6</a>).</p><a name="ch04-92099" /><div class="figure"><img width="174" src="figs/cgi2.0406.gif" height="85" alt="Figure 4-6" /></div><h4 class="objtitle">Figure 4-6. Image button coordinates</h4><p>In this example, a graphical browser would submit:</p><blockquote><pre class="code">action.x=50&amp;action.y=20</pre></blockquote><p>Here are the <a name="INDEX-848" />attributes for image buttons:</p><dl><dt><b>VALUE</b></dt><dd><p>The <a name="INDEX-849" />VALUE attribute is sent as the valuefor this element by text browsers.</p></dd><dt><b>SRC</b></dt><dd><p>The <a name="INDEX-850" /><a name="INDEX-851" />SRC attribute specifies the URL tothe image displayed for the button, just as it does in the morecommon &lt;IMG&gt; tag (if the &lt;IMG&gt; tag looks unfamiliar toyou, it's because you probably only recognize it when combinedwith the SRC attribute: &lt;IMG SRC=...&gt;).</p></dd><dt><b><a name="INDEX-852" /><a name="INDEX-853" />onClick</b></dt><dd><p>This attribute behaves just as it does with standard submit buttons.</p></dd></dl></div><a name="ch04-12-fm2xml" /><div class="sect3"><h3 class="sect3">4.2.3.9. Plain buttons</h3><p>The last type of<a name="INDEX-854" /> <a name="INDEX-855" /><a name="INDEX-856" /><a name="INDEX-857" />button is justthat -- a button; it has no special function. To avoid confusingthis button with the other button types, we will refer to it as aplain button. A plain button tag looks like a submit or reset button:</p><blockquote><pre class="code">&lt;INPUT TYPE="button" VALUE="Click for a greeting..."   onClick="alert( 'Hello!' );"&gt;</pre></blockquote><p>The name and value of a plain button is never passed to a CGI script.Because a plain button has no special action, it is meaninglesswithout an <tt class="function">onClick</tt> attribute:</p><dl><dt><b><a name="INDEX-858" /><a name="INDEX-859" /><a name="INDEX-860" /><a name="INDEX-861" />NAME</b></dt><dd><p>The NAME attribute is never sent as part of a request, so it is onlyuseful to JavaScript code.</p></dd><dt><b>VALUE</b></dt><dd><p>The VALUE attribute specifies the name of the button.</p></dd><dt><b>onClick</b></dt><dd><p>The onClick attribute specifies the code to run when the button isclicked. The code's return value has no effect because plainbuttons do not cause <a name="INDEX-862" /> <a name="INDEX-863" /> <a name="INDEX-864" />other behavior.</p></dd></dl></div></div><a name="ch04-13-fm2xml" /><div class="sect2"><h3 class="sect2">4.2.4. The &lt;SELECT&gt; Tag</h3><p>The <a name="INDEX-865" /> <a name="INDEX-866" />&lt;SELECT&gt;tag is used to create a<a name="INDEX-867" />list for users to choose from. It cancreate two different elements that look quite different but havesimilar function: a <a name="INDEX-868" />scrolling box or a menu (also commonlyreferred to as a <a name="INDEX-869" /><a name="INDEX-870" />drop-down).Both elements are displayed in <a href="ch04_02.htm#ch04-52236">Figure 4-7</a>. Unlikethe &lt;INPUT&gt; elements, &lt;SELECT&gt; tags have an opening aswell as a closing tag.</p><p>Here is an example of a menu:</p><blockquote><pre class="code">Choose a method of payment: &lt;SELECT NAME="card" SIZE=1&gt;  &lt;OPTION SELECTED&gt;American Express&lt;/OPTION&gt;  &lt;OPTION&gt;Discover&lt;/OPTION&gt;  &lt;OPTION&gt;Master Card&lt;/OPTION&gt;  &lt;OPTION&gt;Visa&lt;/OPTION&gt;&lt;/SELECT&gt;</pre></blockquote><a name="ch04-52236" /><div class="figure"><img width="481" src="figs/cgi2.0407.gif" height="264" alt="Figure 4-7" /></div><h4 class="objtitle">Figure 4-7. Two forms of select lists: a menu and a scrolling box</h4><p>Here is an example of a <a name="INDEX-871" />scrollingbox:</p><blockquote><pre class="code">Choose the activities you enjoy: &lt;SELECT NAME="activity" SIZE=4 MULTIPLE&gt;  &lt;OPTION&gt;Aerobics&lt;/OPTION&gt;  &lt;OPTION&gt;Aikido&lt;/OPTION&gt;  &lt;OPTION&gt;Basketball&lt;/OPTION&gt;  &lt;OPTION&gt;Bicycling&lt;/OPTION&gt;  &lt;OPTION&gt;Golfing&lt;/OPTION&gt;  &lt;OPTION&gt;Hiking&lt;/OPTION&gt;  ...&lt;/SELECT&gt;</pre></blockquote><p>Scrolling boxes may optionally allow the user to select multipleentries. Multiple options are encoded as separate name-value pairs,as if they had been entered by multiple form elements. For example,if someone selects Aikido, Bicycling, and Hiking, the browser willencode it as <tt class="literal">activity=Aikido&amp;activity=Bicycling&amp;activity=Hiking</tt>.</p><p>Attributes for the &lt;SELECT&gt; tag are:</p><dl><dt><b>SIZE</b></dt><dd><p>The <a name="INDEX-872" />SIZEattribute determines the number of lines visible in the list.Specifying 1 for the SIZE indicates that the list should be a menuinstead.</p></dd><dt><b><a name="INDEX-873" />MULTIPLE</b></dt><dd><p>The MULTIPLE attribute allows the user to select multiple values. Itis only possible if the SIZE attribute is assigned a value greaterthan 1. On some operating systems, the user may need to hold downcertain modifier keys on their keyboard in order to select multipleitems.</p></dd></dl><a name="ch04-14-fm2xml" /><div class="sect3"><h3 class="sect3">4.2.4.1. The &lt;OPTION&gt; tag</h3><p>The &lt;SELECT&gt; tag does not have a value attribute. Each of itspossible values must have an<a name="INDEX-874" /><a name="INDEX-875" /><a name="INDEX-876" /><a name="INDEX-877" />&lt;OPTION&gt;tag around it.</p><p>You may override the value used by a particular option by specifyinga VALUE attribute like this:</p><blockquote><pre class="code">&lt;OPTION VALUE="AMEX" &gt;American Express&lt;/OPTION&gt;</pre></blockquote><p>Options have two optional<a name="INDEX-878" />attributes:</p><dl><dt><b>SELECTED</b></dt><dd><p>The <a name="INDEX-879" />SELECTED attribute specifies that the optionshould be selected by default. When a form is submitted, the name ofthe &lt;SELECT&gt; tag is submitted along with the value of theselected options.</p></dd><dt><b><a name="INDEX-880" />VALUE</b></dt><dd><p>The VALUE attribute is the value that is passed for the option if itis selected. If this attribute is omitted, then it <a name="INDEX-881" /> <a name="INDEX-882" />defaults to the textbetween the &lt;OPTION&gt; and &lt;/OPTION&gt; tags.</p></dd></dl></div></div><a name="ch04-15-fm2xml" /><div class="sect2"><h3 class="sect2">4.2.5. The &lt;TEXTAREA&gt; Tag</h3><p>The final form element, the &lt;TEXTAREA&gt; tag, allows users toenter multiple lines of text. See <a href="ch04_02.htm#ch04-70831">Figure 4-8</a>.</p><a name="ch04-70831" /><div class="figure"><img width="481" src="figs/cgi2.0408.gif" height="228" alt="Figure 4-8" /></div><h4 class="objtitle">Figure 4-8. Text area</h4><p>Text areas have an opening and a closing tag:</p><blockquote><pre class="code">&lt;TEXTAREA ROWS=10 COLS=40 NAME="comments" WRAP="virtual"&gt;Default text&lt;/TEXTAREA&gt;</pre></blockquote><p>This creates a scrolled text field with a visible area of ten rowsand forty columns.</p><p>There is no VALUE property for the<a name="INDEX-883" /><a name="INDEX-884" /><a name="INDEX-885" />&lt;TEXTAREA&gt;tag. Default text should be placed between the opening and closingtags. Unlike other HTML tags, white space -- includingnewlines -- is <em class="emphasis">not</em> ignored between&lt;TEXTAREA&gt; and &lt;/TEXTAREA&gt; tags. A browser will renderthe example above with "Default" and "text"on separate lines.</p><p>Attributes for the &lt;TEXTAREA&gt; tag are:</p><dl><dt><b>COLUMNS</b></dt><dd><p>The <a name="INDEX-886" />COLUMNS attribute specifies the widthof the text area, but like the size of text fields, browsers sizecolumns differently for variable-width fonts.</p></dd><dt><b>ROWS</b></dt><dd><p>The <a name="INDEX-887" />ROWSattribute specifies the number of lines that the text area shoulddisplay. Text bars have scrollbars to access text that does not fitwithin the display area.</p></dd><dt><b>WRAP</b></dt><dd><p>The <a name="INDEX-888" />WRAPattribute specifies what the browser should do if the user typesbeyond the right margin, but note that the WRAP attribute is notimplemented as uniformly as other tags and attributes. Although mostbrowsers support it, it is actually not included in the HTML 4.0standard. In general, specifying "<a name="INDEX-889" />virtual" as the WRAP resultsin the text wrapping within the text area, but it is submittedwithout <a name="INDEX-890" />newlines. Specifying"<a name="INDEX-891" />physical" as the WRAP alsoresults in the text wrapping for the user, but the line breaks aresubmitted as part of the text. Users on different operating systemswill submit different characters for end-of-line characters. If youspecify to omit the WRAP attribute or specify "none" forit, then text <a name="INDEX-892" /> <a name="INDEX-893" /> <a name="INDEX-894" /> <a name="INDEX-895" />will typically scroll beyond the rightside of the text area.</p></dd></dl></div><hr align="left" width="515" /><div class="navbar"><table border="0" width="515"><tr><td width="172" valign="top" align="left"><a href="ch04_01.htm"><img src="../gifs/txtpreva.gif" alt="Previous" border="0" /></a></td><td width="171" valign="top" align="center"><a href="index.htm"><img src="../gifs/txthome.gif" alt="Home" border="0" /></a></td><td width="172" valign="top" align="right"><a href="ch04_03.htm"><img src="../gifs/txtnexta.gif" alt="Next" border="0" /></a></td></tr><tr><td width="172" valign="top" align="left">4. Forms and CGI</td><td width="171" valign="top" align="center"><a href="index/index.htm"><img src="../gifs/index.gif" alt="Book Index" border="0" /></a></td><td width="172" valign="top" align="right">4.3. Decoding Form Input</td></tr></table></div><hr align="left" width="515" /><img src="../gifs/navbar.gif" alt="Library Navigation Links" usemap="#library-map" border="0" /><p><font size="-1"><a href="copyrght.htm">Copyright &copy; 2001</a> O'Reilly &amp; Associates. All rights reserved.</font></p><map name="library-map"><area href="../index.htm" coords="1,1,83,102" shape="rect" /><area href="../lnut/index.htm" coords="81,0,152,95" shape="rect" /><area href="../run/index.htm" coords="172,2,252,105" shape="rect" /><area href="../apache/index.htm" coords="238,2,334,95" shape="rect" /><area href="../sql/index.htm" coords="336,0,412,104" shape="rect" /><area href="../dbi/index.htm" coords="415,0,507,101" shape="rect" /><area href="../cgi/index.htm" coords="511,0,601,99" shape="rect" /></map></body></html>