ITCS373: Internet Technology Lecture 5: More HTML.

ITCS373: Internet Technology

Lecture 5: More HTML

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.

HTML Forms - 2 As usual, a new range of HTML tags is required to

control the forms. The <form> tag defines a new HTML form. It must

contain a closing tag. No nesting of forms allowed. The main <form> 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: [email protected]" Method="POST" method= specifies how the form data is to be

sent to the script defined by the action attribute.

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"></form>

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"></form>

Example - A Simple Form

Example<body><html><form action=mailto:[email protected]

method="post"><br><p> Your name :<input type="text" name="in1" size="19" maxlength="19" /><br></p><p>Password :<input type="password" name="in2" size="8"

maxlength="8" ><br></p><p>Do you want to buy books :<input type="checkbox" name="in3" >or magazines<input type="checkbox" name="in4" ><br></p><p>Credit card Number :<input type="text" name="in5" size="19“

maxlength="15"/><br></p>

<p>Expiry Date :<input type="text" name="in6" size="2" > /<input type="text" name="in7" size="2" > /<input type="text" name="in8" size="4" ><br></p><input type="submit" value="send form data" ><input type="reset" value="clear form" ></form></body></html>

Filling this in and submitting it yieldsin1=Roger+Peel&in2=13324234&in3=on& in5=1234+5678+9012&in6=11&in7=11&in8=2001Notice that this form is emailed by the browser.

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.

Form Elements

An HTML form supports a rich variety of user input elements.

Input elements are added by using the tag <input>.

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)

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.<input type="text" name="mytext1" size="15“

maxlength="20" value="Enter your Username"/>

Password controls : These are the same as text controls, but asterisks are displayed to mask user’s input :

<input type="password" ... />Check boxes : Any number of these may be clicked.<input type="checkbox" ... />Radio buttons : Just one of these may be clicked. Group radio

buttons by using the same name= attribute.<input type="radio" ... />

Examples of Form Elements - 2Submit button : Send data to program for processing.<input type="submit" value="send form data" />Reset button : Clear all current data from for m.<input type="reset" value="clear" />Filenames may be looked up (using a browser pop-up menu) and included in a returned form.<input type="file" value="myfile.doc" ... />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!<input type="hidden" name="orderno"value="1000" />

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.<p>Please comment on our customer service.<textarea name="question1" rows="10"

cols="60">Enter your answer here</textarea> </p>

Examples of Form Elements - 4

Menus allow us to select from a number of alternatives. <select> 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 <option> tag; one of these may have the attribute selected.

<select name="courses"><option value="cs153">Web Publishing </option><option value="cs381">Web Technologies </option><option value="cs161" selected> Programming Foundations

</option></select>

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<html><frameset rows="50%,50%"><frame src="html_frame_a.html"><frameset cols="25%,75%"><frame src="html_frame_b.html"><frame src="html_frame_c.html"></frameset></frameset></html>

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 <frameset> tag This tag may have the attributes rows=, cols= When frames are used, no HTML <body> 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 <frame> 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.

Frames : Example 2

<html><frameset rows="50%,50%" cols="40%,20%,40%">

<frame src="html_frame_a.html"><frame src="html_frame_b.html"><frame src="html_frame_c.html"><frame src="html_frame_d.html"><frame src="html_frame_e.html"><frameset cols="25%,75%">

<frame src="html_frame_f.html"><frame src="html_frame_g.html">

</frameset></frameset></html>

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.

<frame src="a.html" name="a"> After frames have been assigned names, then we can

reference them from links in other frames.<a href="http://www.msn.co.uk" target="a">This link will display the result inframe "a"</a>

Thus, certain frames may remain constant, and others can be used to display their results (i.e. new Web pages)

More..

Adding MusicUsing the link to a sound file:<a

href=“http://www.pageresource.com/sounds/mattdum.mid”?> A midi song </a>

Using the embed method:<Embed src= “http://www.pageresource.com/sounds/

mattdum.mid”>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.

Meta tags are used to help some search engines index a page especially if the page has frames.

<head><title> Meta examples</title><meta name=“keywords” content=“meta

tags, search, homepage, web sites ”><meta name=“author” content=“Ali

Ahmad”><meta name=“description” content=“how

to add meta tags to your page”

Meta Tags and Search Engines

Your Part NOW..

You are required to go through the HTML Tutorials (Both basics and advanced) available on www.w3schools.com.

This tutorial is part of this course and will be included in your tests.

End for Today

What did you learn? You tell me ..

ITCS373: Internet Technology Lecture 5: More HTML.

Documents

Transcript of ITCS373: Internet Technology Lecture 5: More HTML.