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 ComponentsRadio button

Check box General Buttons

Drop down menu

Reset and submit

The Input Tag

• <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" />

Use this tag to create most of the GUI components

Note: hidden components are useful for adding data to a form thata user does not have to enter, like time of day.

Creating a group of radio buttons

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" />

Notes1.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<input type="checkbox" name="math" checked="checked" />

english<input type="checkbox" name="english/>

science<input type="checkbox" name="science"/>

Notes

1. You can click more than one check box.

2. The name attribute can have different values

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

1. The <select> tag must have a name attribute, or it will not submit

2. You need the value attribute for proper form submission.

cokePepsiDr. Pepper

Text areas and text components<input type="text" size="10" name="firstname" /><br /><textarea rows="3" cols="20" name="comments"></textarea>

Notes1. 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 <textarea> tag, with its closing counterpart

4. The value attributes for these components contains the data the user types.

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

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>

Notes1. Forms can submit by email (above example), to a server

side program, or be processed locally with JavaScript2. The reset button clears all user input; the submit button

sends the form for processing3. IMPORTANT: Any component missing a name attribute

WILL NOT SUBMIT

Submitting to Server Side Programs<form method="post" enctype="text/plain"

action="http://www.mydomain.com/handler.cgi">

Advantages over e-mail submission1. It does not matter if users have e-mail set up2. Some browsers output warning messages that will

discourage users from submitting3. Submits automatically without bringing up the e-mail

program

Another consideration1. 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• <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

2.The & character is a delimiter between pairs

3.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

3.e-mail 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 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.

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

Basic Control Structures

Sequence Structure1. Do this2. Do that3. Do something else4. Do that again5. Do another thing

Condition or Transfer StructureIF this THEN do thatELSE 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 more2. Document Level Script

– Use the <script> tag– This differs from CSS in that the <script> tag can go

anywhere in a document3. 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.

Similar concepts to CSS style sheets

Starting a Script

• 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">

Exampleshttp://cs.sou.edu/~harveyd/classes/cs210/examples/week5/alertHtml.htm

http://cs.sou.edu/~harveyd/classes/cs210/examples/week5/alertScriptHtml.htm

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

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

Key Definition: A string is a sequence of letters

http://cs.sou.edu/~harveyd/classes/cs210/examples/week5/whoThere.htm

Note: Always end JavaScript statements with a semicolonNote: Always enclose strings of text with single or double quotesNote: The \' illustrates a break sequence (we really mean ').

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?

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)

JavaScript and submitting forms<form method="post" enctype="text/plain"

action=http://www.mydomain.com/handler.cgionsubmit="alert('I\'ll not submit'); return false;" >

<input type="text" name= "data" size="5" /><input type="submit" /></form>

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