Radio, Submit, Image Submit & Reset Buttons
In part one of this series, we went over Text boxes, Hidden, Password and the Checkbox Form Element Properties. We will now continue with the remaining properties.
* RADIO BUTTON
<INPUT type="radio">
Enables the user to select multiple options.
<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="RADIO" name="selection1"> Selection 1
<INPUT type="RADIO" name="selection2"> Selection 2
<INPUT type="RADIO" name="selection3"> Selection 3
<INPUT type="Submit" value="Submit">
</FORM>
Radio Button Attributes:
TYPE - Radio
CHECKED - Specifies a default selection.
NAME - Name of the variable to be processed by the form processing script.
VALUE - The value of the selected radio button.
* SUBMIT
<INPUT type="submit">
Enables users to submit the form information to the form processing script.
<INPUT type="SUBMIT" value="Submit">
Submit Attributes:
TYPE - Submit
NAME - Name of the variable to be processed by the form processing script.
VALUE - Specifies the text to be displayed on the submit button.
* IMAGE SUBMIT BUTTON
<INPUT type="image" SRC="url">
Enables users to submit the form information to the form processing script. Instead of the regular submit button, an image submit button will be displayed.
<INPUT type="image" name="submit" SRC="image.gif">
Image Submit Attributes:
TYPE - Image
NAME - Name of the variable to be processed by the form processing script.
SRC - Image URL.
* RESET
<INPUT type="reset">
Enables users to clear a form if necessary.
<INPUT type="RESET" value="Reset">
Reset Submit Attributes:
TYPE - Reset
VALUE - Specifies the text to be displayed on the reset button.
Select, Option & Textarea
* SELECT
<select></select>
Surrounds the code for a selection drop down menu.
<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<SELECT SIZE="5">
<OPTION>option 1
<OPTION>option 2
<OPTION>option 3
</SELECT>
<INPUT type="Submit" value="Submit">
</FORM>
Select Attributes:
NAME - Name of the variable to be processed by the form processing script.
SIZE - Specifies the number of visible selections.
MULTIPLE - Enables users to select multiple selections.
* OPTION
<option>
Used with the SELECT element to display the
options.
<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<SELECT>
<OPTION>option 1
<OPTION>option 2
<OPTION>option 3
</SELECT>
<INPUT type="Submit" VALUE="Submit">
</FORM>
Option Attributes:
SELECTED - Specifies a default selection.
VALUE - Specifies the value of the variable in the select element.
* TEXTAREA
<textarea></textarea>
Specifies an open text area.
<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
Enter Your Comments:<BR>
<TEXTAREA wrap="virtual" name="Comments" rows=3
cols=20 maxlength=100>
</TEXTAREA><BR>
<INPUT type="Submit" VALUE="Submit">
<INPUT type="Reset" VALUE="Clear">
</FORM>
Textarea Attributes:
NAME - Name of the variable to be processed by the form processing script.
COLS - The number of columns within the text area.
ROWS - The number of rows within the text area.
WRAP - Specifies the text wrap. The default setting is off.
The WRAP can be set to "VIRTUAL" or "PHYSICAL" and will wrap the text as the user types.
Tip: In order to properly format your form, you may want to place it within a table.
Here is a basic email form set up within a table:
<FORM action="mailto:you@yourdomain.com">
<TABLE BORDER="0" CELLPADDING="2">
<TR>
<TD><FONT face="Verdana" size=2>Name:</FONT></TD>
<TD><INPUT name="Name" value="" size="10"></TD>
</TR>
<TR>
<TD><FONT face="Verdana" size=2>Email:</FONT></TD>
<TD><INPUT name="Email" value="" size="10"></TD>
</TR>
<TR>
<TD></TD>
<TD><INPUT type="submit" value="Submit"></TD>
</TR>
</TABLE>
</FORM>
