forms applications n.
Skip this Video
Loading SlideShow in 5 Seconds..
Forms -- Applications – PowerPoint Presentation
Download Presentation
Forms -- Applications –

Forms -- Applications –

76 Vues Download Presentation
Télécharger la présentation

Forms -- Applications –

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Forms-- Applications – • ID and password • Solicit survey information from the customers. • Sell items. • Solicit other pertinent information.

  2. Examples

  3. Forms • Form fields are objects that allow the visitor to enter information e.g.) text boxes, drop-down menus, check boxes, or radio buttons, Dropdown Menus…. • When the visitor clicks a submit button, the content of the form is usually sent to a program that runs on the server. However, there are exceptions. • Javascript is sometimes used to create magic with form fields. An example could be when turning options in a drop-down menu into normal links.

  4. Google Example • The search words are sent to a program on the server. • The program will search a database for matches. • The program creates a webpage with the results. • The results webpage is sent back to the visitor

  5. ID/Password Example • The ID and password are sent to a program on the server. • The program will search a database for valid entries. • If the entry is valid, the visitor is sent to the protected page. • If the entry is invalid the visitor is sent to a "failure" page.

  6. General form <html><head> <title>My Page</title></head><body> <!– HTML statements --> <form> <!-- Form fields and HTML --> </form> <!-- HTML --></body> </html>

  7. General form • To let the browser know where to send the content we add these properties to the <form> tag: • action= address of CGI program • method =post or method=get

  8. General form <html><head><title>My Page</title></head> <body><!– HTML statements --><form method="post" action=“addresOfCGI"><!-- Form fields and HTML --></form> <!-- HTML --> </body> </html>

  9. Form Fields • Text field • Password field • Hidden field • Text area • Check box • Radio button • Drop-down menu (Combo box) • Submit button • Reset button • Image button

  10. Text Box <input type=“textbox”   size=  maxlength=  name=  value=  align=  tabindex= >

  11. Text Box size - width of the field. number of visible characters maxlength - maximum length of the field. name - an internal name to the field so the program that handles the form can identify the fields. value - defines what will appear in the box as the default value. align - defines how the field is aligned.Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM. The alignments are explained in the image section. You can learn about the different alignments tabindex - defines in which order the different fields should be activated when the visitor clicks the tab key

  12. Text Box Example <form name="myform" action=“address of cgi" method="POST"><br><br> <input type="text" size="25" value="Enter your name here!"><br><br> </form>

  13. Password Field password   size=  maxlength=  name=  value=  align=  tabindex =

  14. Password Example <form name="myform" action=“URL" method="POST">Enter Password : <input type="password" size="25"><br><br> </form>

  15. Check Box <form name="myform" action=“URL for cgi" method="POST"> I am interested in: <br> <input type="checkbox" name="option1" value=“Movies"> Movies <br><input type="checkbox" name="option2" value=“Books" checked> Books <br><input type="checkbox" name="option3" value=“Music"> Music <br><br> </form>

  16. Radio Buttons <form name="myform" action=“URL for cgi" method="POST"> <input type=“radio " name="option1" value=“Movies“ checked > Movies <br><input type=“radio" name="option2" value=“Books" > Books <br><input type=“radio" name="option3" value=“Music"> Music <br><br> </form>

  17. Combo Box- DropDown Menu - • Probably the most flexible objects you can add to your forms. • Can serve the same purpose as radio buttons (one selection only) or check boxes (multiple selections allowed). • Advantage, compared to radio buttons or check boxes, is that it takes up less space. • Disadvantage - people can't see all options in the menu right away. • When you have a fixed set of selections to choose from, e.g., state, then drop-down menu is the way to go: • No typing is required • Therefore minimizes typos

  18. Combo Box- DropDown Menu -

  19. Option <select>  <option>AL</option>  <option>AK</option>  <option>AZ</option>  <option>NY</option>  <option>OR</option>  <option>WA</option> </select>

  20. Option <form name="myform" action=“yourCgi.cgi" method="POST"><select name=“State">  <option value =“alabama”>AL</option>  <option value =“arkansas”>AK</option>  <option value =“arizona”>AZ</option>  <option >NY</option>  <option>OR</option>  <option selected >WA</option> </select> </form>

  21. Submit • When a visitor clicks a submit button, the form is sent to the address specified in the action setting of the <form> tag <input type="submit" value=“Submit">

  22. Reset button • The entries are reset to the default values <input type="submit" value=“Click me!"> <input type="reset" value="Reset">

  23. CGI Scripts • When your form is submitted, you need a program that can receive the information and do something with it. • Such programs are sometimes referred to as CGI programs. • CGI stands for Common Gateway Interface, which is a computer lingo for a program that translates information. • This translation is necessary because the server might be a UNIX machine while the visitor might be sending information from a Windows platform or vice versa.

  24. Back to form • When a form is submitted, all fields on the form are being sent. • The <form> tag tells the browser where the form starts and ends. You can add all kinds of HTML tags between the <form> and </form> tags.

  25. To set up a form with FrontPage • Click the location on the page where you want the form to be. • Click Insert. • Click Form. • If you don’t like the word on the button, double click the button and change it.

  26. To create a form menu bar • If you are going to use the form menu a lot, like we will be doing today, create a form menu as following Insert  Form • Form menu will appear • Position your curser to the top dotted line and drag it to where you want.

  27. Process of creating form elements • Click inside a form where you want to place the element • Select the form element (Text box, Check box, etc.) • Name the element • Set element properties • Enter a text label for the field

  28. Text box • Have the visitor to enter text and send it to you. • Example: Name, address, phone#

  29. To add a text box • Click where you want the form to be. • Type the label for the box. • Click Insert. • Click Form. • Click Textbox. • To change the Textbox properties, double click the box. • Also set initial value if a default value is needed.

  30. OK, I set up a form. Now, what? • Now that the visitors sent me a message, what do I do? • Store in a file and/or process • Store in a database and/or process • Send it to a designated email. • Send an acknowledgement.

  31. Accessing form results • Click Insert. • Click Form. • Click Form Properties. • Form Properties dialog box appears. • Click Send to. • For now, let’s not store it in a file. Delete the text area • Enter email address.

  32. Storing in a file • Click Insert. • Click Form. • Click Form Properties. • Form Properties dialog box appears. • Click Send to. • Give a file name. • To access:

  33. Password box • Double click the TextBox. • Check Passwordfield to yes.

  34. Check boxes • Choose an area. • Click Insert. • Click Form. • Click Checkbox. • You can check default box.

  35. Option button (Radio button) • Choose an area. • Click Insert. • Click Form. • Click Option button. • You can check default box. • Double click the Option button if you want to change the properties.

  36. Combo Box (Drop-down box) • Insert  Form  DropDown Box • Right-Click  Form Properties • Fill in stuff • Click inside the ComboBox • Add elements

  37. File upload • Suppose you want visitors to send you their resumes, business plans, pictures, or other big items. • Use File Upload • Insert • Form • FileUpload • FrontPage will pop up a Windows Explorer for you to designate the destination folder for the file. • If you don’t want anybody to browse the folder, choose _private.

  38. Validation • Select the element, say text box, to validate • Double click the element • the element properties box appears • Click Validate • Select Data types • Letters • Digits • Whitespace • Other. e.g.) Allow other special characters (e.g., @) • Integer • Number

  39. Display Name • Enter display name • This name should match the label you gave this text field on Web page

  40. Validating Combo box • Validating Combo box • Validating Option Buttons

  41. Validating Text box • Let’s first look at the following example: form1 • Try Dogs - Pass Boys - Pass Combo - Pass dogs - Fail (too large) B - Fail (too small) 5 - Fail (Numeric) Why?

  42. Validation criteria we used

  43. Validation Exercise • First Name – Only alphabetic characters • Last Name – Only alphabetic characters • Phone # - Only digits • State – 2 chars • Zip – 5 digits

  44. Saving Form Results • Email • Within your website by name • Default to _private • Public – Create the file as an HTML file and store it in Browser-readable folder • Database • CGI file

  45. Confirmation page • So, now the user filled in information as requested by the form. How does he know that the form has been properly sent?Confirmation • FrontPage automatically creates one. • You can create a custom Confirmation Page.

  46. Creating Confirmation Page • New Page • Insert web component • Advanced Controls • Confirmation Field • Finish • Type the name assigned to the item. • OK • The name of the item appears in brackets • When the visitors view the confirmation page, the name of the item will be replaced with the information they entered in the form.

  47. Assign a confirmation page to a form • Click anywhere inside the form • Click Insert • Form • Form Properties • Options • Confirmation Page tab • Browse to locate the confirmation page that you created • Click confirmation page you want to use. • OK

  48. Using Scripts • So far, we have been using: • We may decide to use other ways of sending result.

  49. Using Scripts

  50. Other ways of sending results • Send to many email addresses • Have the confirmation page total figures a visitor’s entered in the form • Or do other fancy stuff. • Most flexible of all.