Capturing user input:

Using HTML FORMs

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

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=president@whitehouse.gov

• 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 across 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 input boxes is still empty, a warning window should pop-up

Writing the event-handler• There are two approaches to writing event handlers

– the old (Microsoft) way;

– The W3C-compatible way

• We will look at the Microsoft way first

• And then look at the W3C way

The old (Microsoft) way• 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

The W3C way• We need to be able to refer to the input elements on the

form in order to see if they are empty or not

• To refer to the various inputs, we must be able to use the getElementById method, so we must give id attributes to the input elements

• Since all id attributes must be unique, we do not need to refer to the form at all, so it does not need an id attribute

Further revised 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 id=name> </p>

<p> Please enter your email address: <input type=text name=email id=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() { var name= document.getElementById(‘name’); var email= document.getElementById(‘email’); if (name.value=='') { alert("Name is empty") } ; if (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

Alternative specification

<script>

function checkApplication()

{if (document.getElementById(‘name’).value=='')

{ alert("Name is empty") } ;

if (document.getElementById(’email’).value=='')

{ alert("Email address is empty") }

}

</script>