1. Web Programming– UFCFB3-30-1 Lecture 10
Instructor : Mazhar H Malik
Global College of Engineering and Technology

2. Lecture 10
Frames and Forms
LO 2,5,6
9/11/2018
Lecture 10

3. Objectives Understand Frames. Frames syntax. Frames good and bad.
Understand how forms work
Understand form syntax
Create input objects
Build forms within tables
9/11/2018
Lecture 10

4. Frames HTML can divide web page into areas called frames.
Each frame is loaded as a separate file, increasing processing overhead and slowing down loading.
9/11/2018
Lecture 10

5. Frames Problem: Solution: Frame
You want the same navigation on every page.
Solution:
Create two areas, one navigation the other content
Frame
Layout – Rows and Columns
9/11/2018
Lecture 10

6. Frame layout Columns and Rows
<FRAMESET cols="33%,67%" rows="*,200">
<FRAME src="contents_of_frame1.html">
<FRAME src="contents_of_frame2.gif">
<FRAME src="contents_of_frame3.html">
<FRAME src="contents_of_frame4.html">
</FRAMESET>
9/11/2018
Lecture 10

7. Basic setup
A framed window is set up using an HTML file which contains <frameset> … </frameset> in place of its body.
Within the (possibly nested) frameset, individual <frame> tags specify the URL of each frame.
A <noframes> container gives alternative unframed content.
9/11/2018
Lecture 10

8. Nesting frames
A basic frameset only allows you to specify a certain number of rows and/or columns.
This gives, at best, a grid (though the relative sizes of the elements can be set).
In order to get more complex frame arrangements, nested framesets have to be used.
9/11/2018
Lecture 10

9. Frame attributes
The basic visual attributes of a frame which can be controlled are:
Borders: the default gives a 3D border. This can be set at either the frameset, or frame level. Officially the latter is preferred, but causes consistency issues.
Scrollbars: by default frames are scrollable. If the amount of text which will be placed in a frame is fixed (and small enough), you may wish to disable scrollbars for that frame.
Resizing: by default the user can resize any or all of the frames displayed in their browser. If using frames for visual formatting you may want to override this!
9/11/2018
Lecture 10

10. Targeting frames
Each frame can be given a name which identifies it within its frameset.
Links in other frames of the frameset can then be given a target attribute. This specifies (by name) the frame in which the link should be opened.
Special target names:
_blank: Open in a new window
_parent: Links one level up the frameset hierarchy. Unfortunately this requires the framesets to be nested in separate documents.
_top: bust out of the frameset entirely.
9/11/2018
Lecture 10

11. The good
Frames are the ideal mechanism when scrolling is needed for content, but navigation shouldn’t change.
They also allow separation of conceptually different parts of the document.
Particularly combined with CSS this can produce very clean and tight html files.
9/11/2018
Lecture 10

12. The bad Frames mess up navigation. Back buttons may not work properly.
You may get trapped in the framed site.
Search engines can’t/don’t index framed documents properly (they find the frame but not the frameset).
Each frame is loaded as a separate file, increasing processing overhead and slowing down loading.
9/11/2018
Lecture 10

13. Conclusions Use frames sparingly.
Frames are ideal for reference pages, where you expect the user to make repeated access to parts of a document (e.g. the JAVA API)‏
Common recommendation is to use frames for internal sites (intranet) only.
9/11/2018
Lecture 10

14. Understanding How Forms Work
Forms let you build interactive Web pages that collect information from a user and process it on the Web server
The HTML form is the interface for the user to enter data
The data is processed by applications that reside on the Web server
9/11/2018
Lecture 10

15. 9/11/2018
Lecture 10

16. Using CGI Scripts
The Common Gateway Interface (CGI) is the communications “bridge” between the Internet and the server
Using programs called scripts, CGI can collect data sent by a user via the Hypertext Transfer Protocol (HTTP) and transfer it to a variety of data processing programs including spreadsheets, databases, or other software running on the server
9/11/2018
Lecture 10

17. Using the <form> element
The <form> element is the container for creating a form.
A variety of attributes describe how the form data will be handled.
9/11/2018

18. Using the <form> element
The following code shows a typical <form> element:
<form action= cgi_bin/script.cgi method=”post”>
9/11/2018
Lecture 10

19. Creating Input Objects
The <input> element defines many of the form input object types
The type attribute specifies the type of input object
9/11/2018
Lecture 10

20. 9/11/2018
Lecture 10

21. Creating Text Boxes
The text box is the most commonly used form element.
<input type="text" name="firstname" size="20" maxlength="35" value="First Name">
9/11/2018
Lecture 10

22. Creating Check Boxes
Check boxes are an on/off toggle that the user can select.
<input type="checkbox" name="species" value="smbass"> Smallmouth Bass
9/11/2018
Lecture 10

23. Creating Radio Buttons
Radio buttons are like checkboxes, but only one selection is allowed.
<input type="radio" name="list" value="yes" checked> Yes
9/11/2018
Lecture 10

24. Creating Submit & Reset Buttons
The submit and reset buttons let the user choose whether to send the form data or start over.
<input type="submit" value="Submit your answers">
<input type="reset" value="Clear the form">
9/11/2018
Lecture 10

25. Creating an Image for the Submit Button
You can choose an image file and use it instead of the default submit button.
<input type="image" src="submit.gif" alt="submit button">
9/11/2018
Lecture 10

26. Creating a Password Entry Field
The password input box works like the text input, but the entered text is hidden by asterisks.
password: <input type="password" size="30">
9/11/2018
Lecture 10

27. Using the <select> Element
The <select> element lets you create a list box or scrollable list of selectable options.
<select name="boats">
<option>Canoe</option>
<option>Jon Boat</option>
<option>Kayak</option>
<option>Bass Boat</option>
<option>Family Boat</option>
</select>
9/11/2018
Lecture 10

28. 9/11/2018
Lecture 10

29. Using the <textarea> Element
The <textarea> element lets you create a larger text area for user input.
<p><b>Briefly tell us your favorite fish story:</b><br>
<textarea name="fishstory" rows="5" cols="30">
Enter your story here...
</textarea>
</p>
9/11/2018
Lecture 10

30. Building Forms within Tables
Placing forms within a table can enhance the layout and legibility of the form.
9/11/2018
Lecture 10

31. Summary
You will need to work with some type of server-based software program to process the data from your form, this topic is not included in this course.
You have a variety of form elements to choose from when building a form.
Use the correct type of form element for the type of data you are gathering. For example, use checkboxes for multiple-choice questions. For a long list of choices, use a select list.
9/11/2018
Lecture 10