M02 un11 p02

487 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
487
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

M02 un11 p02

  1. 1. Unit 11 – Forms Presentation 2 Web Programming
  2. 2. Objectives <ul><li>At the end of this presentation, you will be able to </li></ul><ul><li>Add a Check Box to a Form </li></ul><ul><li>Add a Drop-Down List Box to a Form </li></ul><ul><li>Add a Button to a Form </li></ul>
  3. 3. Check Box <ul><li>The Check Box is a control that is used to display an option to the user. </li></ul><ul><li><INPUT> tag is used to add Check Box. </li></ul><ul><li>The attributes of the <Input> tag related to the Check Boxes are given in Table. </li></ul>
  4. 4. Drop-Down List Box <ul><li>Used to display a list of items in a rectangular box from which the user can select an option. </li></ul><ul><li>Added to a form using the <SELECT> tag along with <OPTION> tag. </li></ul><ul><li>The attributes of the <SELECT> tag are given in Table. </li></ul>
  5. 5. Option Control <ul><li>The attributes of the <OPTION> tag are given in Table. </li></ul>
  6. 6. Button Control <ul><li>The Button is a control that is used to display a push button. </li></ul><ul><li>Buttons can be added to a form using the <BUTTON> tag. </li></ul>
  7. 7. Button Tag Attribute <ul><li>The attributes of the <BUTTON> tag are given in Table. </li></ul>
  8. 8. Lab Exercise <ul><li>3. Open D11_2.html in Internet Explorer. </li></ul><ul><ul><li>Locate the input type which is used to choose more than one option. </li></ul></ul><ul><ul><li>Name the input type which is used to choose single option. </li></ul></ul><ul><ul><li>Identify the tag which is used to display the drop-down menu options. </li></ul></ul><ul><ul><li>Name attributes which are used in <SELECT>. </li></ul></ul>
  9. 9. Lab Exercise 4. Write a HTML code to display the output as given in the following Figure using <FORM> tag.
  10. 10. Lab Exercise 5. Write a HTML code to display the output as given in the following Figure using <FORM> tag.
  11. 11. Lab Exercise 6. Write a HTML code to display the output as given in the following Figure using <FORM> tag.
  12. 12. Lab Exercise 7. Write a HTML code to display the output as given in the following Figure using <FORM> tag.
  13. 13. Lab Exercise 8. Write a HTML code to display the output as given in the following Figure <FORM> and <TABLE> tag.
  14. 14. Lab Exercise 9. Write a HTML code to display the output as given in the following Figure using <FORM> and <FRAME> tag.
  15. 15. Activity 2.11.2 <ul><li>Create a Web page that displays a form to enter user’s personal details (Bio-Data). </li></ul><ul><li>Save the HTML file as Activity1.html in C:HTMLUnit11Activity folder. </li></ul>
  16. 16. Activity 2.11.3 <ul><li>Create a Web page that explains the Form as shown in Figure. </li></ul><ul><li>2. Save the HTML file as Activity2.html in C:HTMLUnit11Activity folder. </li></ul><ul><li>3. The hyperlink Adding Controls at the bottom of the page should be linked to Add_Controls.html . </li></ul>
  17. 17. Activity 2.11.3 Contd.
  18. 18. Activity 2.11.4 <ul><li>Create a Web page that explains the controls as shown in Figure. </li></ul><ul><li>Save the HTML file as Add_Controls.html in C:HTMLUnit11Activity folder. </li></ul><ul><li>The content of the same page is continued in Figure. </li></ul>
  19. 19. Activity 2.11.4 Contd.
  20. 20. Summary <ul><li>In this presentation, you learnt the following: </li></ul><ul><li>Drop-Down List Box can be added to a form using the <SELECT> tag along with <OPTION> tag. </li></ul><ul><li>Buttons can be added to a form using the <BUTTON> tag along with the Type attribute. </li></ul>
  21. 21. Assignment <ul><li>Name any 5 controls that can be added to a Form. </li></ul>

×