HTML Applet Form Map APPLET Applets are mall

HTML Applet, Form, Map

APPLET Applets are mall programs written in Java that can be executed by the browser. n <APPLET> tag is used to add an applet to a web page. n CLASS extension file is the source file to be used by the browser. n <PARAM> tag is used to set the programmer specified parameters. n

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. n You can use forms as an order form for your site, or just as a questionnaire to see what people think of you pages. n Regardless of why you use them, forms may just be the trick you need to get the feedback you desire. n

FORM n FORM element ¨ METHOD attribute indicates the way the Web server will organize and send you form output n n n ¨ Form data sent to server as an environment variable n ¨ 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 Processed by scripts ACTION attribute n Path to a script (a CGI script written in Perl, C or other languages)

FORM-ENCODING n n The form field names and values are escaped: space characters are replaced by ' +', and then reserved characters are escaped as per [URL]; that is, nonalphanumeric 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. '%0 D%0 A'. 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. n 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. n

REQUEST OBJECTQuery. String (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. Query. String 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 OBJECTForm (POST) User enters input into the fields of a form n When form is submitted, data in each field is transferred to the server, and then to ASP n Data is sent in the format: n name = value name (attribute of <INPUT>)

FORM-POST & GET n n 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> n <FORM> is a container tag and holds the form elements. <FORM method="post" name="views“ action="mailto: x@full-moon. com"> n 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> n 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. n COLS: Specifies the width of textarea box as characters. n

<INPUT TYPE=“TEXT”> n Tells the browser the name, type and size of the input box. <INPUT TYPE="text" NAME="My_name" SIZE="30"> n n NAME: Defines the name of the form. SIZE: Defines the width of the form by specifying the number of characters.

<INPUT> n INPUT element ¨ Attributes: n TYPE (required) ¨ ¨ n n n NAME provides a unique identification for INPUT element VALUE indicates the value that the INPUT element sends to the server upon submission SIZE ¨ n Hidden inputs always have TYPE = “hidden” Defines the usage of the INPUT element § TYPE = “text” inserts a one-line text box 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> n INPUT element (cont. ) Include textual identifier adjacent to INPUT element ¨ 2 types of INPUT elements that should be inserted into every form: ¨ n TYPE = “submit” inserts a button that submits data to the server ¨ n 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 n n 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. n Implies `TYPE=SUBMIT' processing; that is, when a pixel is chosen, the form as a whole is submitted. n The SRC attribute is required n the ALIGN is optional Choose a point on the map: <INPUT TYPE="IMAGE" NAME="map“ SRC="foo. gif"> n

<INPUT TYPE=“PASSWORD”> n INPUT element ¨ TYPE = “password” ¨ Inserts a text box where data displayed as asterisks n Actual data submitted to server

<INPUT TYPE=“HIDDEN”> n 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="l 2 k 3 j 4 lk 23">

<INPUT TYPE=“CHECKBOX”> n 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”> n 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 n 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> n 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. n SELECT: Start of the pop-up box n SIZE: Defines how many options will show before you have clicked on the pop-up box. n OPTION SELECTED: Notes the option that will be initially displayed in the box. n 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> n SELECT element ¨ Places a selectable list n Include NAME attribute of items inside FORM ¨ Add an item to list n Insert an OPTION element in the <SELECT>…</SELECT> tags n Closing OPTION tag optional ¨ SELECTED attribute applies a default selection to list ¨ Change the number of list options visible n n 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   <input type="text" name="NAME" size="20"> </p> <p>Your Surname <input type="text" name="SURNAME" size="20"> </p> <input type="submit" value="Post"> <input type="reset" value="Reset"> </p> </FORM>

FORM-EXAMPLE-1

FORM-EXAMPLE-1 n 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. ATT File 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"> Surname: <INPUT Type="text" size="30"> name="Surname"

FORM-EXAMPLE-2 Password: <INPUT Type="password" name="Password" size="6" maxlength=6> <INPUT Type="hidden" name="Usercode" <!– Can be used to pass parameters --> Address: <TEXTAREA name="Address" rows=3 cols=30> </TEXTAREA>

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

FORM-EXAMPLE-2 Interests: <INPUT type="checkbox" name="interest 1" value="Read"> Reading <INPUT type="checkbox" name="interest 2" value="Swim"> Swimming <INPUT type="checkbox" name="interest 3" value="Music"> Music

FORM-EXAMPLE-2 Job preference: <SELECT Name="jobpref" size="1"> <OPTION SELECTED> Teaching <OPTION> Research <OPTION> Management </SELECT>

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"> <INPUT TYPE="submit" value="Submit"> <INPUT TYPE="reset" value="Reset">

EXAMPLE-2

FORM-EXAMPLE-2 Name=Birgul& Surname=Egeli& Password=mis 371& Usercode=& Address=+Bo%F 0 azi%E 7 i+%DCniversitesi& pet=Cat& interest 1=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> n

FORM Using Mail. Object <form name="frm 1" method="post" action="talep. asp"> n <input type="text" name="req 1" value=""> n n <input type="submit" value="Submit"> n </form> n

FORM Using Mail. Object (talep. asp) n n n n n <!-METADATA TYPE="typelib" UUID="CD 000000 -8 B 95 -11 D 1 -82 DB-00 C 04 FB 1625 D" NAME="CDO for Windows 2000 Library" --> <% talep=request. form("req 1") sch = "http: //schemas. microsoft. com/cdo/configuration/" Set cdo. Config = Create. Object("CDO. Configuration")

FORM Using Mail. Object (talep. asp) n n n n n With cdo. Config. Fields. Item(cdo. Send. Using. Method) = cdo. Send. Using. Port. Item(cdo. SMTPServer) = "smtp. boun. edu. tr". Item(cdo. SMTPAuthenticate) = 1. Item(cdo. Send. Username) = "turinfo". Item(cdo. Send. Password) = "tuygar". Update End With

FORM Using Mail. Object (talep. asp) n n n dim the. Body Set my. Mail=Create. Object("CDO. Message") set my. Mail. Configuration= cdo. Config my. Mail. Subject="County Workshop" my. Mail. From="turinfo@boun. edu. tr" my. Mail. To="birgul. kutlu@boun. edu. tr" the. Body="<b>County Workshop Request </b> " the. Body=the. Body & “Requester: " & talep & " " my. Mail. HTMLBody=the. Body my. Mail. Send set my. Mail=nothing %>

FORM Using Mail. Object (talep. asp) n n n n n <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 left. Margin=0 top. Margin=0 > Your request is sent. </BODY> </HTML>

MAP n 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. n First the image needs to be prepared. Then the hot spot coordinates are specified.

MAP n 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 n n Ex. <MAP NAME = “picture”> Hotspots designated with AREA element ¨ AREA attributes: n HREF sets the target for the link on that spot n SHAPE and COORDS set the characteristics of the AREA n ALT provides alternate textual description

MAP n AREA element (continued) ¨ SHAPE = “rect” Causes rectangular hotspot to be drawn around the coordinates given in the COORDS attribute n COORDS - pairs of numbers corresponding to the x and y axes n x axis extends horizontally from upper-left corner ¨ y axis extends vertically from upper-left corner ¨ n 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 n AREA element (continued) ¨ SHAPE = “poly” n n ¨ 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” n n n 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 n To use the image map with an IMG element ¨ Insert the USEMAP = “#name” attribute into the IMG element ¨ name - 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"> n n 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"> n n 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, 110, 160, 40“ HREF="istanbul. gif"> </MAP> n n 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, 110, 160, 40“ HREF="istanbul. gif"> RECT (4 COORDINATES or 2 VERTEX) CIRCLE (CENTER COORDINATE, RADIUS) POLY (ANY NUMBER OF COORDINATES)