1. 76 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Frames When displaying information in a browser, it is sometimes useful to divide the display into a number of distinct areas called frames and display different HTML pages in each frame.

2. 77 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan

3. 78 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan To use frames, we need a frame page that specifies the layout of the frames. +This page uses the tag to specify a set of related frames. +Each frame in this set is introduced by a tag. For a set of frames, we need to specify: +Whether the frames form rows or columns. +What percentage of the available space is to be occupied by each frame. For an individual frame, we need to specify: +The HTML page that will be displayed in that page. +This is known as the source for the frame. +The name of the frame.

4. 79 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan twenty.html Frames in a row

5. 80 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan twentyone.html Frames in a column

6. 81 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Other Attributes There are a number of other useful attributes that can be used with. +Normally, a user can resize frames once they have been created. For example, the frames on the previous two examples can be resized by "dragging" the bar separating the frames. +The NORESIZE attribute can be used to prevent the user resizing a frame. +If the content of the page displayed in a frame is too large for the frame, a browser will add scroll bars. +To prevent the browser adding scroll bars we can use the SCROLLING attribute. We can specify scrolling as YES, NO or AUTO.

7. 82 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Nested Frame Sets It is possible to nest one frame set within another. +This allows us to divide the display into arbitrarily complex sets of frames. Untitled Document Viewing this page requires a browser capable of displaying frames.

8. 83 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Navigating Between Frames Normally when we follow a hypertext link, the new page overwrites the page containing the link. +If the original page is displayed in a frame, then the contents of the frame are overwritten. +However, within an tag we can specify the frame into which a page should be loaded. twentytwo.html Frames in a column eight_a.html Contents Networks & Internets Example pages: One Two Three Four Five Six Seven

9. 84 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan twentyone.html Frames in a column

10. 85 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Exercise IV Update your home page to use frames.

11. 86 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Forms It is sometimes useful to have HTML pages that allow a user to enter data. +For example, a page used to register a student for the practical work allows a user to enter data. This is achieved by using a form. +A form consists of a collection of controls. Text windows. Drop down selection lists. Radio buttons. Check boxes. Buttons. +The exact nature of these controls depends on the platform. i.e., whether the computer is a Java Workstation, MS Windows, Unix, Macintosh,...

12. 87 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan

13. 88 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan A form is specified by using the tags and. +Between these tags we use other tags to insert the specific controls and other information (e.g., static text) making up the form. +Note that we can have more than one form on a page. twentythree.html A simple form This page contains an example form. The form is finished.

14. 89 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Text Areas A text area is a control that allows multiple lines of text to be entered. +If the text is too large to display, then scroll bars are used. +We use the tags and to introduce a text area. +The text between these two tags is used as the default text for the text area. +Note that most control must be given a name. We will see the purpose of the name later. twentythree.html Type some text: Default text. OK.

15. 90 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Single Line Text A control that can be used to input a single line of text can be specified using the tag. +As we will see, this tag can be used to specify other controls. +Therefore, the tag has an attribute TYPE which indicates the type of control required. +In addition, we can use attributes to give the control a name, a default value and a size. +The type text is used for ordinary text and the type password for a text which is always echoed as '*'. twentythree.html Text: Password:

16. 91 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Selections A selection control allows a user to select one or more options from a drop down menu. +We use the tags and to specify a selection. Like all controls, we must give a selection a name. In addition, we can use the attribute MULTIPLE to allow the user to select more than one option. +Between these tags, we use the tag to introduce each option. For each option we use the attribute VALUE to give the value of the option. Later we will see how this value is used. We give the text to be displayed after the tag. We can use the SELECTED attribute to indicate that by default, an option is selected. twentythree.html Select an item: One Two Three Four Five Six

17. 92 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Checkboxes A checkbox is a small box that can either be ticked or not ticked. +A checkbox is specified using the tag. +We use attributes to give a checkbox a name and to indicate if it is ticked by default. twentythree.html Checkboxes:

18. 93 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Radio Buttons A group of radio buttons is specified by using a separate tag for each button. +To indicate that the buttons belong to the same group, they are all given the same name. +For each button we use the attribute VALUE to give the value of the button. Later we will see how this value is used. +We give the text to be displayed beside the button after the tag. +We can also use the attribute CHECKED to specify which of the buttons is checked. twentythree.html Radio buttons: A B C D

19. 94 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Buttons We have two types of regular buttons - submit and reset buttons. +These buttons can be specified by using the tag. +By default, these buttons are displayed with the text " Submit Query " and " Reset ". +We can use the attribute VALUE to change the value displayed. +We do not need to give buttons names. twentythree.html Buttons:

20. 95 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Hidden Input It is sometime useful to have controls that are hidden. +i.e., controls that have a name and a fixed value that cannot be changed by the user. +In fact, such controls are hidden and do not appear on the display. +These controls can be specified by using the tag. +E.g. a posting ID

21. 96 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Actions Q: A form allows us to fill out text fields, check buttons etc., but what can we do with the data that a user enters? A: We can submit it to a server. +i.e., we send the data entered into the form to a server, this interprets the data and sends back results. +This is achieved by pressing any submit button. +If we press any reset button, then the controls on the form are reset to their default values. For this process to work, we must specify: + The address of a server. For this we use a Uniform Resource Locator (URL). We will discuss the structure of URLs later in the course. + How the data should be sent to the server. There are two methods - POST and GET. –With GET, the data is appended to the end of the URL and sent to the server. –With POST, the data is sent separately from the URL. In both cases, the browser sends pairs consisting of the name of the control and its current value.

22. 97 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan The tag has two attributes: + METHOD which allows us to specify GET or POST. + ACTION which allows us to specify the URL. twentyfour.html A simple form This page conatins an example form. The form is finished. This server will send an e-mail to this address with this subject heading containing a list of the information on the form.

23. 98 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan

24. 99 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan The POST Method If the POST method is used, then the user data is entered in the body of the form and sent with the URL to the server. POST EXAMPLE – GOOD SITE ABOUT FORMSPOST http://computing.dcu.ie/cgi-bin/away/form2mail... [More headers here] area=+Default+text.++OK.+&item=3& details=%26%26%26%26%26%26%26%26%26& password=Dog&checked2=on&choice=2& secret=Hidden+value Note that line breaks have been introduced to fit this single line of text onto the slide.

25. 100 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan The GET Method If the GET method is used, then the user data are appended to the URL and sent to the server. +The resulting URL must be unambiguous. Therefore, the following conventions are used: The user data is separated from the original URL by a ' ? '. The data for each control is added as a pair name = value. Each pair is separated by a ' & '. Spaces are represented by ' + '. Special characters (' ? ', ' & ', ' + ', ' = ', etc.) are represented as numbers such as %26. http://compapp.dcu.ie/cgi-bin/away/form2mail? area=+Default+text.++OK.+&item=3& details=%26%26%26%26%26%26%26%26%26& password=Dog&checked2=on&choice=2& secret=Hidden+value

26. 101 © 1998, 1999, 2000 David T. Gray, Howard Duncan, Jane Kernan Exercise V Construct some simple forms ALSO LOOK AT EXAMPLES OF FORMSEXAMPLES