m02 un11 p02
DESCRIPTION
TRANSCRIPT
![Page 1: M02 un11 p02](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/1.jpg)
Unit 11 – Forms
Presentation 2
Web Programming
![Page 2: M02 un11 p02](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/5.jpg)
Option Control
• The attributes of the <OPTION> tag are given in Table.
![Page 6: M02 un11 p02](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/7.jpg)
Button Tag Attribute
• The attributes of the <BUTTON> tag are given in Table.
![Page 8: M02 un11 p02](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/16.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/17.jpg)
Activity 2.11.3 Contd.
![Page 18: M02 un11 p02](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/18.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/19.jpg)
Activity 2.11.4 Contd.
![Page 20: M02 un11 p02](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/20.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022061122/5471f67fb4af9fa30a8b4d8d/html5/thumbnails/21.jpg)
Assignment
1. Name any 5 controls that can be added to a Form.