1. ITCS373: Internet Technology Lecture 5: More HTML

2. HTML Forms Forms provide the means for gathering information from users who visit a Web page. Applications include user feedback, queries, E- commerce. Simple feedback and queries normally require the form data to be emailed to a specific email address. Information may be extracted from this email automatically. E-commerce involves "Submitting" the form to activate a server-side program that processes the form ’ s data. Most server programs involve databases.

3. HTML Forms - 2 As usual, a new range of HTML tags is required to control the forms. The tag defines a new HTML form. It must contain a closing tag. No nesting of forms allowed. The main attributes are : action= and method=. action= specifies how the form data should be processed (i.e. which program will be activated when the form is submitted) The action= attribute specifies an absolute or relative URL. The URL is usually a program, running on the Web server machine. The URL may alter natively be a ‘‘ mailto ’’ address; this must always be used with the POST method (see below). Action=mailto: ITCS373@yahoo.com" Method="POST" method= specifies how the form data is to be sent to the script defined by the action attribute.

4. Sending Form Data There are two possible values of the method= attribute: GET Data is sent to the program as part of the URL. Use it only if a small volume of data is to be transmitted and there is no sensitive information (i.e. a password) embedded. <form action="http://www.amazon.com/order.cgi" method="GET"> POST Data is sent as standard input to the program, and is thus hidden from the user. This is more efficient for bulk data. Note: Just because the data is hidden, don ’ t assume that this method is secure. <form action="http://www.amazon.com/order.cgi" method="POST">

5. Example - A Simple Form

6. Example Your name : Password : Do you want to buy books : or magazines Credit card Number :

7. Expiry Date : / Filling this in and submitting it yields in1=Roger+Peel&in2=13324234&in3=on& in5=1234+5678+9012&in6=11&in7=11&in8=2 001 Notice that this form is emailed by the browser.

8. GET Method Submissions The contents of a form are concatenated with the action URL. Name / value pairs are separated by ‘ & ’ ; Each name is separated from its value by a ‘ = ’ ; Spaces are replaced by plus signs ‘ + ’. Based on these rules, the appropriate input string is formed. You may see this string in the URL window of your browser after submitting a form and entering the requested HTML page. http://www.altavista.com/search.cgi?topic=computing &keywords=agents+software+papers&lang=en-gb POST Method Submissions The form information is sent to the STDIN of the CGI program indicated.

9. Form Elements An HTML form supports a rich variety of user input elements. Input elements are added by using the tag. This has no closing tag. For each input we need to specify : The name of the input element (unique in each for m). This name is used in the message sent back to the browser. The type of input - to tell the browser what to display and what to expect as input data. The size (if the element takes text values)

10. Examples of Form Elements For all input field types, the type= and name= fields must be specified. Text input fields : These allow a row of text to be typed by the user. You may specify the field width and the maximum length of the text to be input. Password controls : These are the same as text controls, but asterisks are displayed to mask user ’ s input : Check boxes : Any number of these may be clicked. Radio buttons : Just one of these may be clicked. Group radio buttons by using the same name= attribute.

11. Examples of Form Elements - 2 Submit button : Send data to program for processing. Reset button : Clear all current data from for m. Filenames may be looked up (using a browser pop-up menu) and included in a returned form. Hidden fields may be returned, containing information originally embedded in the page by the Web page designer (or the server). Beware that the user may change these values in the HTML or in the GET data submitted - hidden does not imply secure!

12. Examples of Form Elements - 3 Text Areas enable the user to enter text messages. rows= and cols= must define the text area. A helpful message can appear in the text area as an initial value. Please comment on our customer service. Enter your answer here

13. Examples of Form Elements - 4 Menus allow us to select from a number of alternatives. enables the user to choose from a set of options. Its main attributes are name= and size=. name= This identifies the returned item; size= This sets the number of lines in the selection menu: size == 1 The selection is done using a pull-down menu; size <#options The selection is done using a scrolling menu; size == #options The selection is done using a fixed menu. The optional values are listed using the tag; one of these may have the attribute selected. Web Publishing Web Technologies Programming Foundations

14. Frames Frames are an HTML concept that support the viewing of multiple pages in a single window. Frames are very popular, and are used in many commercial web pages. Frames : Example 1

16. Frames are used to split the browser window into various parts and to specify for each of the parts an HTML file to be displayed. A framed page is introduced by the tag This tag may have the attributes rows=, cols= When frames are used, no HTML may be present. Frames split the screen into rows or columns. Any or all of these parts can be further split into rows or columns. Every split must specify how many rows or columns are to be created and what their sizes are. After the splitting process, which HTML page is displayed on each part of the screen must be specified, using the tag and its src= attribute. Scroll-bars are used to enable the user to browse a frame that is too big for the fraction of the window specified.

17. Frames : Example 2

19. Interlinked Frames Frames can be linked with each other. When a link is followed then we can specify where the new web page will be displayed. To do this, we use the attribute target= within the definition of the link. The target frame is named - so we have to give the frames names, too. After frames have been assigned names, then we can reference them from links in other frames. This link will display the result in frame "a" Thus, certain frames may remain constant, and others can be used to display their results (i.e. new Web pages)

20. More.. Adding Music Using the link to a sound file: A midi song Using the embed method: In the first method a window is opened to play the file. In the second the browser places the file on the page right where the tag was placed..wav.aud and most other sound formats can be embedded in the same way.

21. Meta tags are used to help some search engines index a page especially if the page has frames. Meta examples <meta name= “ description ” content= “ how to add meta tags to your page ” Meta Tags and Search Engines

22. Your Part NOW.. You are required to go through the HTML Tutorials (Both basics and advanced) available on www.w3schools.com. www.w3schools.com This tutorial is part of this course and will be included in your tests.

23. End for Today What did you learn? You tell me..