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> What is your name? <INPUT TYPE=text NAME=name> Please enter your email address: <INPUT TYPE=text NAME=email> </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 submit reset file hidden image button 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> <LEGEND>Form Submission</LEGEND> <P> <BUTTON TYPE=submit>Submit order</BUTTON> </P> </FORM>
Oh, by the way: On the screen below, we eliminate list “bullets” by the following line in a stylesheet LI {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 2005 still 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