Unit 2.11 - Forms

Programming and Development Tools Web Programming

UNIT

2.11
Web Programming
Forms

OBJECTIVES
This unit helps you to add Forms to your Web page to get the data from the
user.
At the end of this unit, you will be able to
Add a Form to your Web page.
Add a Text Field to a Form.
Add a Radio Button to a Form.
Add a Text Area to a Form.
Add a Check Box to a Form.
Add a Drop-Down List Box to a Form.
Add a Button to a Form.

Benchmark standard
Design Web pages with Forms to get the data from the user for
further processing.

Forms 2.11-1


Let us Revise!

1. Define Frame.
2. Name the different types of Framesets.
3. Write the code segment to create a Web page with horizontal frames..
4. State the use of <NOFRAMES> tag.
5. Write the code segment to create a Web page with Inline Frame.

Introduction
You would have filled up a Form in many places. For example, when joining
the school you would have given the particulars about yourself such as Name,
Age and Date of Birth in a Form. Similarly, the Form in HTML is an element
used to get the data from the user. The Form is like a container having
elements called controls. The controls used to get data from the user are Text
Field, Check box, Radio button, Text area and Drop-down List box.

2.11.1 Designing the Form
A Form should be carefully designed keeping in mind certain conditions like
the questions to be asked and the controls to be used to get the data from the
user.
Identifying the questions
Before adding a form, you should know the requirement such as the data to
be received, the control to be used to receive the data and placement of the
controls in the Form element. For example, the data to be received from a
student applying for admission in a college are Name, Date of Birth, Address,
Grade obtained in his schooling, etc.

Hands-On!

The following example illustrates the use of forms in a Webpage.
Open the HTML file Form.html in Internet Explorer.
The code in Form.html file is given below:
<HTML>
<HEAD>
<TITLE> Form </TITLE>
</HEAD>
<BODY Bgcolor="LightYellow">

Forms 2.11-2


<FORM> <FONT Size="4">
<H2 Align="Center"> ABC College of Engineering </H2>
<H2 Align="Center"> Application Form </H2>

1) Name
         &nb
sp;         
         &nb
sp;  :  
<INPUT Type="Text" Name="Name" Size="60"> <BR><BR>

Adds a Text Box
2) Date of Birth
         &nb
sp;         
  :  
<INPUT Type="Text" Name="DOB"> <BR><BR>
Adds a Text Box

3) Sex
         &nb
sp;         
         &nb
sp;      :  
<INPUT Type="Radio" Name="Gender">Male
      
<INPUT Type="Radio" Name="Gender">Female <BR><BR>

Adds a Radio Button
4) Nationality
         &nb
sp;         
      :  
<INPUT Type="Text" Name="Nation" Size="40"> <BR><BR>
Adds a Text Box

5) Parent/Guardian Name
       :  

Adds a Text Box
6) Address <BR>

Forms 2.11-3


         &nb
sp;         
         &nb
sp;         
         
<TextArea Rows="5" Cols="50"></TextArea><BR><BR>

7) Extra Curricular Activities Adds a Text Area

   :  
<INPUT Type ="Checkbox" Name="Extra"> Football
<INPUT Type ="Checkbox" Name="Extra"> Hockey
<INPUT Type ="Checkbox" Name="Extra"> Badminton
<INPUT Type ="Checkbox" Name="Extra"> Tennis
<INPUT Type ="Checkbox" Name="Extra"> Others <BR><BR>

Adds a Check Box
8) Grade obtained
         &nb
sp;        :&nbsp
; 
Mathematics
<INPUT Type="Text" Name="Grade1" Size="10">
   Physics
<INPUT Type="Text" Name="Grade2"
Size="10">   
Chemistry <INPUT Type="Text" Name="Grade3" Size="10">
    <BR><BR>

9) Course Applied for
         &nb
sp;  :  
<SELECT> Adds a Drop-Down List Box
<OPTION Value="Mech" Name="Mech">Bachelor of Mechanical
Engineering
<OPTION Value="Civil" Name="Civil">Bachelor of Civil
Engineering
<OPTION Value="Electrical" Name="Electrical">Bachelor of
Electrical Engineering

Forms 2.11-4


<OPTION Value="Electronics" Name="Electronics">Bachelor
of Electronics Engineering
</SELECT>
         &nb
sp;   
<BUTTON Type="Submit">Submit</BUTTON>
      
<BUTTON Type="Reset">Reset</BUTTON> Adds a Button

</FONT>
</FORM>
</BODY>
</HTML>
Code Sample 2.11.1

The Web page shown in Figure 2.11.1 is displayed in the browser window.

Text Box

Radio Button

Text Area

Check Box

Drop-Down List Box

Button

Figure 2.11.1: A Web Page Containing a Form

Forms 2.11-5


The Web page shown in Figure 2.11.1 contains an application form displayed
in it. When the Submit button is clicked after entering the values in the
controls, the entered data are passed to a program that takes care of further
processing. In this unit you will be learning to add Forms and controls to your
Web page.
A Form is added to a Web page using the <FORM> tag. The <FORM> tag has
two important attributes. They are Action and Method.
The URL of the program file that processes the data entered by the
user is assigned to the Action attribute.
The Method attribute can have either Get or Post as its value. Get is the
default value. If Method = “Get”, the names and values of the data
entered are send to the program along with the URL specified in the
Action attribute. If Method = “Post”, the names and values of the data
entered are send to the program as separate entity.

Self-Check Exercise 2.11.1

Say true or false:
1. <FORM> tag is used to add a form to a Web page.
2. Action is the only attribute used with <FORM> tag.
3. The two values of the Method attribute are Get and Post.

Activity 2.11.1

1. Draw a form to enter your personal details (Bio-Data).

2.11.2 Working with Form Elements
The different controls that can be added to a Form are Text Fields, Radio
buttons, Text area, Check box, Drop-down List box and Push buttons. Most of these
controls can be added to the form using the <INPUT> tag along with Type
attribute.
The Text Field
The Text Field is a control that is used to get a text from the user and to
display a text to the user. It can be added to a form using the <INPUT> tag
along with the Type attribute.
The following are the codes used to display the Text Fields shown in Figure
2.11.1.
<INPUT Type="Text" Name="DOB"> <BR><BR>
<INPUT Type="Text" Name="Nation" Size="40">
<INPUT Type="Text" Name="P_Name" Size="60">

Forms 2.11-6


The attribute Type = “Text” instructs the browser to display a Text Field. The
attribute Name = “Name” assigns a name to the Text Field for future use. The
attribute Size = “60” specifies the width of the Text Field. The attributes of the
<Input> tag related to the Text Field are given in Table 2.11.1.

Attribute Value Use
Type Text Displays a Text Field
Password Displays a Text Field that
is used to enter secret
information. The text in
this field appears as
asterisks (*).
Name Any Text The value given will be
assigned to the Name
attribute that can be used
for future reference.
Size Any Integer value Defines the width of the
Text Field.
Maxlength Any Integer value Defines the maximum
number of characters that
can be typed in a Text
Field.
Readonly --- Can read from the Text
Field but you cannot write
in the Text Field.
Value Any String value The value given in Value
attribute will be displayed
inside the Textbox by
default.
Disabled --- Makes the control visible
but cannot be used.
Table 2.11.1: Attributes of <INPUT> tag related to Text Field

The Radio Button
The Radio Button is a control that is used to display an option to the user. If the
option is applicable to the user, he can select the option by clicking it. Two or
more Radio Buttons can be grouped together. The user can select only one
option in that group. Radio Button can be added to a form using the <INPUT>
tag along with the Type attribute.

Forms 2.11-7


The following are the codes used to display the Radio Buttons shown in
Figure 2.11.1.
<INPUT Type="Radio" Name="Gender" Value=”M”>Male
<INPUT Type="Radio" Name="Gender" Value=”F”>Female
The attribute Type = “Radio” instructs the browser to display a Radio Button.
The attribute Name = “Gender” assigns a name to the Radio Button for future
use. The two Radio Buttons are grouped together by giving the same value
for the Name attribute. The value given in Value attribute will be send to the
URL specified in the Form’s Action attribute, if the button is selected. The
attributes of the <Input> tag related to the Radio Buttons are given in Table
2.11.2.

Attribute Value Use
Type Radio Displays a Radio Button.
Name Any String value The value given will be
Checked --- Indicates that the option
remains selected when
the form is opened.
but cannot be used.
Value Any String value The value given in Value
attribute will be send to
the URL specified in the
Form’s Action attribute, if
the button is selected.
Table 2.11.2: Attributes of <INPUT> tag related to Radio Buttons

The Text Area
The Text Area is a control that is used to get a text from the user and to display
a text to the user. The difference between a Text Field and a Text Area is that
a Text Field can accept or display only one line of text. But, a Text Area can
accept or display more than one line of text. It can be added to a form using
the <TEXTAREA> tag and Rows and Cols attributes.
The following is the code used to display the Text Area shown in Figure
2.11.1.
<TextArea Rows="5" Cols="50"></TextArea>
The attributes Rows = “5” and Cols=”50” instructs the browser to display a
Text Area of 5 rows and 50 columns. The attributes of the <TEXTAREA> tag
are given in Table 2.11.3.

Forms 2.11-8


Attribute Value Use
Rows Any Integer value Specifies the number of
rows visible in the Text
Area
Cols Any Integer value Specifies the number of
columns visible in the
Text Area
Readonly --- Can read from the Text
Area but you cannot write
in the Text Area.
but cannot be used to
modify the text.
Table 2.11.3: Attributes of <TEXTAREA> tag

Lab Exercise

Lab Exercise 1: Open D11_1.html in Internet Explorer. The following code will be present in
D11_1.html.

<HTML>
<HEAD>
<TITLE>
STUDENT INFORAMTIONS
</TITLE>
</HEAD>
<BODY>
<H1 Align =CENTER> STUDENT INFORMATIONS </H1>
<BR>
<FORM>
NAME:
<INPUT Type ="TEXT" NAME="TXT_NAME" Size=5
Maxlength=5 ><BR><BR>

PASSWORD:
<INPUT Type ="PASSWORD" Name = "TXT_NAME"
Size = 5 Maxlength=5><BR><BR>

ADDRESS: <TEXTAREA Name = "TXT_ADDRESS" Rows=4
Cols=30></TEXTAREA><BR><BR>

PHONE : <INPUT Type = "TEXT" Name="TXT_PHONE"

Forms 2.11-9


Size=8><BR><BR>
</FORM>
</BODY>
</HTML>

1. Name attributes which are used in input tag.
2. Identify the attribute which is used to specify the input type.
3. Identify the attribute which is used to set the length of the text box.
4. Observe the difference between size and maxlength.
5. Identify the tag which is allows to enter the multiline text entry.
6. Name the attribute which are used in textarea.

Lab Exercise 2: Open D11_1.html in Internet Explorer.
1. View the source code in the Notepad.
2. Increase the size of the Name textbox to 10.
3. Insert value into Name textbox and observe the difference.
4. Change the Password textbox type to password.
5. Increase the no of columns of the textarea to 40.
6. Decrease the no of row of the textarea to 3.


Name the tag and attribute to be used for the following:
1. To add a Text Field whose width is 9 characters and maximum number of characters that
can be entered is 25.
2. To add 2 Radio Buttons of same group displaying Yes and No. The values of the 2 Radio
Buttons should be “Y” and “N”.
3. To add a Text Area of 6 rows and 50 columns.

The Check Box
The Check Box is a control that is used to display an option to the user. If the
option is applicable to the user, he can select the option by clicking it. Two or
more Check Boxes can be grouped together. The user can select any number
of Check Boxes in that group. Check Box can be added to a form using the
<INPUT> tag along with the Type attribute.
The following are the codes used to display the Radio Buttons shown in
Figure 2.11.1.
<INPUT Type ="Checkbox" Name="Extra"> Football
<INPUT Type ="Checkbox" Name="Extra"> Hockey
<INPUT Type ="Checkbox" Name="Extra"> Badminton
<INPUT Type ="Checkbox" Name="Extra"> Tennis
<INPUT Type ="Checkbox" Name="Extra"> Others
The attribute Type = “Checkbox” instructs the browser to display a Check Box.
The attribute Name = “Extra” assigns a name to the Check Box for future use.

Forms 2.11-10


The five Check Boxes are grouped together by giving the same value for the
Name attribute. The attributes of the <Input> tag related to the Check Boxes
are given in Table 2.11.4.
Attribute Value Use
Type Checkbox Displays a Check Box.
for future reference..
Checked --- Indicates that the option
remains selected when
the form is opened.
but cannot be used.
Value Any Text The value given in Value
the button is selected.
Table 2.11.4: Attributes of <INPUT> tag related to Check Boxes

Note

The difference between a Radio Button and a Check Box is that only one option can be
selected in a group of Radio Buttons whereas more than one option can be selected in a group
of Check Boxes.

The Drop-Down List Box
The Drop-Down List Box is a control that is used to display a list of items in a
rectangular box from which the user can select an option. If the option is
applicable to the user, he can select the option by clicking it. Drop-Down List
Box can be added to a form using the <SELECT> tag along with <OPTION>
tag.
The following are the codes used to display the Drop-Down List Box shown in
Figure 2.11.1.
<SELECT>
<OPTION Value="Mech" Name="Mech">Bachelor of
Mechanical Engineering
<OPTION Value="Civil" Name="Civil">Bachelor of Civil
Engineering
<OPTION Value="Electrical" Name="Electrical">Bachelor
of Electrical Engineering

Forms 2.11-11


<OPTION Value="Electronics"
Name="Electronics">Bachelor of Electronics
Engineering
</SELECT>
The <SELECT> tag instructs the browser to display a Drop-Down List Box.
The <OPTION> tag is used to display the items inside the Drop-Down List
Box. In the above example, the four items are grouped together in a Drop-
Down List Box by giving the same value for the Name attribute of the
<OPTION> tag. The item to be displayed in the Drop-Down List Box is
assigned to the Value attribute of the <OPTION> tag. The attributes of the
<SELECT> tag are given in Table 2.11.5.
Attribute Value Use
Size Any Integer value Specifies the number of
items visible in the Drop-
Down List Box.
but cannot be used.
Multiple --- Specifies that more than
one item can be selected.
Table 2.11.5: Attributes of <SELECT> tag

The attributes of the <OPTION> tag are given in Table 2.11.6.
Attribute Value Use
Selected --- Specifies that this option
appears as the selected
option by default
Value Any Text The value given in Value
the option is selected.
Disabled --- Makes the option visible
but cannot be selected
Table 2.11.6: Attributes of <OPTION> tag

The Button
The Button is a control that is used to display a push button. The function of
the Push Button varies depending upon the type of the button. The button can

Forms 2.11-12


be of 3 types. They are Submit button, Reset button and a Push button. The
Submit button sends the values entered by the user to the URL specified in
the Form’s Action attribute. The Reset button sets the values of all the
controls to their initial values. For the normal buttons, commands should be
given for the action to be taken if it is clicked. Buttons can be added to a form
using the <BUTTON> tag along with the Type attribute.
The following are the codes used to display the buttons shown in Figure
2.11.1.
<BUTTON Type="Submit">Submit</BUTTON>
<BUTTON Type="Reset">Reset</BUTTON>
The attribute Type = “Submit” instructs the browser to send the values entered
by the user to the URL specified in the Form’s Action attribute. The attribute
Type = “Reset” instructs the browser to set the values of all the controls to
their initial values. The attributes of the <BUTTON> tag are given in Table
2.11.7.

Attribute Value Use
Type Submit Instructs the browser to
send the values entered
by the user to the URL
specified in the Form’s
Action attribute.
Reset Instructs the browser to
set the values of all the
controls to their initial
values.
Button Instructs the browser to
execute the commands
given for the action to be
taken if it is clicked.
Name Any Text The value given will be
but cannot be used.
Value Any Text Specifies the initial value
to the button.
Table 2.11.7: Attributes of <BUTTON> tag

Lab Exercise

Lab Exercise 3: Open D11_2.html in Internet Explorer. The following code will be present in
D11_2.html.

Forms 2.11-13


<HTML>
<HEAD>
<TITLE>
HOBBIES
</TITLE>
</HEAD>
<BODY>
<H3> CHOOSE YOUR HOBBIES </H3>
<FORM>
<INPUT Type ="CHECKBOX" Name = "CHK_HOBBY"
Value="SONGS" > Hearing Songs
Value="GAMES" >Playing Games
Value="BOOKS" > Reading Books
Value="TRAVELLING"> Travelling <BR> <BR> <BR>

<H3> CHOOSE YOUR PET </H3>
<INPUT Type="RADIO" Name="PET" Value ="DOG"
Checked> Dog

<INPUT Type="RADIO” Name="PET" Value ="CAT"
Checked> Cat

<INPUT Type="RADIO" Name="PET" Value ="DOVE"
Checked> Dove <BR><BR>

<H3> CHOOSE YOUR FAVOURATE GAME </H3>
<SELECT Name ="FOOD" Size=3>
<OPTION > FOOTBALL
<OPTION> HOCKEY
<OPTION> TABLE TENNIS
<OPTION> TENNIS
<OPTION> SWIMMING
</SELECT>
<BR><BR>

<INPUT Type="SUBMIT" Value ="SUBMIT">
<INPUT Type="RESET" Value ="RESET"><BR>
</FORM>
</BODY>
</HTML>
1. Locate the input type which is used to choose more than one option.
2. Name the input type which is used to choose single option.
3. Identify the tag which is used to display the drop-down menu options.
4. Name attributes which are used in <SELECT>.

Forms 2.11-14


Lab Exercise 4: Write a HTML code to display the output as given in the following Figure
2.11.2 using <FORM> tag.

Figure 2.11.2: Student Mark Sheet Form

Forms 2.11-15



Figure 2.11.3: Student Informations Form

Forms 2.11-16



Figure 2.11.4: Master Card Application From

Forms 2.11-17



Figure 2.11.5: Online Booking

Forms 2.11-18


2.11.6 using <FORM> and <TABLE> tag.

Figure 2.11.6: Employment Application Form

Forms 2.11-19


2.11.7 using <FORM> and <FRAME> tag.

Figure 2.11.7: School Application Form


Rewrite the following sentences correctly, if they are wrong:
1. The Checked attribute of the <INPUT> tag indicates that the checkbox option remains
selected when the form is opened.
2. The Multiple attribute of the <SELECT> tag specifies that more than one item can be
selected in a Drop-Down List Box.
3. Buttons can be added to a form using the <BUTTON> tag along with the Type attribute.

Activity 2.11.2

1. Create a Web page that displays a form to enter user’s personal details
(Bio-Data).
2. Save the HTML file as Activity1.html.

Forms 2.11-20


Activity 2.11.3

1. Create a Web page that explains the Form as shown in Figure 2.11.8.
2. Save the HTML file as Activity2.html.
3. The hyperlink Adding Controls at the bottom of the page should be linked to
Add_Controls.html.

Figure 2.11.8: A Web page Explaining the Form

Activity 2.11.4

1. Create a Web page that explains the controls as shown in Figure 2.11.3.
2. Save the HTML file as Add_Controls.html.
3. The content of the same page is continued in Figure 2.11.9.

Forms 2.11-21


Figure 2.11.9: A Web page Explaining the Controls

Figure 2.11.10: Continuation of Web page shown in Figure 2.11.9

Forms 2.11-22


Technical Terminologies
Form - A Form in HTML is an element used to get
the data from the user.
Text Field - The Text Field is a control that is used to get
a text from the user and to display a text to
the user.
Radio Button - The Radio Button is a control that is used to
display an option to the user.
Text Area - The Text Area is a control that is used to get a
text from the user and to display a text to the
user.
Check Box - The Check Box is a control that is used to
display an option to the user.
Drop-Down List Box - The Drop-Down List Box is a control that is
used to display a list of items in a rectangular
box from which the user can select an option.
Button - The Button is a control that is used to display
a push button.

Summary
In this unit, you learnt that
The Form is like a container containing elements called controls.
Text Field, Check box, Radio button, Text area and Drop-down List box
are some of the controls used to get data from the user.
The <FORM> tag has two important attributes namely, Action and
Method.
Text Field, Radio Button and Check Box can be added to a form
using the <INPUT> tag along with the Type attribute.
Text Area can be added to a form using the <TEXTAREA> tag
and Rows and Cols attributes.
Drop-Down List Box can be added to a form using the <SELECT>
tag along with <OPTION> tag.
Buttons can be added to a form using the <BUTTON> tag along
with the Type attribute.

Assignment

I. Answer the following questions:
1. Give any 3 general examples of forms.
2. Name any 5 controls that can be added to a Form.

Forms 2.11-23


3. Mention the use of Action and Method attributes of <FORM> tag.
4. Mention the use of any 3 common attributes of Radio Button and Check
Box controls.
5. Name the types of Buttons and mention their functions.

.

Forms 2.11-24


Criterion Referenced Test
Instruction: Students must evaluate themselves to attain the list of
competencies to be achieved.

Name:
Subject: Programming and Development Tools
Unit: Forms

Please tick [ √ ] the appropriate box when you have achieved the respective
competency.

Date Forms
C1 C2

Comment

Competency codes:

C1 = Draw a form with Text Field, Radio Button, Text Area, Check Box, Drop-
Down List Box and Button for a candidate to apply for a vacancy in a
company.
C2 = Create a Web page with Text Field, Radio Button, Text Area, Check
Box, Drop-Down List Box and Button for a candidate to apply for a
vacancy in a company.

Forms 2.11-25

Unit 2.11 - Forms

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (20)

Semelhante a Unit 2.11 - Forms

Semelhante a Unit 2.11 - Forms (20)

Mais de Intan Jameel

Mais de Intan Jameel (20)

Último

Último (20)

Unit 2.11 - Forms