http:mastercgi'comhowtoinfoformtutorial'shtml

1
Forms
http//mastercgi.com/howtoinfo/formtutorial.shtml
http//www.htmlgoodies.com/tutors/forms.html http
//www.geocities.com/SiliconValley/Vista/4555/ Mot
ivation for using html forms?
Provides a means for users to enter information
(which is then sent where ??)
2
Forms
Shishir Gundavaram, CGI Programming on the WWW,
O'Reilly Associates
3
Forms
ltinputgt fields
Really buttons!
attributes type (choices are text,
textarea, password, submit, reset) name
(gives a name to this "variable" value) size (the
size in characters as drawn by browser) maxlength
(maximum characters user can enter) value (the
value that will initially display)
Example ltinput type text name color size
10 maxlength 15 value "bright white"gt
4
Forms
ltinputgt fields
Really buttons!
attributes type (choices are text, password,
textarea, submit, reset)
Examples ltinput type submitgt ltinput type
submit value "Click here" gt ltinput type submit
value Proceed name button1gt
When are quotation marks required????
5
Forms
ltform methodpost action "http//red
"gt ltbrgtltbrgtltbrgtltbrgtltbrgt Enter a number
now nbsp nbsp nbsp nbsp nbsp
nbsp nbsp nbsp nbsp nbsp nbsp
nbsp nbsp nbsp nbsp nbsp nbsp
nbsp nbsp nbsp ltinput typetext
namehowmany size10 maxlength5
value"1"gt ltbrgtltbrgtltbrgtltbrgt ltinput typesubmit
value"Go for it"gt ltinput typeresetgt lt/formgt
6
Forms
What makes this white space?
Why does this field have the value 1 as its
contents?
What's to prevent this field from having dude or
54.xy2 as its content?
This is an example of "boilerplate"
Why are these two buttons so close together?
7
Forms
When we click a submit button (ltinput type
submitgt on a form, the following events occur
1. The browser "marshals" the input fields in
so-called "name value" pairs 2. The browser
uses the URL of the action method in the form
tag 3. The browser provides the marshaled input
fields either as part of the URL (when method
get) OR on the "Standard Input Stream (when
method post) 4. For the OAS, use GET when
there are no parameters and POST when there are
parameters.
8
Forms
What would the URL look like in the previous
example if the form method had been GET?
http//redwood.haeb3.blah?howmany1
What do you think would have happened if we had
omitted the "name" attribute on the text field?
Why do you think there's no namevalue pair
marshaled for the submit button? How would you
change that?
9
Forms and Parameters
Because we are using servlets, we will be getting
parameter information via the HttpRequest object.
But that is because the OAS has received them
as namevalue pairs and is providing them to us
using a simpler scheme. We dont have to worry
about pulling parameters out of an args array!
10
Forms and Parameters
Name of this field is howmany
Name of this field is whatcolor
11
Forms and Parameters
input typetext namehowmany size10 maxlength5
value"1"gt ltbrgtltbrgt Enter a color here nbsp
nbsp nbsp nbsp nbsp nbsp nbsp nbsp
nbsp nbsp nbsp nbsp nbsp nbsp nbsp
nbsp nbsp nbsp ltinput typetext
namewhatcolor size20 maxlength15gt ltbrgtltbrgtltbrgt
ltbrgt ltinput typesubmit value"Go for it"gt
You can begin to see the virtues of html tables,
where you can force alignment!
12
Forms and Parameters
ltform methodpost action"http//redwood.humboldt.
edu8889/servlet/aeb3.ThreeParams"gt Parameter
1nbspnbsp ltinput typeinput namefirstgt
ltbrgt Parameter 2nbspnbsp ltinput typeinput
namesecondgt ltbrgt Parameter 3nbspnbsp ltinput
typeinput namethirdgt ltbrgtltbrgtltbrgt ltinput
typesubmitgt nbspnbspnbspnbspnbsp ltinput
typeresetgt lt/formgt
13
Forms and Parameters
14
Forms and Parameters
15
Forms and Parameters
This is a dynamic html document that the
ThreeParams servlet creates as it executes. This
is a "virtual" document.
16
Forms and Parameters
package aeb3 import javax.servlet. import
javax.servlet.http. import java.util. import
java.io. public class ThreeParams extends
HttpServlet public void doPost
(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException
response.setContentType("text/html")
17
Forms and Parameters
PrintWriter out response.getWriter()
String title "Reading Three Request
Parameters" out.println("lthtmlgtltheadgtlttitlegt"
title "lt/titlegtlt/headgt")
out.println("ltbodygt\n") out.println("ltH1
ALIGNCENTERgt" title "lt/H1gt")
out.println("ltulgt") out.println("
ltligtparam1 " request.getParameter("first"))
out.println(" ltligtparam2 "
request.getParameter("second")) out.println("
ltligtparam3 " request.getParameter("third"))
out.println("lt/ulgt") out.println("lt/bodygtlt/h
tmlgt")
Why are we using "first", "second" and "third" ???
Note OAS is providing namevalue pairs to the
servlet, which is making them available to us via
methods of the HttpRequest object. What method
are we using here?
18
Forms and Parameters
ltform methodpost action"http//redwood.humboldt.
edu8889/servlet/aeb3.FiveParams"gt Parameter
1nbspnbsp ltinput typeinput namefirstgt
ltbrgt Parameter 2nbspnbsp ltinput typeinput
namesecondgt ltbrgt Parameter 3nbspnbsp ltinput
typepassword namethirdgt ltbrgt Parameter
4nbspnbsp(where on earth is it??) ltinput
typehidden namefourth value"secret password"gt
ltbrgtltbrgtltbrgt ltinput typesubmit namebutton1
valueOKgt nbspnbspnbspnbspnbsp ltinput
typesubmit namebutton2 value"Not
OK"gt nbspnbspnbspnbspnbsp ltinput
typeresetgt lt/formgt
A new type for the input tag. Why might we use
this? Why might we choose not to use this?
Note two submit buttons !! But they are named.
19
Forms and Parameters
20
Forms and Parameters
21
Forms and Parameters
This is a dynamic html document that the
FiveParams servlet creates as it executes. This
is a "virtual" document.
22
Forms and Parameters
public void doPost (HttpServletRequest request,
HttpServletResponse
response) throws
ServletException, IOException . . .
out.println("ltulgt") out.println("
ltligtparam1 " request.getParameter("first"))
out.println(" ltligtparam2 "
request.getParameter("second"))
out.println(" ltligtparam3 " request.getParamete
r("third")) out.println(" ltligtparam4 "
request.getParameter("fourth"))
out.println(" ltligtparam5 " request.getParamete
r("button1")
"ltbrgtnbspnbspOR") out.println("
ltligtparam5 " request.getParameter("button2"))
out.println("lt/ulgt") . . .
23
Forms and Parameters
Can you tell which button the user clicked?