Capturing user input: Using HTML FORMs CS4320 got here on 27/11/2003

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

[email protected]

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



<FIELDSET>


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


… ...

</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:



<FIELDSET>




</FIELDSET>

<FIELDSET>


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



</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">


<FIELDSET>




</FIELDSET>

<FIELDSET>


<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:



<FIELDSET>




</FIELDSET>

<FIELDSET>


<BUTTON TYPE=button onClick=‘checkApplication()’>Check application</BUTTON>


</FIELDSET>

</FORM>

Buttons are too close:

Improve this in stylesheet<STYLE>



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">


<FIELDSET>




</FIELDSET>

<FIELDSET>


<BUTTON TYPE=button onClick=‘checkApplication()’>Check 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

Documents

Capturing user input: Using HTML FORMs CS4320 got here on 27/11/2003