More input objects
Check box
If you want to add a toggle input item that the user can select or deselect, use a check box input item.
<INPUT TYPE="CHECKBOX" NAME="name" VALUE="checkboxValue">
NAME="name"
Specifies the name used to identify this input at the server side script.
VALUE="checkboxValue"
This is the value returned to the server if the user selects this check box.
This is an optional attribute.
For example, if you created a check box like this:
<INPUT TYPE="CHECKBOX" NAME="sendmail">
and if the user selects the check box, the server side action handler script will
receive sendmail=on
If the check box is like this:
<INPUT TYPE="CHECKBOX" NAME="sendmail" VALUE="send">
if the user selects this check box before submitting, the handler script will
receive "sendmail=send"
CHECKED
If you specify CHECKED, the check box will be checked by default.
example:
<INPUT TYPE="CHECKBOX" NAME="sendmail" VALUE="send" CHECKED>
Let us add a check box to our form.
<FORM ACTION="cgi-bin/formmail.pl" METHOD="POST">
Name: <INPUT TYPE="TEXT" NAME="Name" VALUE="" SIZE="25" MAXLENGTH="50"> <BR>
Email: <INPUT TYPE="TEXT" NAME="Email" VALUE="" SIZE="25" MAXLENGTH="50"><BR>
<INPUT TYPE="CHECKBOX" NAME="subscribe" CHECKED> Subscribe me to the News letter <BR>
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Sign Me Up!">
</FORM>
Radio Button
Radio buttons are for selecting one item from multiple available choices. When the user selects a button in the set, all other buttons in the set are deselected.
The individual button in a set is created using input type "RADIO"
<INPUT TYPE="RADIO" NAME="name" VALUE="valueOfThisItem">
The buttons in the same set should have the same name. The value corresponding to the selected radio box is taken as the value of "name".
For example, say you are providing a rating survey at your site like this:
How do you rate the content at this site?
<INPUT TYPE="RADIO" NAME="rating" VALUE="excellent">Excellent !!! <BR>
<INPUT TYPE="RADIO" NAME="rating" VALUE="good">Good ;)<BR>
<INPUT TYPE="RADIO" NAME="rating" VALUE="bad">Bad :(<BR>
If the user selects excellent, the server side script will receive "rating=excellent"
You can add CHECKED attribute to make a radio item
selected by default.
Let us add a radio group to our html form.
<FORM ACTION="cgi-bin/formmail.pl" METHOD="POST">
Name: <INPUT TYPE="TEXT" NAME="Name" VALUE="" SIZE="25" MAXLENGTH="50"> <BR>
Email: <INPUT TYPE="TEXT" NAME="Email" VALUE="" SIZE="25" MAXLENGTH="50"><BR>
<INPUT TYPE="CHECKBOX" NAME="subscribe" CHECKED> Subscribe me to the News letter <BR>
Format of the Email:<BR>
<INPUT TYPE="RADIO" NAME="format" VALUE="html" CHECKED> HTML<BR>
<INPUT TYPE="RADIO" NAME="format" VALUE="text"> Plain Text<BR>
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Sign Me Up!">
</FORM>
SELECT Lists
When you want to create a list of items for the user to select from, you can create a
SELECT input item. Different from the input tags we saw before, the list has two HTML
tags associated -the <SELECT>
tag and the <OPTION> tag.
You can create a list using the <SELECT></SELECT>
tag and the items in the list using the <OPTIONS>
tag.
An example makes it clear:
Shipping method:
<SELECT NAME="shipping">
<OPTION VALUE="1"> Standard
<OPTION VALUE="2"> 2-day
<OPTION VALUE="3"> Overnight
</SELECT>
If the user selects 2-day, the server side script will receive "shipping=2".
If you want to make an option selected by default, you can add "SELECTED" attribute
to the OPTION tag.
<OPTION VALUE="1" SELECTED>Standard
makes the standard shipping method selected by default.
Multiple selection.
It is possible to allow multiple selection in the list. Use MULTIPLE attribute
in the SELECT tag.
To display more than one item at a time in the list box, you can use SIZE attribute.
Example:
Select your areas of interest:
(hold down the Ctrl key for selecting more than one)<BR>
<SELECT MULTIPLE NAME="interests" SIZE="4">
<OPTION VALUE="arts"> Arts
<OPTION VALUE="pol" > Politics
<OPTION VALUE="sci" > Science
<OPTION VALUE="comp"> Computers and Internet
</SELECT>
If the above code is included in the form, the user will be able to select any combination of options as he likes. Suppose the user selects Arts and Science The server side script will receive the values like this:"interests=arts""interests=sci"
Adding a SELECT input item to our form,
<FORM ACTION="cgi-bin/formmail.pl" METHOD="POST">
Name: <INPUT TYPE="TEXT" NAME="Name" VALUE="" SIZE="25" MAXLENGTH="50"> <BR>
Email: <INPUT TYPE="TEXT" NAME="Email" VALUE="" SIZE="25" MAXLENGTH="50"><BR>
<INPUT TYPE="CHECKBOX" NAME="subscribe" CHECKED> Subscribe me to the News letter <BR>
Format of the Email:<BR>
<INPUT TYPE="RADIO" NAME="format" VALUE="html" CHECKED> HTML<BR>
<INPUT TYPE="RADIO" NAME="format" VALUE="text"> Plain Text<BR>
Type of subscription you want:<BR>
<SELECT NAME="type">
<OPTION VALUE="standard"> Standard - FREE
<OPTION VALUE="prof" > Professional - Paid
</SELECT>
<BR>
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Sign Me Up!">
</FORM>
Multi-line text
When you want to get a multiple line input from the user, the Textarea can be used.
A Textarea is created using the tag <TEXTAREA>
Attributes:
NAME="name"
the name identifies this TEXTAREA in the server side script.
COLS="columns"
defines the width (number of characters per line) the text area can accommodate without scrolling.
ROWS="rows"
defines the number of lines (number of rows) the text area can accommodate without scrolling.
Example:
Enter your suggestions here:<BR>
<TEXTAREA NAME="suggestions" ROWS="5" COLS="25"></TEXTAREA>
If you want to provide some value in the text area by default, you can give it like this
<TEXTAREA NAME="suggestions" ROWS="5" COLS="25">My suggestions are:</TEXTAREA>
Now we will add a text area to our form:
<FORM ACTION="cgi-bin/formmail.pl" METHOD="POST">
Name: <INPUT TYPE="TEXT" NAME="Name" VALUE="" SIZE="25" MAXLENGTH="50"> <BR>
Email: <INPUT TYPE="TEXT" NAME="Email" VALUE="" SIZE="25" MAXLENGTH="50"><BR>
<INPUT TYPE="CHECKBOX" NAME="subscribe" CHECKED> Subscribe me to the News letter <BR>
Format of the Email:<BR>
<INPUT TYPE="RADIO" NAME="format" VALUE="html" CHECKED> HTML<BR>
<INPUT TYPE="RADIO" NAME="format" VALUE="text"> Plain Text<BR>
Type of subscription you want:<BR>
<SELECT NAME="type">
<OPTION VALUE="standard"> Standard - FREE
<OPTION VALUE="prof" > Professional - Paid
</SELECT> <BR>
Comments to the editor:<BR>
<TEXTAREA NAME="comments" ROWS="7" COLS="30"></TEXTAREA>
<BR>
<INPUT TYPE="SUBMIT" NAME="submit" VALUE="Sign Me Up!">
</FORM>
We have seen some very common input types. Before looking into more advanced input items,
you can test the form we have developed.
The code is available in the HTML file:
HTML form tutorial example
|
|
