Capturing user input:
Using HTML FORMs
CS4320 got here on 27/11/2003
User input
• Up till now, our HTML documents have all been directed at outputting information to the user
• However, some applications of HTML involve inputting information from the user – possibly, to tailor future output to the user– or to populate a database of user data
Example
• On the next slide, the web page shown contains a form that the user may complete in order to send some information to a club that he wants to join
• The form contains – two input boxes that the user can fill in and– a submit button that he can click on in order to
send his data to the club’s web site
Say he submits the data below:
He gets the personalized reply below from the web site:
How this is done:• There are two parts to what happens:
– When the user clicks on the submit button, the data on the form is sent to a “server-side” program at the club’s web-site
– The server-side program reads the data and writes a special HTML page which is sent back to the user’s browser
• We will not consider server-side programming at this stage -- it is a very large topic! We will focus on client-side activity
Specifying the form that the user fills in:
• In HTML, a form specification is delimited by two tags: <FORM> and </FORM>
• Among the attributes of a <FORM> tag, two are especially important:– the ACTION attribute specifies a URL for the
program to which the data given by the user is to be sent
– the METHOD attribute specifies the way in which the data are to be sent to this program
Example
• The (partial) form specification below says that the data must be sent by a method called “post” to a program called appln.cgi in the cgi-bin directory on the server where the document containing the form is stored
<FORM METHOD=“post” ACTION="/cgi-bin/appln.cgi">
….
</FORM>
METHODs for sending data
• There are two main METHODs:
– POST
– GET
• You can ignore the details of these methods for now
– they concern how the data is encoded when being transmitted across the Internet
– you just need to remember that, in both methods, the data are sent in the form of equations of the form
<name> = <value>
for example name=Bill
• We will use the POST method in our examples
Grouping the elements of a form• As well as user-inputs, we can have
headings etc. on a form
• It is usually convenient to organize the user-inputs into groups of related elements
• Such a group is called a FIELDSET:– a FIELDSET is delimited by two tags:
<FIELDSET> and </FIELDSET>
• Each FIELDSET can have a LEGEND (a title) which helps the user to understand the form
Example• The form below has one heading and two fieldsets• Each fieldset has a legend which is printed in the
border around the fieldset
Some more detail from the spec:
<FORM METHOD="post" ACTION="/cgi-bin/appln.cgi">
<H1> Membership Application Form</H1>
<FIELDSET>
<LEGEND>Contact Information</LEGEND>
… ...
</FIELDSET>
<FIELDSET>
<LEGEND>Form Submission</LEGEND>
… ...
</FIELDSET>
</FORM>
User-input elements
• Several different kinds of user-input element are possible on a form:BUTTON, INPUT, SELECT, TEXTAREA
• Only two main kinds are used on this form, – the INPUT element and– the BUTTON element
INPUT elements• An INPUT element has only one tag, the <INPUT> tag
• Every <INPUT> tag has at least one attribute: the TYPE attribute which can take one of many values:
text password checkbox radio submitsubmit resetreset file hidden image buttonbutton
• The “greyed” values above (submit, reset, button) are probably on the way out as HTML develops
• The other attributes that must be present depend of the value of the TYPE attribute – most, however, must have a NAME attribute and
– many must have a VALUE attribute
INPUT elements of TYPE=text
• INPUT elements whose TYPE attribute have the value text are rendered as boxes in which the user can type a sequence of characters
• INPUT elements whose TYPE attribute have one of the other values are rendered differently
Some more detail ...
<FORM METHOD="post" ACTION="/cgi-bin/appln.cgi">
<H1> Membership Application Form</H1>
<FIELDSET>
<LEGEND>Contact Information</LEGEND>
<P> What is your name? <INPUT TYPE=text NAME=name> </P>
<P> Please enter your email address: <INPUT TYPE=text NAME=email> </P>
</FIELDSET>
<FIELDSET>
<LEGEND>Form Submission</LEGEND>
… ...
</FIELDSET>
</FORM>
The BUTTON element• BUTTON elements are rendered as button on which the user
can click the mouse
• a BUTTON element is delimited by a <BUTTON> tag and a </BUTTON> tag
• The text between these tags is engraved on the button
• The <BUTTON> tag has a TYPE attribute which specifies what should happen when the user clicks on the button:
• TYPE=submit causes the user’s input to be sent to the program indicated in the FORM’s ACTION
• TYPE=reset causes the user’s input to be cleared so that he may correct some mistakes
• TYPE=button causes a client-side event-handler to be executed
The complete form specification:
<FORM METHOD="post" ACTION="/cgi-bin/appln.cgi">
<H1> Membership Application Form</H1>
<FIELDSET>
<LEGEND>Contact Information</LEGEND>
<P> What is your name? <INPUT TYPE=text NAME=name> </P>
<P> Please enter your email address: <INPUT TYPE=text NAME=email> </P>
</FIELDSET>
<FIELDSET>
<LEGEND>Form Submission</LEGEND>
<BUTTON TYPE=submit>Submit application</BUTTON>
</FIELDSET>
</FORM>
Stylesheet specification of FORMs rendering
• FORMs, of course, can be handled in stylesheets, using the usual features
• Example:<STYLE>
FORM {BACKGROUND-COLOR : red; PADDING : 0.2in}
FIELDSET {PADDING : 0.2in}
</STYLE>
Complete Docum’nt Spec (Part I)<HEAD>
<TITLE> Membership Application Form </TITLE>
<STYLE>
FORM {BACKGROUND-COLOR : red; PADDING : 0.2in}
FIELDSET {PADDING : 0.2in}
</STYLE>
</HEAD>
<BODY>
<P>
If you want to join our club,
complete the form below and we will get back to you.
</P>
Complete Docm’nt Spec (Part II)<FORM METHOD="post" ACTION="/cgi-bin/appln.cgi">
<H1> Membership Application Form</H1>
<FIELDSET>
<LEGEND>Contact Information</LEGEND>
<P> What is your name? <INPUT TYPE=text NAME=name> </P>
<P> Please enter your email address: <INPUT TYPE=text NAME=email> </P>
</FIELDSET>
<FIELDSET>
<LEGEND>Form Submission</LEGEND>
<P> <BUTTON TYPE=submit>Submit application</BUTTON> </P>
</FIELDSET>
</FORM>
</BODY>
</HTML>
Using a BUTTON element of TYPE=button
• On the next slide, there is an extra button element
• It is of TYPE=button because it is purely to enable a Javascript program to be executed so that a client-side check of the user’s data can be performed before the data are transmitted acros the Internet
Revised form specification:
<FORM METHOD="post" ACTION="/cgi-bin/appln.cgi">
<H1> Membership Application Form</H1>
<FIELDSET>
<LEGEND>Contact Information</LEGEND>
<P> What is your name? <INPUT TYPE=text NAME=name> </P>
<P> Please enter your email address: <INPUT TYPE=text NAME=email> </P>
</FIELDSET>
<FIELDSET>
<LEGEND>Form Submission</LEGEND>
<BUTTON TYPE=button onClick=‘checkApplication()’>Check application</BUTTON>
<BUTTON TYPE=submit>Submit application</BUTTON>
</FIELDSET>
</FORM>
Buttons are too close:
Improve this in stylesheet<STYLE>
FORM {BACKGROUND-COLOR : red; PADDING : 0.2in}
FIELDSET {PADDING : 0.2in}
BUTTON {MARGIN : 0.1in}
</STYLE>
What should happen when the ‘checkApplication’ function is
executed
• If either of the INPUTs is still empty, a warning window should pop-up
Writing the event-handler• We need to be able to refer to the INPUTs on the form in
order to see if they are empty or not
• Each INPUT has a NAME attribute so you might think that we could refer to the INPUTs directly by these NAMEs
• However, Javascript requires that we refer to a FORM and then to the INPUTs on the form
• So the FORM must have a NAME too
Further revised specification:
<FORM NAME=applicationForm METHOD="post" ACTION="/cgi-bin/appln.cgi">
<H1> Membership Application Form</H1>
<FIELDSET>
<LEGEND>Contact Information</LEGEND>
<P> What is your name? <INPUT TYPE=text NAME=name> </P>
<P> Please enter your email address: <INPUT TYPE=text NAME=email> </P>
</FIELDSET>
<FIELDSET>
<LEGEND>Form Submission</LEGEND>
<BUTTON TYPE=button onClick=‘checkApplication()’>Check application</BUTTON>
<BUTTON TYPE=submit>Submit application</BUTTON>
</FIELDSET>
</FORM>
Specifying the event-handling function
• We insert a SCRIPT containing the function definition in the document HEAD:
<SCRIPT>
function checkApplication()
{if (applicationForm.name.value=='')
{ alert("Name is empty") } ;
if (applicationForm.email.value=='')
{ alert("Email address is empty") }
}
</SCRIPT>
• It contains two conditional statements each of which checks whether one INPUT is empty and, if so, produces an alert saying so
Cs 3314 got here on 1 nov 2004