Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Working with Forms and Frames04          Session 4
Module Introduction   Frames   Forms and Controls
FRAMES   Explain the FRAMESET element   Explain the IFRAME element   Explain the NOFRAME element
FRAMES   Frames refer to a technique of dividing the    browser windows into multiple sub-windows.   Each sub-window is ...
FRAMESET Elements   A frameset specifies a general layout of a    web page that consists of frames.   It defines how the...
FRAMESET Element<html><head>  <title>Welcome</title></head>  <frameset cols="50%,50%"  rows=“*”>      <frame src="First.ht...
FRAMESET Element   Attribute of Frameset        Attribute               Description    frameborder       Specifies where ...
FRAME   Attribute of Frame       Attribute                        Description    frameborder    Specifies whether the cur...
FRAME<html><head>    <title>Welcome</title></head><frameset rows="100,*"> <frame src="Banner.html" frameborder="1" noresiz...
IFRAME Element   Inline frames allow you to embedded an    HTML page within a main HTML page such    that the inserted pa...
IFRAME Element<html><head>   <title>Untitled Document</title></head><body>   <p>This page support iframe.</p>   <iframe sr...
NORAME Element   One of the limitations of using    frames is that the frames are not    supported by all browser.   The...
FORMS AND CONTROLS   Explain HTML forms   Describe the basic elements   Explain the INPUT element   Explain the LABEL ...
Forms   An HTML form is a container that consists of    various controls such as checkboxes, radio    buttons, menus, … ...
Forms
Forms   Attribute of Form      Attribute                      Description    action        Specifies the URL where the fo...
Basic Controls   Label   Text Box   Button   Check Box   Radio Button
INPUT Element   A control allows you to    accept different type of    input from the user.   The different values that ...
LABEL Element   A LABEL element creates a    label control on a form.   You use the FOR attribute    associates a label ...
BUTTON Element   A BUTTON element creates a    button on a form.   The buttons created using the    BUTTON element are s...
MENU Element   Menus are control that allow    the user to select an option    from a given set of options.   To create ...
Registration form<html>                                                     <tr><body>                                    ...
Summary   A form is selection of an HTML document that    contains special elements called as controls.   Control are us...
Summary…   Frames divide a Web broswer’s window into    separate regions, each of which can display    separate scrollabl...
Upcoming SlideShare
Loading in …5
×

04. session 04 working withformsandframes

842 views

Published on

  • Be the first to comment

  • Be the first to like this

04. session 04 working withformsandframes

  1. 1. Working with Forms and Frames04 Session 4
  2. 2. Module Introduction Frames Forms and Controls
  3. 3. FRAMES Explain the FRAMESET element Explain the IFRAME element Explain the NOFRAME element
  4. 4. FRAMES Frames refer to a technique of dividing the browser windows into multiple sub-windows. Each sub-window is called as a frame. Each frame contains a separate html page and is independent of other frames in the browser.
  5. 5. FRAMESET Elements A frameset specifies a general layout of a web page that consists of frames. It defines how the browser should be divided into frames. To specify this division, the FRAMESET elements provides the ROWS and COLS attributes.
  6. 6. FRAMESET Element<html><head> <title>Welcome</title></head> <frameset cols="50%,50%" rows=“*”> <frame src="First.html"> <frame src="Second.html"> </frameset></html>
  7. 7. FRAMESET Element Attribute of Frameset Attribute Description frameborder Specifies where frames within a frameset consist of borders. framespacing Specifies the space between individual frames with a framset.
  8. 8. FRAME Attribute of Frame Attribute Description frameborder Specifies whether the current frame consist of borders. marginheight Specifies the top and bottom margins of the current frame. marginwidth Specifies the left and right margins of the current frame. name Specifies the name of the current frame. The browser use the name to refer to the frame. noresize Informs that a user cannot resize a current frame scrolling Specifies scrollbar for the current frame
  9. 9. FRAME<html><head> <title>Welcome</title></head><frameset rows="100,*"> <frame src="Banner.html" frameborder="1" noresize> <frameset cols="25%,*" frameborder="NO" noresize> <frame src="Links.html" name="leftFrame" scrolling="NO" noresize> <frame src="Main.html" name="contents" frameborder="0"> </frameset></frameset> <noframes></noframes></html>
  10. 10. IFRAME Element Inline frames allow you to embedded an HTML page within a main HTML page such that the inserted page is displayed as a part of document’s flow. Inline frames are also called as “floating frames”.
  11. 11. IFRAME Element<html><head> <title>Untitled Document</title></head><body> <p>This page support iframe.</p> <iframe src="AboubtUs.html" width="250" height="100" scrolling="yes" frameborder="1"/> <p>This browser does not support IFRAME element.</p></body></html>
  12. 12. NORAME Element One of the limitations of using frames is that the frames are not supported by all browser. The “NOFRAME” element specifies the text to be displayed in the browser if the browser does not support frame <noframes> <body> <p>This browser does not support frames.</p> </body> </noframes>
  13. 13. FORMS AND CONTROLS Explain HTML forms Describe the basic elements Explain the INPUT element Explain the LABEL element Explain the BUTTON element Explain the SELECT and OPTION elements
  14. 14. Forms An HTML form is a container that consists of various controls such as checkboxes, radio buttons, menus, … For example, consider a Login form that allows you to specify the login name and password.
  15. 15. Forms
  16. 16. Forms Attribute of Form Attribute Description action Specifies the URL where the form data will be submitted and processed. method Indicates an HTTP method that specifies how the data of the form is send to server. This attribute has two values namely: GET and POST.
  17. 17. Basic Controls Label Text Box Button Check Box Radio Button
  18. 18. INPUT Element A control allows you to accept different type of input from the user. The different values that the type attribute can take care:  Text for Text Box  Password for Password  Submit for the Submit button  Reset for the Reset button  Radio for Radio Button  Checkbox for Check Boxes
  19. 19. LABEL Element A LABEL element creates a label control on a form. You use the FOR attribute associates a label with another control. The value of the FOR attribute must be the same as the value of the ID attribute of the associated control element.
  20. 20. BUTTON Element A BUTTON element creates a button on a form. The buttons created using the BUTTON element are similar to buttons created with INPUT element, however it’s offer richer functionalities.
  21. 21. MENU Element Menus are control that allow the user to select an option from a given set of options. To create menu, you use SELECT element. The select element must have at least one OPTION element. Menu that allows the user to select a single option or multiple options.
  22. 22. Registration form<html> <tr><body> <td>Address:</td><form id="frmReg" name="frmReg" method="post" action=""> <td> <h2>Account Registration Form</h2> <textarea name="textarea" cols="19"></textarea> <table width="300"> </td> <tr> </tr> <td width="120">Name:</td> <tr> <td width="180"> <td></td> <input name="textfield" type="text" size="25" /> <td> </td> <input type="submit" name="Submit" value="Submit" /> </tr> <input type="reset" name="Submit2" value="Reset" /> <tr> </td> <td>Marital Status: </td> </tr> <td> </table> <select name="select"> </form> <option>Single</option> </body> <option>Married</option> </html> <option>Married But Available</option> </select> </td> </tr>
  23. 23. Summary A form is selection of an HTML document that contains special elements called as controls. Control are used to accept input from user and provide some interaction The <FORM> element is used to create the region on the page that will be treated as a form. The <INPUT> element defines the type and appearance of the control to be displayed on the form Building Dynamic Websites/Session 1/ 23 of 16
  24. 24. Summary… Frames divide a Web broswer’s window into separate regions, each of which can display separate scrollable page. An HTML document with frames has a HEAD and a FRAMESET section. Cannot use BODY and FRAMSET set elements together The NOFRAMES element is used to specify alternate content to be used if the browser does not support The IFRAME element is used to define inline frame Building Dynamic Websites/Session 1/ 24 of 16

×