Download presentation
Presentation is loading. Please wait.
2
Capturing user input: Using HTML FORMs
3
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
4
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
6
Say he submits the data below:
7
He gets the personalized reply below from the web site:
8
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
9
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
10
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 ….
11
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 email=president@whitehouse.gov We will use the POST method in our examples
12
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
13
Example The form below has one heading and two fieldsets Each fieldset has a legend which is printed in the border around the fieldset
14
Some more detail from the spec: Membership Application Form Contact Information …... Form Submission …...
15
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
16
input elements
17
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
18
Some more detail... Membership Application Form Contact Information What is your name? Please enter your email address: Form Submission …...
19
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
20
The complete form specification: Membership Application Form Contact Information What is your name? Please enter your email address: Form Submission Submit application
21
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}
22
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.
23
Complete Docm’nt Spec (Part II) Membership Application Form Contact Information What is your name? Please enter your email address: Form Submission Submit application
24
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
26
Revised form specification: Membership Application Form Contact Information What is your name? Please enter your email address: Form Submission Check application Submit application
27
Buttons are too close:
28
Improve this in stylesheet form {background-color : red; padding : 0.2in} fieldset {padding : 0.2in} button {margin : 0.1in}
29
What should happen when the ‘checkApplication’ function is executed If either of the input boxes is still empty, a warning window should pop-up
32
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
33
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
34
Further revised specification: Membership Application Form Contact Information What is your name? Please enter your email address: Form Submission Check application Submit application
35
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.email.value=='') { alert("Email 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
36
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
37
Further revised specification: Membership Application Form Contact Information What is your name? Please enter your email address: Form Submission Check application Submit application
38
Specifying the event-handling function We insert a SCRIPT containing the function definition in the document HEAD: 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") } } It contains two conditional statements each of which checks whether one input is empty and, if so, produces an alert saying so
39
Alternative specification function checkApplication() {if (document.getElementById(‘name’).value=='') { alert("Name is empty") } ; if (document.getElementById(’email’).value=='') { alert("Email address is empty") } }
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.