html applet, form, map. applet applets are mall programs written in java that can be executed by the...

HTML

Applet, Form, Map

APPLET

Applets are mall programs written in Java that can be executed by the browser.

<APPLET> tag is used to add an applet to a web page.

CLASS extension file is the source file to be used by the browser.

<PARAM> tag is used to set the programmer specified parameters.

APPLET

<APPLET CODE=“x.class” NAME=“mycolors” VSPACE=“20” WIDTH=“400” HEIGHT=“50”><PARAM NAME=“bgcol” VALUE=“Red”> (PARAM:parameters passed to object) (VALUE:value associated with param)</APPLET>

FORM

With forms you can put a survey on your page to see what people think.

You can use forms as an order form for your site, or just as a questionnaire to see what people think of you pages.

Regardless of why you use them, forms may just be the trick you need to get the feedback you desire.

FORM

FORM element METHOD attribute indicates the way the Web server will

organize and send you form output Web server : Machine that processes browser requests METHOD = “post” in a form that causes changes to server data METHOD = “get” in a form that does not cause any changes in server

data

Form data sent to server as an environment variable Processed by scripts

ACTION attribute Path to a script (a CGI script written in Perl, C or other languages)

FORM-ENCODING The form field names and values are escaped: space

characters are replaced by ' +', and then reserved characters are escaped as per [URL]; that is, non-alphanumeric characters are replaced by '%HH', a percent sign and two hexadecimal digits representing the ASCII code of the character. Line breaks, as in multi-line text field values, are represented as CR LF pairs, i.e. '%0D%0A'.

The fields are listed in the order they appear in the document with the name separated from the value by '=' and the pairs separated from each other by '&'. Fields with null values may be omitted. In particular, unselected radio buttons and checkboxes should not appear in the encoded data, but hidden fields with VALUE attributes present should.

FORM

GET: The default, will send the form input in an URL.

POST: Sends the form in the body of the submission. You can send larger amounts of data, and that the URL of the form results doesn't show the encoded form.

REQUEST OBJECT- QueryString (GET)

Retrieve information sent by the client using HTTP Get method with an HTML form and data appended to the URL when the page is requested.

QueryString is less capable than the Form collection (limitation of about 2000 characters)

http://www.mis.boun.edu.tr/egeli/asp/query.asp?place=mis

REQUEST OBJECT- Form (POST) User enters input into the fields of a form When form is submitted, data in each field

is transferred to the server, and then to ASP Data is sent in the format:

name = value

name (attribute of <INPUT>)

FORM-POST & GET The HTML specifications technically define

the difference between "GET" and "POST" so that former means that form data is to be encoded (by a browser) into a URL while the latter means that the form data is to appear within a message body.

"GET" is basically for just getting (retrieving) data whereas "POST" may involve anything, like storing or updating data, or ordering a product, or sending E-mail.

<FORM> <FORM> is a container tag and holds the form

elements.

<FORM method="post" name="views“

action="mailto:x@full-moon.com"> This command does 3 things:

Tells the browser a form has begun and will be called 'views'.

"Post" is the method you want the results to be handled.

You want the data posted to an e-mail address. Note that there are no spaces between 'mailto:' and the e-mail address you specify.

<TEXTAREA> TEXTAREA element

Inserts a scrollable text box into FORM ROWS and COLS attributes specify the number of

character rows and columns

<TEXTAREA NAME="I_think" ROWS=6 COLS=30></TEXTAREA>

ROWS: Specifies the height of textarea box as rows.

COLS: Specifies the width of textarea box as characters.

<INPUT TYPE=“TEXT”>

Tells the browser the name, type and size of the input box.

<INPUT TYPE="text"

NAME="My_name" SIZE="30">

NAME: Defines the name of the form. SIZE: Defines the width of the form by

specifying the number of characters.

<INPUT> INPUT element

Attributes: TYPE (required)

Hidden inputs always have TYPE = “hidden” Defines the usage of the INPUT element

TYPE = “text” inserts a one-line text box NAME provides a unique identification for INPUT element VALUE indicates the value that the INPUT element sends

to the server upon submission SIZE

For TYPE = “text”, specifies the width of the text input, measured in characters

MAXLENGTH For TYPE = “text”, specifies the maximum number of

characters that the text input will accept

<INPUT>

INPUT element (cont.) Include textual identifier adjacent to INPUT

element 2 types of INPUT elements that should be

inserted into every form: TYPE = “submit” inserts a button that submits

data to the server VALUE attribute changes the text displayed on the

button (default is “Submit”) TYPE = “reset” inserts a button that clears all

entries the user entered into the form VALUE attribute changes the text displayed on the

button (default is “Reset”)

<INPUT> SUBMIT AND RESET

At the end of the forms page buttons can be inserted that either submit or reset the form.

<INPUT TYPE="submit">

<INPUT TYPE="reset" VALUE="Clear"> VALUE: Specifies the text to be displayed on the

button.

<INPUT TYPE=IMAGE>

Specifies an image resource to display, and allows input of two form fields: the x and y coordinate of a pixel chosen from the image.

Implies `TYPE=SUBMIT' processing; that is, when a pixel is chosen, the form as a whole is submitted.

The SRC attribute is required the ALIGN is optionalChoose a point on the map:<INPUT TYPE="IMAGE"

NAME="map“ SRC="foo.gif">

<INPUT TYPE=“PASSWORD”>

INPUT element TYPE = “password” Inserts a text box where data displayed

as asterisks Actual data submitted to server

<INPUT TYPE=“HIDDEN”>

An INPUT element with `TYPE=HIDDEN' represents a hidden field.The user does not interact with this field; instead, the VALUE attribute specifies the value of the field. The NAME and VALUE attributes are required.

<INPUT TYPE=hidden NAME=context VALUE="l2k3j4l2k3j4l2k3j4lk23">

<INPUT TYPE=“CHECKBOX”>

As opposed to Radio Buttons, check boxes can have more than 1 option selected. So, while you might ask what computer brand a reader prefers using radio buttons, you would ask what peripherals a reader has hooked up with checkboxes and present a list of choices.

<INPUT TYPE="checkbox" NAME="peripherals"

VALUE="mouse">

<INPUT TYPE=“CHECKBOX”>

– Creates a checkbox• Used individually or in groups• Each checkbox in a group should have same

NAME• Make sure that the checkboxes within a group

have different VALUE attribute values – Otherwise, browser will cannot distinguish

between them• CHECKED attribute checks boxes initially

<INPUT TYPE=“RADIO”> When type radio is used the form will let only

1 button to be selected. Tthe name will be the same regardless with the value differing per your suggestion.

<INPUT TYPE="radio" NAME="Letter" VALUE="A"> A

<INPUT TYPE="radio" NAME="Letter" VALUE="B"> B

VALUE: Defines the value to be returned by the form action.

<INPUT TYPE=“RADIO”>

Radio buttons similar in function and usage to checkboxes

Only one radio button in a group can be selected

CHECKED attribute indicates which radio button is selected initially

<SELECT>

A pop-up box is a text box that displays one option of several possibilities. An Arrow is displayed next to the box. When the user clicks on the arrow, the pop-up box opens and displays all of the possible options that are available.

SELECT: Start of the pop-up box SIZE: Defines how many options will show before

you have clicked on the pop-up box. OPTION SELECTED: Notes the option that will be

initially displayed in the box. OPTION: Notes the item that can be selected.

<SELECT>

<SELECT NAME="Web_Use" SIZE="1"> <OPTION SELECTED> Surfing <OPTION> Playing Games <OPTION> Chatting </SELECT>

<SELECT>

SELECT element Places a selectable list of items inside FORM

Include NAME attribute Add an item to list

Insert an OPTION element in the <SELECT>…</SELECT> tags

Closing OPTION tag optional SELECTED attribute applies a default selection to

list Change the number of list options visible

Including the SIZE = “x” attribute inside the <SELECT> tag

x number of options visible

FORM-EXAMPLE-1<FORM method="POST"

action="mailto:egeli@boun.edu.tr"> <p>Your Name &nbsp; &nbsp;

<input type="text" name="NAME" size="20"> </p>

<p>Your Surname <input type="text" name="SURNAME" size="20"> </p>

<p> <input type="submit" value="Post"> <input type="reset" value="Reset"> </p>

</FORM>

FORM-EXAMPLE-1

FORM-EXAMPLE-1 When “post” method is used to send the form

as a mail message, this form is posted from Microsoft Internet Explorer as an attachment.

 File Name:

POSTDATA.ATTFile Type:

Text file (Notepad)Content:

NAME=Birgul&SURNAME=Egeli

EXAMPLE-2

FORM-EXAMPLE-2<FORM method="post" name="formex" action="mailto:egeli@boun.edu.tr">

Name: <INPUT Type="text" name="Name" size="30"> <br>

Surname: <INPUT Type="text" name="Surname"

size="30"> <br>

FORM-EXAMPLE-2Password: <INPUT Type="password" name="Password"

size="6" maxlength=6><br><INPUT Type="hidden" name="Usercode" <br><!– Can be used to pass parameters -->Address: <TEXTAREA name="Address" rows=3

cols=30> </TEXTAREA><br>

FORM-EXAMPLE-2Your favorite home pet: <br><INPUT type="radio" name="pet" value="Cat"

checked> Cat<br><INPUT type="radio" name="pet" value="Dog">

Dog<br><INPUT type="radio" name="pet" value="Bird">

Bird<br>

FORM-EXAMPLE-2

Interests:<br>

<INPUT type="checkbox" name="interest1" value="Read"> Reading

<br>

<INPUT type="checkbox" name="interest2" value="Swim"> Swimming

<br>

<INPUT type="checkbox" name="interest3" value="Music"> Music

<br>

FORM-EXAMPLE-2

Job preference:

<SELECT Name="jobpref" size="1">

<OPTION SELECTED> Teaching

<OPTION> Research

<OPTION> Management

</SELECT>

<br>

FORM-EXAMPLE-2

Multiple Select Interest (select with ctrl+click):

<SELECT Name="minterest" size="3" multiple>

<OPTION SELECTED> Reading

<OPTION> Swimming

<OPTION> Music

</SELECT>

FORM-EXAMPLE-2

<INPUT TYPE="image" src="logo.jpg">

<br>

<INPUT TYPE="submit" value="Submit">

<br>

<INPUT TYPE="reset" value="Reset">

EXAMPLE-2

FORM-EXAMPLE-2Name=Birgul&Surname=Egeli&Password=mis371&Usercode=&Address=+Bo%F0azi%E7i+%DCniversitesi&pet=Cat&interest1=Read&jobpref=Teaching&minterest=Reading&minterest=Music

FORM-EXAMPLE-3

The URL specified in the ACTION attribute does not have to be a CGI script, although you can get pretty weird results if you try to feed data to a document which isn't a CGI script. A popular reason to do this is to get a "button" which when pressed takes you to a new page.

<FORM ACTION="http://www.mis.boun.edu.tr“

METHOD=GET>

<INPUT TYPE=submit

NAME=foo

VALUE="Go to destination">

</FORM>

FORM Using Mail.Object

<form name="frm1" method="post" action="talep.asp">

<input type="text" name="req1" value="">

<br> <input type="submit" value="Submit"> </form>

FORM Using Mail.Object(talep.asp)

<!-- METADATA TYPE="typelib" UUID="CD000000-8B95-11D1-82DB-00C04FB1625D" NAME="CDO for Windows 2000 Library" -->

<% talep=request.form("req1") sch = "http://schemas.microsoft.com/cdo/configuration/" Set cdoConfig = CreateObject("CDO.Configuration")

FORM Using Mail.Object(talep.asp)

With cdoConfig.Fields .Item(cdoSendUsingMethod) =

cdoSendUsingPort .Item(cdoSMTPServer) = "smtp.boun.edu.tr" .Item(cdoSMTPAuthenticate) = 1 .Item(cdoSendUsername) = "turinfo" .Item(cdoSendPassword) = "tuygar" .Update End With

FORM Using Mail.Object(talep.asp)

dim theBody Set myMail=CreateObject("CDO.Message") set myMail.Configuration= cdoConfig myMail.Subject="County Workshop" myMail.From="turinfo@boun.edu.tr" myMail.To="birgul.kutlu@boun.edu.tr"

theBody="<b>County Workshop Request </b><br>" theBody=theBody & “Requester: " & talep & "<br>" myMail.HTMLBody=theBody myMail.Send set myMail=nothing %>

FORM Using Mail.Object(talep.asp)

<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html;

charset=iso-8859-9" /> <LINK rel="stylesheet" type="text/css" href="styles/Style.css"> </HEAD> <BODY leftMargin=0 topMargin=0 > Your request is sent. </BODY> </HTML>

MAP

A client-side image map is an image map that is run by the browser rather than a CGI. What happens is you will provide all the information required to run the map in your HTML document.

First the image needs to be prepared. Then the hot spot coordinates are specified.

MAP Image maps

Designate certain sections of an image as hotspots

Use hotspots as anchors for linking All elements of image map inside <MAP>…</MAP> tags

<MAP> tag requires NAME attribute Ex. <MAP NAME = “picture”>

Hotspots designated with AREA element AREA attributes:

HREF sets the target for the link on that spot SHAPE and COORDS set the characteristics of the AREA ALT provides alternate textual description

MAP AREA element (continued)

SHAPE = “rect” Causes rectangular hotspot to be drawn around

the coordinates given in the COORDS attribute COORDS - pairs of numbers corresponding to

the x and y axes x axis extends horizontally from upper-left corner y axis extends vertically from upper-left corner

Ex. <AREA HREF = “form.html” SHAPE = “rect” COORDS = “3, 122, 73, 143” ALT = “Go to the form”>

Rectangular hotspot with upper-left corner of rectangle at (3, 122) and lower-right corner at (73, 143)

MAP AREA element (continued)

SHAPE = “poly” Causes a hotspot to be created around specified coordinates Ex. <AREA HREF = “mailto:deitel@deitel.com” SHAPE = “poly” COORDS = “28, 22, 24, 68, 46, 114, 84, 111, 99, 56, 86, 13” ALT = “Email the Deitels”>

SHAPE = “circle” Creates a circular hotspot Coordinates of center of circle and radius of circle, in pixels Ex. <AREA HREF = “mailto:deitel@deitel.com” SHAPE = “circle” COORDS = “146, 66, 42” ALT = “Email the Deitels”>

MAP To use the image map with an IMG

element Insert the USEMAP = “#name” attribute

into the IMG elementname - value of the NAME attribute in the MAP element

Ex. <IMG SRC = "deitel.gif" WIDTH = "200" HEIGHT="144" BORDER="1" ALT = "Harvey and Paul Deitel" USEMAP = "#picture">

MAP<IMG SRC="turkeym.gif" HEIGHT=100 WIDTH=100 BORDER=1 ISMAP USEMAP="#Turkey">

ISMAP stands alone. It tells the browser that this is an image map. Basically, the browser is being told that the image is active, but rather to read the map instead of activating the image.

USEMAP= tells the browser where to find the map coordinates. Notice the format is that of a page jump. The browser is being told where on the page to look for the map coordinates. In this case the coordinates are on a section of the HTML document marked "monkarea". Please notice the # mark! You need that.

MAP<MAP NAME="Turkey">

You first denote that the following are the coordinates for the map. You do that with MAP NAME=.

# mark is not used here. The browser jumps to this part of the page to read coordinates rather than going to a CGI.

MAP<AREA SHAPE=POLY

COORDS="40,40,40,110,160,110,160,40“

HREF="istanbul.gif">

</MAP>

  AREA denotes that this is a new section of

the map. SHAPE denoted the shape you used. HREF denotes the URL this section points to. /MAP wraps up the whole deal.

MAP<AREA SHAPE=POLY

COORDS="40,40,40,110,160,110,160,40“

HREF="istanbul.gif">

RECT (4 COORDINATES or 2 VERTEX)

CIRCLE (CENTER COORDINATE, RADIUS)

POLY (ANY NUMBER OF COORDINATES)