HTML Applet, Form, Map. APPLET Applets are mall programs written in Java that can be executed by the...
-
Upload
myron-logan -
Category
Documents
-
view
226 -
download
1
Transcript of 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:[email protected]"> 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:[email protected]"> <p>Your Name
<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:[email protected]">
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="[email protected]" myMail.To="[email protected]"
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:[email protected]” 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:[email protected]” 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)