HTML Forms, the HTTP Request, and Parameter Passing

1
HTML Forms, the HTTP Request, and Parameter
Passing
CSCI/CINF 4230

• Instructor Charles Moen

2
HTML Forms
HTML Forms (W3Schools, Schultz)?

• An HTML form is a Web page where the user can
  input information
• Contains a form element
• The form element contains tags for graphical
  controls that are used for input
• Text controls
• Checkbox controls
• Select elements
• Buttons

3
Example Web Page with a Form
HTML Forms
Checkbox controls
Select element
Text control
Submit button
4
A Simple HTML Form(partial code from a Web page)
HTML Forms
A form is created by the HTML form element
ltform method"GET" action"createOrder.aspx"gt
lttable border"0" cellspacing"0" cellpadding"5"
width"580"gt lttrgtltthgtQuantitylt/thgtltthgtMeatlt/thgt
ltthgtCheeselt/thgtltthgtVeggieslt/thgtlt/trgt lttrgt
lttd valign"top"gtltinput type"text"
name"quantity" size"5"/gtlt/tdgt lttd
valign"top"gt ltselect name"meat"gt
ltoption value"Ham" selected"selected"gtHamlt/opti
ongt ltoption value"RoastBeef"gtRoast
beeflt/optiongt lt/selectgt lt/tdgt lttd
valign"top"gt ltlabel for"cheese"gt
ltinput type"radio" name"cheese" id"cheese"
value"yes" checked"checked"/gt Cheese
lt/labelgt ltbr/gt ltlabel for"nocheese"gt
ltinput type"radio" name"cheese"
id"nocheese" value"no"/gt No cheese
lt/labelgt lt/tdgt lttd valign"top"gt
ltlabel for"lettuceid"gt ltinput
type"checkbox" name"lettuce" id"lettuceid"
checked"checked"/gt Lettuce lt/labelgt
ltbr/gt ltlabel for"tomatoid"gt ltinput
type"checkbox" name"tomato" id"tomatoid"
checked"checked"/gt Tomato lt/labelgt
ltbr/gt ltlabel for"onionid"gt ltinput
type"checkbox" name"onion" id"onionid"/gt
Onion lt/labelgt lt/tdgt lttd
valign"top"gt ltinput type"text"
name"price" size"6" readonly"readonly"
value"4.99"/gt lt/tdgt lt/trgt lt/tablegt ltdiv
id"submit"gtltinput type"submit" value"Create
Order"/gtlt/divgt lt/formgt
Submit button
5
Using a Control
HTML Forms (W3Schools, Schultz)?

• A control must be brought into focus first
• Click on it with the mouse, or
• Move the cursor to it by pressing the Tab key
• Then the user can enter the data
• Type some text, or
• Select a menu option, or
• Click a checkbox or button

6
Submitting the Data
HTML Forms (W3Schools, Schultz)?

• After entering values into the controls, the user
  must submit the form data
• Form handler
• The program that processes the form data
• Client-side form handling
• JavaScript
• Homework 2
• Server-side form handling
• The form data is sent to the server in an HTTP
  request
• A program on the server processes the form data
  and sends back an HTTP response
• ASP.NET, as well as other server-side
  technologies such as CGI, J2EE, or PHP
• Homework 3 the team project

7
Form Element
HTML Forms (W3Schools, Schultz)?

• All form controls must be within a form element
• Two important attributes are action and method

URL of the server-side form handler
(A program that runs on the server)
Only two possible values of method get or post
ltform action"createOrder.aspx" method"get"gt
lt!-- all controls should go in the form element
--gt lt/formgt
8
HTTP Request and Response
HTML Forms (Spainhour, W3Schools
GET /createOrder.aspx?quantity1meatHamcheesey
eslettuceontomatoonprice4.99 HTTP/1.0
When the user submits a form, the browser sends
an HTTP request over the Internet to a server,
and this request passes the value of every
control in the form
The server sends an HTTP response to the browser
containing HTML text
HTTP is the protocol or language that takes
care of communication between the user agent and
the Web server.
9
HTTP GET Request and Parameters
HTML Forms (W3Schools, Schultz)?

• method"get"
• The name of every form control and its value is
  appended to the URL of the form handler as part
  of the query string
• The form handler on the server can read and
  process the values of these query string
  parameters

Ampersands separate the name-value pairs
URL of the form handler
GET /createOrder.aspx?quantity1meatHamcheesey
eslettuceontomatoonprice4.99 HTTP/1.0
Query string
(visible in the navigation field of the browser)
Question mark follows the URL
quantity1
Name of the control
Value entered by user
10
HTTP POST Request and Parameters
HTML Forms (Spainhour, Schultz)?

• method"post"
• The name of every form control and its value is
  placed in the body of the request
• The form handler on the server can read and
  process the values of these parameters in the
  body of the request
• The name-value pairs are not visible in the
  navigation field of the browser

Request headers
URL of the form handler
POST /createOrder.aspx HTTP/1.0 User-Agent
Mozilla/2.02Gold (WinNT I) Accept image/gif,
image/x-xbitmap, image/jpeg, / Host
www.oreilly.com Content-type application/x-www-fo
rm-urlencoded Content-length 62 quantity1meat
Hamcheeseyeslettuceontomatoonprice4.99
Body section
11
Some Useful Form Controls
HTML Forms (W3Schools, Schultz)?

• input element
• text
• checkbox
• radio
• submit
• button
• hidden
• password

• button element
• select element
• textarea element

12
input Elementtype"text"
HTML Forms (W3Schools, Schultz)?

• Creates a single-line text field where the user
  can enter data by typing
• An empty element

Identifies this control so that it can be
associated with its value when submitted
Size is in characters
ltinput type"text" name"quantity" size"10"/gt
ltinput type"text" name"price" size"6"
readonly"readonly" value"4.99"/gt
This value is preset and cannot be modified by
the user
A single-line text field
13
input Elementtype"checkbox"
HTML Forms (W3Schools, Schultz)?

• Creates a small, clickable square for selecting
  multiple options
• When checked, the value is on when unchecked
  the name is not present
• An empty element

It will be checked by default
The value of the label element
The label element adds a label to the element
that is identified by its for attribute
ltlabel for"lettuceid"gt ltinput type"checkbox"
name"lettuce" id"lettuceid" checked"checked"/gt
Lettuce lt/labelgt
A checkbox with a label
14
input Elementtype"radio"
HTML Forms (W3Schools, Schultz)?

• Only one option in a set can be selected
• All radio input elements in the same set must
  have the same name
• Each one should have a different value and label

Both have the same name
Each has a different value
ltlabel for"cheese"gt ltinput type"radio"
name"cheese" id"cheese" value"yes"
checked"checked"/gt Cheese lt/labelgt ltbr/gt ltlabel
for"nocheese"gt ltinput type"radio"
name"cheese" id"nocheese" value"no"/gt No
cheese lt/labelgt
Two radio buttons with labels
15
input Elementtype"submit"
HTML Forms (W3Schools, Schultz)?

• Creates a button that submits all the data in the
  form to the server
• Will submit only the data for the particular form
  element that contains it

Specifies what happens when the submit occurs
ltform action"createOrder.aspx" method"post"gt
lt!-- Data for all controls in this form element
will be submitted --gt ltinput type"submit"
value"Create Order"/gt lt/formgt
Sets the text displayed on the button
The submit button
16
input Elementtype"button"
HTML Forms (Schultz)?

• Creates a button that is clickable, but has no
  function
• Can be used to trigger a client-side event

ltinput type"button" value"Click Me"/gt
Sets the text displayed on the button
17
button Element
HTML Forms (W3Schools, Schultz)?

• Can work like the submit type input element
• It is not an empty element, and must contain the
  text to be displayed on it
• Some browsers will not allow the input button to
  be styled with CSS, but will allow the button
  element to be styled

ltform action"createOrder.aspx" method"post"gt
lt!-- Data for all controls in this form element
will be submitted --gt ltbutton type"submit"
name"submit"gtCreate Orderlt/buttongt lt/formgt
Sets the text displayed on the button
18
input Elementtype"hidden"
HTML Forms (W3Schools, Schultz)?

• Not displayed on the form
• Its name and value will be passed to the form
  handler in the HTTP request whenever the form is
  submitted
• For passing data that is useful to the form
  handler, but which the user does not have to see

ltform action"createOrder.aspx" method"post"gt
ltinput type"hidden" name"location"
value"UHCL"/gt lt!-- Data for all controls in
this form element will be submitted --gt ltinput
type"submit" value"Create Order"/gt lt/formgt
19
select Elementand the option Element
HTML Forms (W3Schools, Schultz)?

• The selection control is a menu of options
• Can be displayed as either a drop-down menu or a
  list
• Must contain at least one option element

The value sent to the form handler when this
option is selected if not present, then the
value is the text that is displayed
Identifies this control in the data sent to the
form handler
ltselect name"meat"gt ltoption value"Ham"
selected"selected"gtHamlt/optiongt ltoption
value"RoastBeef"gtRoast beeflt/optiongt lt/selectgt
Sets this option as the default selection
A select element displayed as a drop-down menu
20
textarea Element
HTML Forms (W3Schools, Schultz)?

• Creates a mulitline field for the user to enter
  text
• Size is set by the rows and columns
  attributes
• It cannot be an empty element, and it must have a
  closing tag

Closing tag is required
ltlabel for"messageid"gtMessagelt/labelgt ltbr
/gt lttextarea name"message" rows"6" columns"50"
id"messageid"gtlt/textareagt
Default text can be added here
The text typed here by the user is sent to the
form handler as the value of this element
21
fieldset Elementand the legend Element
HTML Forms (W3Schools, Schultz)?

• Groups a set of related controls
• Must contain a legend element
• Helps to organize your form

ltfieldsetgt ltlegendgtVeggieslt/legendgt ltlabel
for"lettuceid"gt ltinput type"checkbox"
name"lettuce" id"lettuceid" checked"checked"/gt
Lettuce lt/labelgt ltbr/gt ltlabel
for"tomatoid"gt ltinput type"checkbox"
name"tomato" id"tomatoid" checked"checked"/gt
Tomato lt/labelgt ltbr/gt ltlabel
for"onionid"gt ltinput type"checkbox"
name"onion" id"onionid"/gt Onion
lt/labelgt lt/fieldsetgt
A fieldset element is usually displayed with a
border surrounding the related controls
22
References

• Schultz, David and Craig Cook, Beginning HTML
  with CSS and XHTML Modern Guide and Reference.
  Apress, 2007.
• Spainhour, Stephen and Robert Eckstein. Webmaster
  in a Nutshell, 3rd Edition. O'Reilly, 2002.
• W3Schools Online Web Tutorials. HTML Forms and
  Input. Online. Available http//www.w3schools
  .com/html/html_forms.asp
• W3Schools Online Web Tutorials. TCP/IP
  Protocols. Online. Available
  http//www.w3schools.com/tcpip/tcpip_protocols.asp