210 likes | 340 Vues
This agenda outlines key topics for the Fall 2000 Class 7 at Brandeis University focusing on HTML forms and CGI scripting. Students will learn how to create forms that allow users to pass data to CGI scripts using various input types such as text fields, checkboxes, radio buttons, and submit/reset buttons. The discussion includes methods for validating forms, server-side includes, and different protocols for submitting data, including GET and POST. Practical examples and methods, such as uploading files and using hidden fields, will be demonstrated.
E N D
Internet / IntranetFall 2000 Class 7
Class 7 Agenda • Project / Homework Discussion • Forms • Validating Forms • Server Side Includes • Intro to CGI Brandeis University Internet/Intranet Spring 2000
HTML Forms • A Method to Allow Users to Pass Information to a CGI Script • Forms Allow Information to Be Entered Via: • Text Fields • Selectable Lists • Checkboxes • Radio Buttons • Submit / Reset Buttons • Each Field Is Identified by a Name • Optional Default Value • E.g. • <INPUT TYPE=“Text” Name=“Field1” Value=“Default”> • <INPUT TYPE=“Submit” Value=“Click Here”> Example Brandeis University Internet/Intranet Spring 2000
HTML Forms (2) • Submit Button Sends Data to CGI Script • Name/Value Pairs Separated By & • METHOD = “GET” • Uses HTTP Get Method • Parameters are Sent in URL • “Command Line” Arguments • Data Follows “?” • Easily Visible to Users • Some Servers Truncate the URL • Passed to Perl as QUERY_STRING Environment Variable • METHOD = “POST” • Data is Sent in HTTP Message Body • Passed to Perl as stdin • ACTION=“URL” • Identifies the Target URL • ACTION =“mailto:xxx” • Data is Mailed to Target email Address Example Brandeis University Internet/Intranet Spring 2000
Forms – Text Fields • Text Box: Type=Text • <INPUT Type=“Text” Name=“Field1” Value=“Default” Size=“15” Maxlength=“20”> • Size – Size of Text Box in Characters • Maxlength – The Maximum Number of Characters Allowed • Type=Password • Same, Except User Input is Echoed as *’s • Note: Password is Still Sent to Server in Plain Text Pwd Example Example Brandeis University Internet/Intranet Spring 2000
Forms – Multiline Text Fields • Multiline Text • <TEXTAREA Name=“Fname” Value=“Default” Rows=“5” Cols=“30” WRAP=“Virtual”> • Rows, Cols – The Size of the Field in Characters • Note: This Only Controls the Size of the Display Box. • Scroll Bars Allow More Data. • Wrap=Off • No Wrapping. Horizontal Scroll Bar for Additional Text. • Wrap=Virtual, Physical • Wrap Text Based on Number of Columns • Wrap=Virtual –Do Not Send Inserted Carriage Returns • Wrap=Physical – Send Inserted Carriage Returns Example Brandeis University Internet/Intranet Spring 2000
Forms – CheckBoxes and Radio Buttons • Radio Buttons Allow Only One Option to Be Selected • Checkboxes Allow Multiple Selections • <INPUT Type=“CheckBox” Name=“CB1” Value=“A” CHECKED>Pick1 • <INPUT Type=“CheckBox” Name=“CB1” Value=“B”> Pick2 • Name - Identifies the Grouping. • Value – The Value Passed to the Server if This Item is Selected. • For Multiple Selections, Values are Concatenated • CHECKED – Indicates the Default Status is Checked • Examples: • If the User Checks Pick1: • Sent to Server: CB1=A • If the User Checks Pick1 and Pick2: • Sent to Server: CB1=AB Example Brandeis University Internet/Intranet Spring 2000
Forms – List Boxes • <SELECT Name=“LBox” Size=“5” Multiple=“5”> • <OPTION Value=“Choice1” >First Choice • <OPTION> Second Choice • </SELECT> • Size – The Number of Rows to Display • Access Additional Rows Via Scroll Bar • Size=1 Creates a Drop-Down List • Multiple – The Maximum Number of Items That Can Be Selected From List • Values are Concatenated When Sent to Server • Value – If Specified, This is Sent to Server When Row is Selected • Unspecified – Text in Row is Sent to Server as the Value Example Brandeis University Internet/Intranet Spring 2000
Forms – Submit and Reset Buttons • Submit • <INPUT type=“submit” value=“press here to submit”> • Reset • <INPUT type=“reset” value=“press here to reset”> • Sets all Fields to Their Default Values Example Brandeis University Internet/Intranet Spring 2000
Forms –Uploading Files • Allows a User to Upload Contents of a File Instead of Text • <INPUT Type=“File” Name=“FileField”> • Browser Displays a Text Field and a Browse Button to Allow User to Select a File • If the Form has ENCTYPE=“multipart/form-data” • Contents of File Are Uploaded in This Field • Else • The Filename is Uploaded in This Field • BE CAREFUL! • Can Be a Security Hole if Uploaded Files are Stored in Web Accessible Directories • Accidentally Selecting a Large File Can Affect Performance Example Brandeis University Internet/Intranet Spring 2000
Forms – Hidden Fields • Allows You to Create “Variables” • Passed to Server as if Entered By User • Not Displayed to User in Form • Fully Visible in the HTML • Therefore, Not For Sensitive Info (e.g. Passwords) • <INPUT Type=“Hidden” Name=“HidVar” Value=“Myval”> Example Brandeis University Internet/Intranet Spring 2000
Forms – Image Maps • <INPUT Type=“Image” NAME=“imb” SRC=“button.jpg”> • Similar to a Submit Button • Graphic is Displayed as Button • Also Passes the Coordinates Where User Clicks • Server Can Process Coordinates • (Server Side Image Maps) Example Brandeis University Internet/Intranet Spring 2000
HTML Extensions for Forms • “Tool Tips” • TITLE Attribute on Form Tags • Label Associated With Form Entry • User Can Click On Label to Select Entry Field • <LABEL FOR=“TextID”>Enter Name: </LABEL> • <INPUT TYPE=“Text” ID=“TextID” Name=“Tname”> • Shortcuts • Alt-Character selects Entry Field • ACCESSKEY=“X” • Tab Order • TABINDEX=3 • Negative Number Excludes Field From Tab Order • FieldSet • Groups Controls Together (Outline Box) • <Legend> Adds Text To Outline Box Example Brandeis University Internet/Intranet Spring 2000
Document Object Model: Forms • Properties • action – The URL Where Form Will be Submitted • length – The Number of Elements in the Form • method – “Get” or “Post” • name – Name as Specified by Name Attribute • target – If in a Frame, the Target Frame Name • Methods • reset() – Reset the Form • submit() – Submit the Form • Objects • elements[] – Array of input elements in the form. • Events • onReset • onSubmit • Return false to Prevent Submission Brandeis University Internet/Intranet Spring 2000
Validating Forms Using JavaScript Example Brandeis University Internet/Intranet Spring 2000
Server Side Includes • (See Stein pp. 461-466) • .shtml Extension By Convention • Not Enabled on All Servers • <!--#ssi-directive param=“value” --> • Server Side Include Directives: • echo – print certain variables • DOCUMENT_NAME • DOCUMENT_URI • DATE_LOCAL • DATE_GMT • LAST_MODIFIED • include – Include Another File • fsize, flastmod – File Size, Last Modified Date of a Specified File • exec – Execute a System Shell Command • cgi – Execute a CGI script • config – Adjust Error, Day/Time Formats Example Brandeis University Internet/Intranet Spring 2000
CGI / Scripting • Scripts are Programs Run By the Server • CGI – Common Gateway Interface • Methodology For Server/Script Communication • Can Be Written in Any Language Supported By the Server • UNIX Origins • PERL is Most Common • Script Output is Returned to the Browser • Alternative Methodologies Exist • CGI is the Most Portable • PERL – Practical Extraction and Reporting Language • UNIX Based Scripting Language • Ported to Multiple Platforms • How Does Browser Know to Execute a Program? • Program is in a Script Directory • Typically cgi-bin (Apache) • Or By Extension (e.g. .pl, .cgi) • Scripts Must Have Executable Permissions Brandeis University Internet/Intranet Spring 2000
Scripting Features • Scripts Can Have Input Parameters • Passed as Part of URL : ? Argument (Query String) • Special Characters Passed as % Ascii Hex Values • Name/Value Pairs : Separated by & • Variable • Passed in HTTP Header • Name/Value Pairs • Method = Post • HTML Forms • Passed in Cookies • Netscape Origins, Now Widely Adopted • Name/Value Pairs Associated With a URL • Stored on Client Computer • Users May Turn off Cookies • Scripts Must Be Aware of How Parameters are Being Passed • Different Methodology to Access Each Method • Parameters Also Used to Maintain State Information • Help Track a “Session” Brandeis University Internet/Intranet Spring 2000
Scripting Issues • Security Concerns • No Limits on What CGI Scripts May Access • Potential to Execute Any System Command • Hacker Can Cause Serious and Unforeseen Problems • Potential to Affect More Than Just Your Web Site • Many ISP’s Limit CGI Capabilities • Performance Concerns • CGI Scripts are Run as a Standalone Process • E.g. Interpreter is Loaded and Initialized Each Time • Alternative to Posting Forms • Mailto Option Brandeis University Internet/Intranet Spring 2000
Perl • Why Should I Learn Perl? • S/W Engineers Need to Be Adept at Picking Up New Languages • Need a “Comfort Level” of Expertise • Ability to Write Basic Code • Ability to View/Modify Existing Code • Ability to Learn More as Needed • Develop Reference “Library” • Develop “Guru” Network • Large Public Archives of Perl Scripts • Perl Basics • Interpreted • Originally Used Primarily By UNIX Sys-Admins • “Public Domain” • The preferred language for CGI Scripts • PERL is Relatively Portable • Activestate ActivePerl (Windows / IIS) • UNIX specific scripts dominate (Uses UNIX O/S Commands) Brandeis University Internet/Intranet Spring 2000
In Class Exercise • Create a Basic Form • Use action=“mailto: xxx” to mail the form result to yourself Brandeis University Internet/Intranet Spring 2000