|
|
|
|
|
|
Lesson#7
|
TEXT BOXES CHECK BOXES RADIO BUTTONS
|
|
|
|
Lesson 07
TEXT BOXES, CHECK BOXES, RADIO BUTTONS
-<input type=text Name=“URL” Value=http://> - here ‘value’
attribute would pre-fix the information in
the text box which is given as its value (e.g, http://)
-<Input type=text Name=“address” size=“40”> -‘size’ is used to
set size of the box.
-<input type=text Name=“age” maxlength=“3”> -‘maxlength’ limits
the length of the text in the text box.
Check boxes are normally used to get yes/no or true/false
information from a reader. Syntax is to keep
value of ‘type’ attribute as ‘checkbox’ in the input tag. Using
‘checked’ attribute certain values can be
displayed pre-checked in the checkbox. Moreover, ‘Name’
attribute indicates the unique field name for a
checkbox.
Example – Check box
<HTML> <HEAD><TITLE>Check Box Example</TITLE> </HEAD> <BODY>
<H3>Describe
Your Phobia!</H3> <FORM
ACTION=http://www.sad.com/scripts/formtest.asp
METHOD="POST"> What is <I>your</I> phobia? (Please check all
that apply):
<P>
<INPUT TYPE="CHECKBOX" NAME=“Water">Fear of water<BR> <INPUT
TYPE="CHECKBOX" NAME="Bald">Fear of becoming bald<BR> <INPUT
TYPE="CHECKBOX"
NAME=“Lock”>Fear of being locked inside<BR> <INPUT
TYPE="CHECKBOX" NAME="Flying"
Checked >Fear of flying<BR>
<P>
<INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET">
</FORM> </BODY>
</HTML>
Result is shown in Fig. 1 below.
Fig. 1
Radio buttons
Instead of yes/no choices, you might want your readers to have
one choice out of many options. For that
Radio buttons can be used. General format <input type=“radio”
Name=“field name” value=“value”> You
supply the same field name to all the radio buttons that you
want to group together. ‘Value’ is the unique
text string that specifies the value of the option when it is
selected.
Example – Radio button
<HTML> <HEAD><TITLE>Radio Button Example</TITLE> </HEAD> <BODY>
<H3>Survey</H3> <FORM
ACTION="http://www.sad.com/scripts/formtest.asp"
METHOD="POST"> Which of the following best describes your
current income
29
level:<BR><BR><INPUT TYPE="RADIO" NAME=“Income"
VALUE="Poverty">living below the
poverty line<BR> <INPUT TYPE="RADIO" NAME=“Income"
VALUE=“Middle” Checked>living at
the level of middle class<BR> <INPUT TYPE="RADIO" NAME=“Income"
VALUE=“Upper">living
at the level ofupper class<BR><BR>
Which of the following best describes your political inclination
:<BR><BR><INPUT TYPE="RADIO"
NAME="Politics" VALUE=“Nationalist" CHECKED>Worker of
Nationalist Party<BR> <INPUT
TYPE="RADIO" NAME="Politics" VALUE=“Socialist">Member of
Socialist Party<BR>
<INPUT TYPE="RADIO" NAME="Politics" VALUE=“Republican">Supporter
ofRepublican
Party<BR> <INPUT TYPE="RADIO" NAME="Politics" VALUE=“None">None
of the above<BR>
<P>
<INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET">
</FORM> </BODY>
</HTML>
Result is shown in Fig. 2 below.
Fig. 2
Selection lists
General format <select name=“field name” size=“no. of items”>
Between the <select> and </select>
tags are the <option> and </option> tags whichdefine the list
items. If you omit “size” the list becomes a
drop-down list. If size is two or more, the list becomes a
rectangle with scroll bars for navigating the
choices. Using ‘Selected’ attribute an item is selected by
default. Multiple attribute allows the reader to select
multiple items from the list.
Example - lists
<HTML><BODY> <FORM
ACTION="http://www.sad.com/scripts/formtest.asp"
METHOD="POST"> Select your nationality :<P> <SELECT
NAME=“Nationality" SIZE="4">
<OPTION>American</OPTION>
<OPTION>Australian</OPTION> <OPTION>Hungarian</OPTION>
<OPTION>Indian</OPTION> <OPTION>Iranian</OPTION> <OPTION
SELECTED>Pakistani</OPTION> <OPTION>French</OPTION> </SELECT><P>
Select your
favorite city:<P> <SELECT NAME="City"> <OPTION>Sydney</OPTION>
<OPTION>London</OPTION> <OPTION SELECTED>Lahore</OPTION>
</SELECT><P>
Countries visited last year:<P> <SELECT NAME=“Countries"
SIZE="5" MULTIPLE>
30
<OPTION>Canada</OPTION> <OPTION>Russia</OPTION>
<OPTION>England</OPTION>
<OPTION>Egypt</OPTION> <OPTION>Saudi Arabia</OPTION> </SELECT>
</BODY></HTML>
|
|
|
|
|