Exploring HTML Forms: User Interaction and Data Submission Techniques

1. Internet / IntranetCIS-536 Class 7

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

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

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

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

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

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

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

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

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

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

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

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

14. Validating Forms Using JavaScript Example

15. Server Side Includes • .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

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

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

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

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

20. In Class Exercise • Create a Basic Form • Use action=“mailto: xxx” to mail the form result to yourself