1 / 26


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

Télécharger la présentation


An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  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

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

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

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

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

  19. 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">

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

  21. <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 ').

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

  23. 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)

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

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

More Related