capturing user input n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Capturing user input: PowerPoint Presentation
Download Presentation
Capturing user input:

Loading in 2 Seconds...

play fullscreen
1 / 38

Capturing user input: - PowerPoint PPT Presentation


  • 110 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Capturing user input:' - willis


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
capturing user input

Capturing user input:

Using HTML FORMs

user input
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
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
how this is done
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
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
example1
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
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
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
example2
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
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
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
  • 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
input elements of type text
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
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
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
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
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
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
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
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
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>

improve this in stylesheet
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
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
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
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
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
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
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 specification1
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>

specifying the event handling function1
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
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>