Unit 2.11 - Forms

25
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

description

 

Transcript of Unit 2.11 - Forms

Page 1: Unit 2.11 - Forms

Programming and Development Tools Web Programming

UNIT

2.11 Web Programming Forms

OBJECTIVES

B

F

This unit helps you to add Forms to your Web page to get the data from theuser.

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.

enchmark standard Design Web pages with Forms to get the data from the user for

further processing.

orms 2.11-1

Page 2: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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

Page 3: Unit 2.11 - Forms

Programming and Development Tools Web Programming

<FORM> <FONT Size="4">

<H2 Align="Center"> ABC College of Engineering </H2>

<H2 Align="Center"> Application Form </H2>

1) Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;

<INPUT Type="Text" Name="Name" Size="60"> <BR><BR>

2) Date of Birth &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;

Adds a Text Box

<INPUT Type="Text" Name="DOB"> <BR><BR>

Adds a Text Box

3) Sex

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;

<INPUT Type="Radio" Name="Gender">Male &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<INPUT Type="Radio" Name="Gender">Female <BR><BR>

4) Nationality Adds a Radio Button

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;

<INPUT Type="Text" Name="Nation" Size="40"> <BR><BR>

5) Parent/Guardian Name

Adds a Text Box

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;

<INPUT Type="Text" Name="Name" Size="60"> <BR><BR>

6) Address <BR> Adds a Text Box

Forms 2.11-3

Page 4: Unit 2.11 - Forms

Programming and Development Tools Web Programming

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<TextArea Rows="5" Cols="50"></TextArea><BR><BR>

7) Extra Curricular Activities Adds a Text Area

&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;

<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>

8) Grade obtained Adds a Check Box

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;

Mathematics

<INPUT Type="Text" Name="Grade1" Size="10"> &nbsp;&nbsp;&nbsp;Physics

<INPUT Type="Text" Name="Grade2" Size="10">&nbsp;&nbsp;&nbsp;

Chemistry <INPUT Type="Text" Name="Grade3" Size="10">

&nbsp;&nbsp;&nbsp; <BR><BR>

9) Course Applied for

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;

<SELECT>

<OPTION Value="Mech" Name="Mech">Bachelor of Mechanical Engineering

Adds a Drop-Down List Box

<OPTION Value="Civil" Name="Civil">Bachelor of Civil Engineering

<OPTION Value="Electrical" Name="Electrical">Bachelor of Electrical Engineering

Forms 2.11-4

Page 5: Unit 2.11 - Forms

Programming and Development Tools Web Programming

<OPTION Value="Electronics" Name="Electronics">Bachelor of Electronics Engineering

</SELECT>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<BUTTON Type="Submit">Submit</BUTTON> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<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.

Radio Button

Text Box

Text Area

Check Box

Button

Drop-Down List Box

Figure 2.11.1: A Web Page Containing a Form

Forms 2.11-5

Page 6: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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="Name" Size="60"> <BR><BR> <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

Page 7: Unit 2.11 - Forms

Programming and Development Tools Web Programming

<INPUT Type="Text" Name="Grade1" Size="10"> <INPUT Type="Text" Name="Grade2" Size="10"> <INPUT Type="Text" Name="Grade3" Size="10"> 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 Text Displays a Text Field Type 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

Page 8: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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

assigned to the Name attribute that can be used for future reference.

Checked --- Indicates that the option remains selected when the form is opened.

Disabled --- Makes the control visible 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

Page 9: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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

Name Any String value The value given will be assigned to the Name attribute that can be used for future reference.

Readonly --- Can read from the Text Area but you cannot write in the Text Area.

Disabled --- Makes the control visible 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

Page 10: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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.

Self-Check Exercise 2.11.2

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

Page 11: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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. Name Any String value The value given will be

assigned to the Name attribute that can be used for future reference..

Checked --- Indicates that the option remains selected when the form is opened.

Disabled --- Makes the control visible but cannot be used.

Value Any Text 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.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

Page 12: Unit 2.11 - Forms

Programming and Development Tools Web Programming

<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 Name Any String value The value given will be

assigned to the Name attribute that can be used for future reference.

Size Any Integer value Specifies the number of items visible in the Drop-Down List Box.

Disabled --- Makes the control visible 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 attribute will be send to the URL specified in the Form’s Action attribute, if 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

Page 13: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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 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.

Type

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 assigned to the Name attribute that can be used for future reference.

Disabled --- Makes the control visible 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

Page 14: Unit 2.11 - Forms

Programming and Development Tools Web Programming

<HTML> <HEAD> <TITLE> HOBBIES </TITLE> </HEAD> <BODY> <H3> CHOOSE YOUR HOBBIES </H3> <FORM> <INPUT Type ="CHECKBOX" Name = "CHK_HOBBY" Value="SONGS" > Hearing Songs <INPUT Type ="CHECKBOX" Name = "CHK_HOBBY" Value="GAMES" >Playing Games <INPUT Type ="CHECKBOX" Name = "CHK_HOBBY" Value="BOOKS" > Reading Books <INPUT Type ="CHECKBOX" Name = "CHK_HOBBY" 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

Page 15: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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

Page 16: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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

Figure 2.11.3: Student Informations Form

Forms 2.11-16

Page 17: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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

Figure 2.11.4: Master Card Application From

Forms 2.11-17

Page 18: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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

Figure 2.11.5: Online Booking

Forms 2.11-18

Page 19: Unit 2.11 - Forms

Programming and Development Tools Web Programming

Lab Exercise 8: Write a HTML code to display the output as given in the following Figure 2.11.6 using <FORM> and <TABLE> tag.

Figure 2.11.6: Employment Application Form

Forms 2.11-19

Page 20: Unit 2.11 - Forms

Programming and Development Tools Web Programming

Lab Exercise 9: Write a HTML code to display the output as given in the following Figure 2.11.7 using <FORM> and <FRAME> tag.

Figure 2.11.7: School Application Form

Self-Check Exercise 2.11.3

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

Page 21: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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

Page 22: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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

Page 23: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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

Page 24: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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

Page 25: Unit 2.11 - Forms

Programming and Development Tools Web Programming

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