HTML - Forms

lilactruckInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

121 εμφανίσεις

HTML
-

Forms

By

Joaquin Vila, Ph.D.

Form Tag


The FORM tag specifies a fill
-
out form
within an HTML document.


More than one fill
-
out form can be in a
single document, but forms cannot be
nested.



<FORM ACTION="url"> ... </FORM>

http://www.google.com

http://www.google.com/search? q=Multimedia

Simple Form

<form action="http://www.google.com/search">



Search: <input type=text name="q">



<input type=submit>


</form>


The INPUT Tag


<INPUT TYPE =


TYPE must be one of:


"text"


"password"


"checkbox"


"radio”


”submit"


”reset”


“button”


“hidden”


The SELECT Tag


Inside <FORM> ... </FORM>, any number
of SELECT tags are allowed


<SELECT NAME="menu">


<OPTION> First option.


<OPTION> Second option.


</SELECT>

The TEXTAREA Tag


<TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA>




<TEXTAREA NAME="foo" ROWS=4 COLS=40>


Default contents go here.


</TEXTAREA>

Other INPUT Attributes


<INPUT


NAME


VALUE


CHECKED


SIZE


MAXLENGTH

Forms


URL for a popular search engine


http://www.yahoo.com/


Client request


http://search.yahoo.com/bin/search?p=java


http://search.yahoo.com/bin/search


?


p=java



<html>


<head>

<title>Search</title>

</head>


<body>


<form action="http://search.yahoo.com/bin/search">


Search:


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


<input type="submit" value="Submit" >


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

</form>


</body>

</html>

Mapquest
Query String

http://www.mapquest.com/maps/map.adp?

country=US&address=411+OAK+ST&city
=WAUKEGAN&state=IL&zipcode=60085

MapQuest Query String


http://www.mapquest.com/maps/map.adp?

country=US&

address=411+OAK+ST&

city=WAUKEGAN&

state=IL&

zipcode=60085


MapQuest Form

<form action="http://www.mapquest.com/maps/map.adp">

<br>country:<input type=text name=country>

<br>address:<input type=text name=address>

<br>city:<input type=text name=city>

<br>state:<input type=text name=state>

<br>zipcode:<input type=text name=zipcode>

<br><input type=submit>

</form>


The objects in the form


Forms & Client Side Processing

<html>

<head>

<script>

function dice(form){


form.die1.value = Math.floor(Math.random()*6+1)

}

</script>

</head>

<body>



<form>


Dice:


<input type="text" name="die1" size="2">


<input type="button" value="Roll" name="B1" onClick="dice(this.form)"
>


</form>

</body>

</html>

A Simple Function

<HTML>

<HEAD>


<SCRIPT>

function compute(form)

{


form.result.value = eval(form.expr.value)

}


</SCRIPT>

</HEAD>

<BODY>


<FORM name=“MyForm”>


Enter an expression:


<INPUT TYPE="text" NAME="
expr
" SIZE=15 >


<INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">


<BR>


Result:


<INPUT TYPE="text" NAME="
result
" SIZE=15 >


</FORM>

</BODY>

</HTML>

expr

Result

expr

Result

function compute(form)

{


form.result.value

= eval(
form.expr.value
)

}