1 / 55

Forms -- Applications –

Forms -- Applications – . ID and password Solicit survey information from the customers. Sell items. Solicit other pertinent information. Examples. www.google.com https://investing.schwab.com/trading/start https://secure.lenos.com/lenos/adobe/cs3seattle/areg.htm.asp?action =. Forms.

eliora
Download Presentation

Forms -- Applications –

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.

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 www.google.com https://investing.schwab.com/trading/start https://secure.lenos.com/lenos/adobe/cs3seattle/areg.htm.asp?action=

  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: http://homepages.stmartin.edu/fac_staff/klee/~private/FormResults.csv

  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.

More Related