Forms

1. Forms • Most application interface with users through a Graphical User Interface (GUI) • GUI objects are components that allow users to enter information. They are largely standard across many modern applications • A form is a collection of GUI objects that work together to interact with a user and accomplish a task.

2. Examples of GUI Components Text  Text area  • Clickable Components Radio button  Check box General Buttons  Drop down menu  Reset and submit 

3. The Input Tag Use this tag to create most of the GUI components • <input type="button" value="button name" /> • <input type="text" size="10" /> • <input type="button" value ="click to display" /> • <input type="submit" value ="click to submit" /> • <input type="reset" value="click to reset" /> • <input type="hidden" value="user does not see this" /> • math<input type="checkbox" value="math" /> • yes<input type="radio" name="group" value="yes" /> Note: hidden components are useful for adding data to a form that a user does not have to enter, like time of day.

4. yes<input type="radio" name="group" value="yes" checked="checked" /> no<input type="radio" name="group" value = "no" /> maybe<input type="radio" name="group" value="maybe" /> Notes Users can select ONLY one of a group of related ratio buttons. In the above example, clicking on 'no' will deselect 'yes' The name attribute ties radio buttons together Related radio buttons set the name attribute value to the same text The above example uses the attribute value: 'group'. The value attribute is needed to submit properly Creating a group of radio buttons

5. math<input type="checkbox" name="math" checked="checked" /> english<input type="checkbox" name="english/> science<input type="checkbox" name="science"/> Notes You can click more than one check box. The name attribute can have different values Creating a Group of Check Boxes

6. coke Pepsi Dr. Pepper Creating a Drop Down Menu <select name="sodas" > <option value="coke">coke</option> <option value="Pepsi">Pepsi</option> <option value="Dr. Pepper">Dr. Pepper</option> </select> Notes • The <select> tag must have a name attribute, or it will not submit • You need the value attribute for proper form submission.

7. Text areas and text components <input type="text" size="10" name="firstname" /><br /> <textarea rows="3" cols="20" name="comments"> </textarea> Notes • Text components only allow users to enter one row of information; the size attribute specifies the width of the component • Text areas allow multiple rows using the rows. The cols attribute specifies the width of each row. • Text area components use the <textarea> tag, with its closing counterpart • The value attributes for these components contains the data the user types.

8. Constructing a form in HTML <form > . . . Insert all your form elements here . . . </form> Use the form tag makes all of the GUI elements are grouped together in a single unit

9. Submitting Forms <form method="post" enctype="text/plain" action="mailto:harveyd@sou.edu" > . . . Put all your GUI components here . . . <input type="reset" value="click to reset" /> <input type="submit" value="click to submit" /></form> Notes • Forms can submit by email (above example), to a server side program, or be processed locally with JavaScript • The reset button clears all user input; the submit button sends the form for processing • IMPORTANT: Any component missing a name attribute WILL NOT SUBMIT

10. Submitting to Server Side Programs <form method="post" enctype="text/plain" action="http://www.mydomain.com/handler.cgi"> Advantages over e-mail submission • It does not matter if users have e-mail set up • Some browsers output warning messages that will discourage users from submitting • Submits automatically without bringing up the e-mail program Another consideration • text/plain is not encrypted data. There are no security protections. For e-commerce applications, it is important to encrypt data so critical information like social security, and credit card numbers are not revealed to programs listening for malevolent reasons

11. Common Gateway Interface (CGI) CGI is the protocol for sending Web information between computers • GUI components submit as name=value pairs of data • <input type="radio" name="myGroup" value="myValue" /> submits as: myGroup=myValue • Every letter has a hexadecimal character code (ASCII). CGI replaces some characters with their ASCII codes. Spaces with %20, colon with %3A, and slashes with %2F. • The plus is for lines of text area components • The & character is a delimiter between pairs • The following is a CGI example: name=dan&group=yes&interest=high&area=oregon&info=cool&20site++&site=http%3A%2F%2Fcs.sou.edu/~harveyd • e-mail programs show the CGI in a more readable form

12. Processing Forms Locally We need JavaScript!! • HTML can display forms. It cannot process them. • JavaScript can process forms locally • Advantages of local processing • Lesson Internet traffic • Reduce the load on server computers • Greater security, since the local computer is not seen by other computers • Ensure that data sent to servers is correct before submitting

13. Important Reminders Regarding GUI Components • Field without a name attribute will NOT submit to a server or to e-mail • Will Submit: <input type="text" name="data" /> • Will not submit: <input type="text" /> • Radio buttons must have a value attribute for servers to parse correctly. • <input type="radio" name="rads" value="myRadio" /> • <input type="radio" name="rads" /> • The first will submit CGI: rads=myRadio, the second will submit rads=on. The server will not know which one of a group was selected. • All radio buttons of a group must have their name attributes set to the same thing. Otherwise, they will work like check boxes.

14. JavaScript begins where HTML leaves off How? Perform calculations Interacts with the user Adds to the browsing experience of the user Manipulates and alter the HTML tags, and what displays Examples Roll over images Games Process Forms at the client side Quotes of the day Slide Shows Today’s Date Calculators Online quizzes JavaScript can do more

16. Programming Languages • First Generation: Machine Language • All ones and zeroes (11100101 could be an instruction) • Second Generation: Assembly Language • One line of symbols for each machine language instruction • Examples: add ax, 14 or mov bx, 6 or cmp ax, bx • High Level: General Purpose Imperative (Java) • More readable to most human beings • Tell the computer step by step what to do and how to do it • Scripting: interpretive languages • Designed for a special purpose • JavaScript’s purpose is to work with HTML • Declarative: English like (SQL) • Special purpose • Tell the computer what to do, how is it’s problem Note: Visual Basic falls between high level and declarative

17. Basic Control Structures All computer processing done this way Sequence Structure • Do this • Do that • Do something else • Do that again • Do another thing Condition or Transfer Structure IF this THEN do that ELSE do the other thing Iteration or Loop • WHILE this true DO something • DO something UNTIL this false • FOR many times DO something

18. JavaScript verses Java These languages have similar syntax, but are very different • Java (General Purpose) • Create any computer applications • Create applets to work in their own browser window area • JavaScript (Special Purpose) • Mini-language that only executes in a browser • Initial purpose: Validate client-side forms • Present purpose: Enhance HTML capabilities • Netscape’s original name: LiveScript • Syntax is very similar to Java

19. Getting Into JavaScript Similar concepts to CSS style sheets • In-line Script • Use special event attributes, like onclick, onmouseover, onload, and many more • Document Level Script • Use the <script> tag • This differs from CSS in that the <script> tag can go anywhere in a document • External Script • Use the <script> tag and refer to an external javascript file. • This method is preferred because JavaScript will often make it impossible to validate the Web pages.

20. Starting a Script Examples http://cs.sou.edu/~harveyd/classes/cs210/examples/week5/alertHtml.htm http://cs.sou.edu/~harveyd/classes/cs210/examples/week5/alertScriptHtml.htm • The Script tag (To display a message in a dialog box) <script type="text/javascript"> alert("HelloWorld!"); </script> • We need the type attribute (identifies the scripting language) • perlScript, vbScript – Other client side scripts • php, asp – Other server side scripts • Script to an external file<script src="hello.js" type="text/javascript"></script> • Older deprecated version of the script tag. Do not use!!<script language="JavaScript1.3" type="text/javascript">

21. Words of Caution • Browsers try to do something when HTML syntax is wrong. They will just ignore what they do not understand • Browsers ignores CSS styles that it does not understand. • Browsers will ignore all JavaScript once there is even one error in syntax. • Be very careful about exact syntax, and save yourself lots of grief • If your script does not work, go to Firefox tools, and click on Error Console. It will point out the line of the error

22. <html> <head> <script type="text/javascript"> alert("HelloWorld!"); </script> </head> <body> JavaScript Test <script type="text/javascript"> alert("Who is there?"); </script> <br />First alert done <script type="text/javascript"> alert("I\'m back!"); </script> <br />All done </body> </html> A JavaScript Example http://cs.sou.edu/~harveyd/classes/cs210/examples/week5/whoThere.htm Key Definition: A string is a sequence of letters Note: Always end JavaScript statements with a semicolon Note: Always enclose strings of text with single or double quotes Note: The \' illustrates a break sequence (we really mean ').

23. JavaScriptwith Check Boxes <table> <tr><td align="center" colspan="3">Which Languages do you know?</td> </tr><tr> <td>JavaScript<input type="checkbox" onclick="alert('I know JavaScript');" /></td> <td>HTML<input type="checkbox" onclick="alert('I know HTML');"/></td> <td>XML<input type="checkbox" onclick="alert('I know XML');"/></td> </tr></table> Note: The JavaScript instruction executes when the user clicks the checkbox. Question: Why does the alert command use single quotes?

24. JavaScript and Radio Buttons <table> <tr> <td align="center" colspan="3"> Select a Soda</td> </tr><tr><td>Coke<input type="radio" name="group" onclick="alert('It\'s the real thing');" /></td> <td>Pepsi<input type="radio" name="group" onclick="alert('the pepsi generation');"/></td> <td>Dr. Pepper<input type="radio" name="group" onclick="alert('Be a pepper');"/></td> </tr></table> Question: The name attribute is the same for all radio buttons. Why? Question: Why does the alert commands use single quotes? Note: The \' is an escape sequence (we want the ' to be part of the string)

25. JavaScript and submitting forms <form method="post" enctype="text/plain" action=http://www.mydomain.com/handler.cgi onsubmit="alert('I\'ll not submit'); return false;" > <input type="text" name= "data" size="5" /> <input type="submit" /> </form> Notes • Note the single and double quotes and the escape sequence • Note the second statement. It stops the browser from submitting the form to the server. • JavaScript has a vocabulary of reserved words, and we will use more of them later. The word 'return' is our first. All JavaScript reserved words are lower case.

26. Review Questions • What is GUI stand for? • How do you create a drop down menu? • What is the principle difference between text and text area components? • What are the three ways a form can be processed? • What is a hidden form element? When would it be useful? • What is the disadvantages to submitting forms using the e-mail interface? • Why do radio buttons need the same name attribute values, and unique value attribute values? • What is CGI? • Why are tables often combined with forms? • What is JavaScript? • What is an escape sequence? • What does alert do in JavaScript? • How do you execute in-line JavaScript? • How do you link to an external JavaScript file? • Why is it wrong to use the language attribute?