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: and Among the attributes of a 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 ….

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 = 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: and 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: Membership Application Form Contact Information …... Form Submission …...

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

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... Membership Application Form Contact Information What is your name? Please enter your address: Form Submission …...

The BUTTON element BUTTON elements are rendered as button on which the user can click the mouse a BUTTON element is delimited by a tag and a tag The text between these tags is engraved on the button The 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: Membership Application Form Contact Information What is your name? Please enter your address: Form Submission Submit application

Stylesheet specification of FORMs rendering FORMs, of course, can be handled in stylesheets, using the usual features Example: FORM {BACKGROUND-COLOR : red; PADDING : 0.2in} FIELDSET {PADDING : 0.2in}

Complete Docum’nt Spec (Part I) Membership Application Form FORM {BACKGROUND-COLOR : red; PADDING : 0.2in} FIELDSET {PADDING : 0.2in} If you want to join our club, complete the form below and we will get back to you.

Complete Docm’nt Spec (Part II) Membership Application Form Contact Information What is your name? Please enter your address: Form Submission Submit application

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: Membership Application Form Contact Information What is your name? Please enter your address: Form Submission Check application Submit application

Buttons are too close:

Improve this in stylesheet FORM {BACKGROUND-COLOR : red; PADDING : 0.2in} FIELDSET {PADDING : 0.2in} BUTTON {MARGIN : 0.1in}

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: Membership Application Form Contact Information What is your name? Please enter your address: Form Submission Check application Submit application

Specifying the event-handling function We insert a SCRIPT containing the function definition in the document HEAD: function checkApplication() {if (applicationForm.name.value=='') { alert("Name is empty") } ; if (applicationForm. .value=='') { alert(" address is empty") } } 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