Top Banner
Unit 11 – Forms Presentation 2 Web Programming
21

M02 un11 p02

Nov 22, 2014

Download

Technology

Intan Jameel

 
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: M02 un11 p02

Unit 11 – Forms

Presentation 2

Web Programming

Page 2: M02 un11 p02

Objectives

At the end of this presentation, you will be able to• Add a Check Box to a Form• Add a Drop-Down List Box to a Form• Add a Button to a Form

Page 3: M02 un11 p02

Check Box• The Check Box is a control that is used to

display an option to the user.• <INPUT> tag is used to add Check Box.• The attributes of the <Input> tag related to the

Check Boxes are given in Table.

Page 4: M02 un11 p02

Drop-Down List Box• Used to display a list of items in a rectangular

box from which the user can select an option.• Added to a form using the <SELECT> tag

along with <OPTION> tag. • The attributes of the <SELECT> tag are given

in Table.

Page 5: M02 un11 p02

Option Control

• The attributes of the <OPTION> tag are given in Table.

Page 6: M02 un11 p02

Button Control

• The Button is a control that is used to display a push button.

• Buttons can be added to a form using the <BUTTON> tag.

Page 7: M02 un11 p02

Button Tag Attribute

• The attributes of the <BUTTON> tag are given in Table.

Page 8: M02 un11 p02

Lab Exercise

3. Open D11_2.html in Internet Explorer. a. Locate the input type which is used to choose

more than one option.b. Name the input type which is used to choose

single option.c. Identify the tag which is used to display the

drop-down menu options.d. Name attributes which are used in

<SELECT>.

Page 9: M02 un11 p02

Lab Exercise

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

Page 10: M02 un11 p02

Lab Exercise

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

Page 11: M02 un11 p02

Lab Exercise

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

Page 12: M02 un11 p02

Lab Exercise

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

Page 13: M02 un11 p02

Lab Exercise

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

Page 14: M02 un11 p02

Lab Exercise

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

Page 15: M02 un11 p02

Activity 2.11.2

• Create a Web page that displays a form to enter user’s personal details (Bio-Data).

• Save the HTML file as Activity1.html in C:\HTML\Unit11\Activity folder.

Page 16: M02 un11 p02

Activity 2.11.3

• Create a Web page that explains the Form as shown in Figure.

• 2. Save the HTML file as Activity2.html in C:\HTML\Unit11\Activity folder.

• 3. The hyperlink Adding Controls at the bottom of the page should be linked to Add_Controls.html.

Page 17: M02 un11 p02

Activity 2.11.3 Contd.

Page 18: M02 un11 p02

Activity 2.11.4

• Create a Web page that explains the controls as shown in Figure.

• Save the HTML file as Add_Controls.html in C:\HTML\Unit11\Activity folder.

• The content of the same page is continued in Figure.

Page 19: M02 un11 p02

Activity 2.11.4 Contd.

Page 20: M02 un11 p02

Summary

In this presentation, you learnt the following:• 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.

Page 21: M02 un11 p02

Assignment

1. Name any 5 controls that can be added to a Form.