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=
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
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.
General form <html><head> <title>My Page</title></head><body> <!– HTML statements --> <form> <!-- Form fields and HTML --> </form> <!-- HTML --></body> </html>
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
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>
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
Text Box <input type=“textbox” size= maxlength= name= value= align= tabindex= >
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
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>
Password Field password size= maxlength= name= value= align= tabindex =
Password Example <form name="myform" action=“URL" method="POST">Enter Password : <input type="password" size="25"><br><br> </form>
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>
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>
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
Option <select> <option>AL</option> <option>AK</option> <option>AZ</option> <option>NY</option> <option>OR</option> <option>WA</option> </select>
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>
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">
Reset button • The entries are reset to the default values <input type="submit" value=“Click me!"> <input type="reset" value="Reset">
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.
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.
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.
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.
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
Text box • Have the visitor to enter text and send it to you. • Example: Name, address, phone#
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.
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.
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.
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
Password box • Double click the TextBox. • Check Passwordfield to yes.
Check boxes • Choose an area. • Click Insert. • Click Form. • Click Checkbox. • You can check default box.
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.
Combo Box (Drop-down box) • Insert Form DropDown Box • Right-Click Form Properties • Fill in stuff • Click inside the ComboBox • Add elements
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.
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
Display Name • Enter display name • This name should match the label you gave this text field on Web page
Validating Combo box • Validating Combo box • Validating Option Buttons
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?
Validation Exercise • First Name – Only alphabetic characters • Last Name – Only alphabetic characters • Phone # - Only digits • State – 2 chars • Zip – 5 digits
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
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.
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.
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
Using Scripts • So far, we have been using: • We may decide to use other ways of sending result.
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.