Web Programming– UFCFB3-30-1 Lecture 10 Instructor : Mazhar H Malik Email : mazhar@gcet.edu.om Global College of Engineering and Technology

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

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

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

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

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

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

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

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

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

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

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

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

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

9/11/2018 Lecture 10

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

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

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

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

9/11/2018 Lecture 10

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

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

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

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

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

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

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

9/11/2018 Lecture 10

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

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

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