the conditional statement general form: if ( ) { consequent-action-list } actual example: if...
TRANSCRIPT
The conditional statement
• General form:
if ( <condition> )
{ consequent-action-list }
• Actual Example: if (applicationForm.name.value= ='')
{ alert("Name is empty") }
Conditions• Many forms are possible. Equality is one
type
• General form of equality condition:
<expression> = = <value>
• Actual Example: applicationForm.name.value= ='’
• Note that, in conditions, equality is written as two = characters, that is as = =
More on conditions• Besides = = (for equality) we can use these
other types of comparison operators in conditions:!= not equal
< less than
> greater than
<= less than or equal to
>= greater than or equal to
More on conditions• We can also build compound conditions
using the following logical operators:&& logical and
|| logical or
! logical not
• Examples:applnForm.name.value = = ‘Fred’ || applnForm.name.value==‘Tom’
applnForm.age.value >= 16 && applnForm.age.value <= 20
Alert actions
• General form of alert action:
alert(<expression>)
• Actual Examples:
alert(“Name is empty”)
alert(applicationForm.name.value)
Complete docmn’t spec (Part I)<HTML>
<HEAD>
<TITLE> Membership Application Form </TITLE>
<STYLE>
FORM {BACKGROUND-COLOR : red; PADDING : 0.2in}
FIELDSET {PADDING : 0.2in}
BUTTON {MARGIN : 0.1in}
</STYLE>
<SCRIPT>
function checkApplication()
{if (applicationForm.name.value=='')
{ alert("Name is empty") } ;
if (applicationForm.email.value=='')
{ alert("Email address is empty") } }
</SCRIPT>
</HEAD>
Complete docmn’t spec (Part II)<BODY>
<P>
If you want to join our club,
complete the form below and we will get back to you.
</P>
<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>
Complete docmn’t spec (Part III)<FIELDSET>
<LEGEND>Form Submission</LEGEND>
<P><BUTTON TYPE=button onClick='checkApplication()'>
Check application</BUTTON>
<BUTTON TYPE=submit>Submit application</BUTTON>
</P>
</FIELDSET>
</FORM>
</BODY>
</HTML>
The SIZE attribute• In the examples so far, INPUT elements of TYPE=text
were given, on the form, a user-input box of a default size
• You can, however, specify the exact size you want, by using the attribute SIZE
• Examples:
<INPUT TYPE=text NAME=name SIZE=10>
<INPUT TYPE=text NAME=email SIZE=40>
• You can see the effect of these size specifications on the next slide
• WARNING: Microsoft Internet Explorer 5.0 actually makes user-input boxes one character longer than your specified size! Navigator 4.08 does not -- but, then again, it does not yet handle fieldsets either!
Length of user-input versus size of user-input box
• The user’s input is not restricted to the size of the user-input box
• On the next four slides, you can see, from the server-side responses, that the user input names which were much longer than the user-input box
User’s input exceeds default size of user-input box
Here we can see how long the user’s name really was
User’s input can exceed a box of specified SIZE too:
Again, we see the full-name:
We can, however, impose an upper-limit on the user’s input:
• We can use the MAXLENGTH attribute
• Example<INPUT TYPE=text NAME=localPhoneNumber
SIZE=6 MAXLENGTH=6>
• This is used on the next slide:– when the user tries to input more than 6
characters in this box the browser refuses to accept them (even though the form shows the box as longer than 6 characters!)
More types of INPUT elements• We have already seen INPUT elements of TYPE=text
• But there are other TYPEs of INPUT element. The full list of types is:
text password checkbox radio submitsubmit resetreset file hidden image buttonbutton
• INPUT elements of TYPE=password are similar to elements of TYPE=text -- the only difference is that the user’s input is echoed as so-called “masking” characters
• Example:<INPUT TYPE=password NAME=desiredPassword>
• This is used on next slide
Of course, the server does not send the password back:
INPUTs of TYPE=checkbox• An INPUT element of TYPE=checkbox produces a little box
into which the user can place a mark to indicate a desire to select the value that is associated with the element
• This type of element must have a VALUE attribute to specify the associated value
• Example
<INPUT TYPE=checkbox NAME=colour VALUE=navyBlue>
• If the user places a in the box produced by this element the server-side program would be told that the user selected navyBlue as a colour
• Three check-boxes are used on the next slide
Using the checkboxes
• By clicking on one or more of these checkboxes, the user can select one or more T-shirts that he wants to order
Form Specification:<FORM METHOD="post" ACTION="/cgi-bin/tshirts.cgi">
<FIELDSET>
<LEGEND>Order</LEGEND>
<P> What is your name? <INPUT TYPE=text NAME=name SIZE=10> </P>
<P> Please select which style(s) of T-shirt you want: </P>
<UL>
<LI> <INPUT TYPE=checkbox NAME=products VALUE=Batman> Batman's cloak </LI>
<LI> <INPUT TYPE=checkbox NAME=products VALUE=Superman> Superman’s cloak</LI>
<LI> <INPUT TYPE=checkbox NAME=products VALUE="Dr. Who"> Dr. Who's coat</LI>
</UL>
</FIELDSET>
<FIELDSET>
<LEGEND>Form Submission</LEGEND>
<P> <BUTTON TYPE=submit>Submit order</BUTTON> </P>
</FIELDSET>
</FORM>
Oh, by the way:• On the screen below, we eliminate list “bullets” by
the following line in a stylesheetLI {LIST-STYLE-TYPE : none}
Using text with checkboxes• You must use text with checkboxes
– otherwise, the user will not know what he is selecting
– this is because the VALUE associated with the checkbox is not printed by a browser
• Example:<INPUT TYPE=checkbox NAME=products VALUE=Batman> Batman's cloak
• The user sees Batman's cloak in the browser beside the checkbox
Multiple checkboxes with same NAME
• Notice that we can have multiple checkboxes with the same name:
<UL>
<LI> <INPUT TYPE=checkbox NAME=products VALUE=Batman> Batman's cloak </LI>
<LI> <INPUT TYPE=checkbox NAME=products VALUE=Superman> Superman’s cloak</LI>
<LI> <INPUT TYPE=checkbox NAME=products VALUE="Dr. Who"> Dr. Who's coat</LI>
</UL>
• If the user selects more than one checkbox with the same name, several equations involving this name are sent to the server-side program, e.g.:products=Batman
products=Superman
Default selection of checkboxes
• The web page on the next slide is trying to encourage the user to buy the Superman T-shirt
• It does so by “pre-selecting” the checkbox for this T-shirt and by having some associated “pushy” text
More on default selection • A checkbox is preselected by using the word
CHECKED in the INPUT element:<UL>
<LI> <INPUT TYPE=checkbox NAME=products VALUE=Batman> Batman's cloak </LI>
<LI> <INPUT TYPE=checkbox NAME=products VALUE=Superman CHECKED>
Superman's cloak (our best-selling item)</LI>
<LI> <INPUT TYPE=checkbox NAME=products VALUE="Dr. Who"> Dr. Who's coat</LI>
</UL>
• The user can, of course, remove the from a checkbox by clicking on the box
INPUT elements of TYPE=radio• The word radio derives from the concept of
“radio buttons” -- the station selection buttons on car-radios
• Properties of radio buttons:– they represent alternatives– only one alternative can be selected– selecting one alternative has the side-effect of
automatically de-selecting any previous selection
• INPUT elements of TYPE=radio have the same properties
More on INPUT elements of TYPE=radio
• The following slide shows a radio button version of the previous order form
• Now the user can buy only one T-shirt
Suppose the user has selected the Batman T-shirt
If he now clicks the Dr. Who button, Batman is deselected
Implementation of the above:
<UL>
<LI> <INPUT TYPE=radio NAME=products VALUE=Batman> Batman's cloak </LI>
<LI> <INPUT TYPE=radio NAME=products VALUE=Superman> Superman's cloak</LI>
<LI> <INPUT TYPE=radio NAME=products VALUE="Dr. Who"> Dr. Who's coat</LI>
</UL>
Preselection of radio buttons• Just as checkboxes can be preselected, one radio
button in a group which all have the same NAME can be preselected
• HOWEVER,– more than one checkbox can be preselected– but ONLY ONE radio button can be preselected
Example<UL>
<LI> <INPUT TYPE=radio NAME=products VALUE=Batman> Batman's cloak </LI>
<LI> <INPUT TYPE=radio NAME=products VALUE=Superman CHECKED>
Superman's cloak (our best-selling item)</LI>
<LI> <INPUT TYPE=radio NAME=products VALUE="Dr. Who"> Dr. Who's coat</LI>
</UL>
Other types of INPUT element
• There are some types of INPUT element that we have not considered:– TYPE=hidden – TYPE=file – TYPE=image
• They have their uses but are too specialized to be considered here
• You should study their uses yourself
Cs 3314 got here on 5 nov 2005still have to discuss hidden elements
Other user-input elements
• So far we have considered two classes of user-input elements: – the BUTTON element– the INPUT element
• There are two other kinds:– the SELECT element – the TEXTAREA element