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.

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

The Input Tag math yes Use this tag to create most of the GUI components Note: hidden components are useful for adding data to a form that a user does not have to enter, like time of day.

Creating a group of radio buttons yes no maybe Notes 1.Users can select ONLY one of a group of related ratio buttons. In the above example, clicking on 'no' will deselect 'yes' 2.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'. 3.The value attribute is needed to submit properly

Creating a Group of Check Boxes math english science Notes 1.You can click more than one check box. 2.The name attribute can have different values

Creating a Drop Down Menu coke Pepsi Dr. Pepper Notes 1.The tag must have a name attribute, or it will not submit 2.You need the value attribute for proper form submission. coke Pepsi Dr. Pepper

Text areas and text components Notes 1.Text components only allow users to enter one row of information; the size attribute specifies the width of the component 2.Text areas allow multiple rows using the rows. The cols attribute specifies the width of each row. 3.Text area components use the tag, with its closing counterpart 4.The value attributes for these components contains the data the user types.

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

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

Submitting to Server Side Programs Advantages over submission 1.It does not matter if users have set up 2.Some browsers output warning messages that will discourage users from submitting 3.Submits automatically without bringing up the program Another consideration 1.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

Common Gateway Interface (CGI) 1.GUI components submit as name=value pairs of data 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 2.The & character is a delimiter between pairs 3.The following is a CGI example: name=dan&group=yes&interest=high&area=oregon&info=co ol&20site++&site=http%3A%2F%2Fcs.sou.edu/~harveyd 3. programs show the CGI in a more readable form CGI is the protocol for sending Web information between computers

Processing Forms Locally 1.HTML can display forms. It cannot process them. 2.JavaScript can process forms locally 3.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 We need JavaScript!!

Important Reminders Regarding GUI Components Field without a name attribute will NOT submit to a server or to –Will Submit: –Will not submit: Radio buttons must have a value attribute for servers to parse correctly. – –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.

JavaScript can do more 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

Programming Languages First Generation: Machine Language –All ones and zeroes ( 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

Basic Control Structures Sequence Structure 1.Do this 2.Do that 3.Do something else 4.Do that again 5.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 All computer processing done this way

JavaScript verses Java 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 These languages have similar syntax, but are very different

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

Starting a Script The Script tag (To display a message in a dialog box) alert("HelloWorld!"); 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 Older deprecated version of the script tag. Do not use!! Examples

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

A JavaScript Example alert("HelloWorld!"); JavaScript Test alert("Who is there?"); First alert done alert("I\'m back!"); All done 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 ').

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

JavaScript and Radio Buttons Select a Soda Coke<input type="radio" name="group" onclick="alert('It\'s the real thing');" /> Pepsi<input type="radio" name="group" onclick="alert('the pepsi generation');"/> Dr. Pepper<input type="radio" name="group" onclick="alert('Be a pepper');"/> 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)

JavaScript and submitting forms <form method="post" enctype="text/plain" action= onsubmit="alert('I\'ll not submit'); return false;" > Notes 1.Note the single and double quotes and the escape sequence 2.Note the second statement. It stops the browser from submitting the form to the server. 3.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.

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