1 / 38

Capturing user input:

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

willis
Download Presentation

Capturing user input:

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

  4. Say he submits the data below:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  24. Buttons are too close:

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

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

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

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

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

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

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

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

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

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

More Related