Web Page Forms
Download
Report
Transcript Web Page Forms
HTML Forms
http://www.netskills.ac.uk/
© Netskills, Quality Internet Training, University of Newcastle
Netskills is a trademark of Netskills, University of Newcastle.
Partly funded by the
1
© Netskills Quality Internet Training, University of Newcastle
Topics
A simple HTML document
HTML Forms
Form tags
Input elements
Form actions
Form methods
2
GET and POST
Processing Scripts
© Netskills Quality Internet Training, University of Newcastle
A Simple HTML Document
A plain-text document
Mark-up tags interpreted by
a web browser
<html>
<head>
<title>A Simple Document</title>
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1" />
</head>
<body>
<p><img src="logo.gif" alt="My Logo"></p>
<h1>Introduction to HTML</h1>
<p>A <b>one-day workshop</b> run by:
<br />
<a href="http://www.netskills.ac.uk/">Netskills</a>
</p>
</body>
</html>
3
© Netskills Quality Internet Training, University of Newcastle
What are HTML Forms?
Standard HTML tags which:
Collect user input
Specify where to send the input
Specify how to send the input to be processed
HTML tags simply provide an interface to allow
user interaction
Input is handled by a separate script or program:
On the server
In the browser
4
e.g. via PHP, ASP, CGI etc.
e.g. JavaScript
© Netskills Quality Internet Training, University of Newcastle
Basic Structure
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1" />
<title>A Simple Form</title>
</head>
<body>
Named text input element
<form>
<form> tags <p>
enclose the Enter your name: <input type="text" name="inputbox" />
whole form
</p>
</form>
</body>
</html>
5
© Netskills Quality Internet Training, University of Newcastle
More Input Types
Radio
buttons
Choose ONE of the following:
<input type="radio" name="choice" value="A" checked="checked" />A
<input type="radio" name="choice" value="B" />B
<input type="radio" name="choice" value="C" />C
Pre-selected option
Same name attribute groups radio buttons
Check
boxes
Choose ANY, ALL or NONE of the following:
<input type="checkbox" name="A" value="yes" checked="checked" />A
<input type="checkbox" name="B" value="yes" />B
<input type="checkbox" name="C" value="yes" />C
Different name attributes create independent checkboxes
6
© Netskills Quality Internet Training, University of Newcastle
Pre-selected
option
Even More Input Types
Drop-down
menus
Choose ONE of the following:
<select name="drop_down">
<option value="None">No thanks</option>
<option value="A">Choose A</option>
<option value="B">Choose B</option>
<option value="C">Choose C</option>
</select>
Text
area
Add some thoughts of your own... <br />
<textarea name="free_text" rows="4" cols="20">
Type here...
</textarea>
7
© Netskills Quality Internet Training, University of Newcastle
Secret Stuff?
Passwords
<p>
Care to give us a password?
<input type="password" name="my_password" />
</p>
Hidden fields
<p>
<input type="hidden" name="my_secret" value="hello" />
</p>
8
© Netskills Quality Internet Training, University of Newcastle
Submit and Reset Buttons
The submit button sends form data to be
processed
<p>
<input type="submit" value="submit" />
</p>
An image may also be used to submit a form
<p>
<input type="image" src="button.gif" alt="submit" />
</p>
The reset button returns fields to original state
<p>
<input type="reset" value="reset" />
</p>
9
© Netskills Quality Internet Training, University of Newcastle
How to make it work
Specify how to send the form data
Specified with the method attribute
GET or POST
<form method="get"> or <form method="post">
If not specified – default is GET
Specify where to send the form data
Specified by the action attribute
Usually a script or program – can be local or full URL
<form method="get" action="formscript.php">
<form method="get" action="http://www.netskills.ac.uk/
resources/scripts/formscript.php">
10
© Netskills Quality Internet Training, University of Newcastle
The GET Method
Client makes an HTTP GET request for a script
Form data is appended to the script URL as
name/value pairs – a querystring
http://…/formscript.php?inputbox=Arnold&choice=A&BoxB=yes
The script it has access to values sent in the
querystring
In addition
Input data can be hard-coded directly in a URL
No need for a form
Results can be bookmarked
http://www.google.com/search?hl=en&q=netskills
11
© Netskills Quality Internet Training, University of Newcastle
The POST Method
Client makes an HTTP POST request for a script
Form data is sent as name/value pairs in the body of
the request
No querystring in URL requested
http://…/formscript.php
Form data arrives as a separate portion of
the request – the body of the POST
inputbox=Arnold&choice=A&BoxB=yes
In addition
Useful for large amounts of data
12
Browser may truncate a long querystring
Data is not visible in the URL
Results cannot be bookmarked
© Netskills Quality Internet Training, University of Newcastle
Form Processing Scripts
Scripts are run by the web server via a web server
application
Scripts can be written in almost any language
CGI, PHP, ASP, ColdFusion etc…
PHP, VBScript, Perl, CFML etc…
Language may depend on web server application(s)
Scripts receive form input from via GET or POST
Process input based on instructions in the script
13
Create an e-mail message
Perform database query
Write information to a file
Generate a web page
© Netskills Quality Internet Training, University of Newcastle
Form Processing
User submits form
to web server
Name: Arnold
Comments:
"whoopie doo!"
Web server passes form
data to processing script
Send email?
Return a
web
page?
<html>
...
</html>
14
© Netskills Quality Internet Training, University of Newcastle
Summary
Forms are created in web pages using HTML tags
Forms normally require a script to process them
15
HTML only provides and interface for user interaction
Form input tags must all be named!
Forms can be submitted to a script using GET or
POST
Scripts are programs that are usually run on the web
server
Scripts can do many things!
© Netskills Quality Internet Training, University of Newcastle