Capturing user input:

1. Capturing user input: Using HTML FORMs

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

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

5. Say he submits the data below:

6. He gets the personalized reply below from the web site:

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

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

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

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

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

12. Example • The form below has one heading and two fieldsets • Each fieldset has a legend which is printed in the border around the fieldset

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

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

15. 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 submitreset file hidden image button • 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

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

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

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

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

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

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

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

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

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

26. Buttons are too close:

27. Improve this in stylesheet <style> form {background-color : red; padding : 0.2in} fieldset {padding : 0.2in} button {margin : 0.1in} </style>

28. What should happen when the ‘checkApplication’ function is executed • If either of the input boxes is still empty, a warning window should pop-up

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

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

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

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

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

36. 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=nameid=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>

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

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