1 / 22

HTML - Forms

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.

avent
Download Presentation

HTML - Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML - Forms By Joaquin Vila, Ph.D.

  2. 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>

  3. http://www.google.com

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

  5. Simple Form <form action="http://www.google.com/search"> Search: <input type=text name="q"> <input type=submit> </form>

  6. The INPUT Tag • <INPUT TYPE = • TYPE must be one of: • "text" • "password" • "checkbox" • "radio” • ”submit" • ”reset” • “button” • “hidden”

  7. The SELECT Tag • Inside <FORM> ... </FORM>, any number of SELECT tags are allowed • <SELECT NAME="menu"> <OPTION> First option. <OPTION> Second option. </SELECT>

  8. The TEXTAREA Tag • <TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA> • <TEXTAREA NAME="foo" ROWS=4 COLS=40> Default contents go here. </TEXTAREA>

  9. Other INPUT Attributes • <INPUT • NAME • VALUE • CHECKED • SIZE • MAXLENGTH

  10. 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

  11. <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>

  12. Mapquest Query String http://www.mapquest.com/maps/map.adp?country=US&address=411+OAK+ST&city=WAUKEGAN&state=IL&zipcode=60085

  13. MapQuest Query String • http://www.mapquest.com/maps/map.adp?country=US&address=411+OAK+ST&city=WAUKEGAN&state=IL&zipcode=60085

  14. 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>

  15. The objects in the form

  16. 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>

  17. 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>

  18. expr Result

  19. expr • function compute(form) • { • form.result.value = eval(form.expr.value) • } Result

More Related