Forms, CGI HTML Forms Form Example Form Example

Forms, CGI HTML forms Objectives • In most internet programming, you need the user to enter data • The basics of HTML forms • HTML forms offer the basic user interface elements inside HTML • How form content is submitted • Forms have a method which corresponds to the HTTP command that will be sent – GET, POST when the form is submitted • Elements that you can have in forms • Forms have an action which denotes the URL loaded when the form is sent. • Responding to forms – The action URL is typically a CGI or a servlet – Common Gateway Interface (CGI) • Inside the form you can have normal HTML and inputs (user interface elements) – Later: Servlets • Generation of dynamic Web content gruint06/ingint06, Forms, CGI Lecture 5, slide 1 of 19 gruint06/ingint06, Forms, CGI Lecture 5, slide 2 of 19 Form example Form example . <html> <body> <form action="http://localhost/response.html" method="get"> your name: <input name="someText" type="text" value="change me!" /><br /> your password: <input name="somePass" type="password" /><br /> <input name="theButton" type="submit" value="click me!" /><br /> </form> </body> </html> We submit the form to the SimpleHttpServer that we wrote last time (an improved version to also accommodate POST) gruint06/ingint06, Forms, CGI Lecture 5, slide 3 of 19 gruint06/ingint06, Forms, CGI Lecture 5, slide 4 of 19 Form submission POST form Simply indicate the method POST • Upon submission, the form will generate the following HTTP: GET/response.html?someText=change+me%21&somePass=s <html> ddsfs&theButton=click+me%21 HTTP/1.1 <body> Host: localhost <form action="http://localhost/response.html" method="post"> your name: <input name="someText" type="text" value="change me!" /><br /> Connection: Keep-Alive your password: <input name="somePass" type="password" /><br /> . and other headers <input name="theButton" type="submit" value="click me!" /><br /> • The data of the form is thus sent in the HTTP command, after form’s action and ? </form> </body> • The format of the data (inputName=value&...) is called a query string </html> • In the GET method the query string is limited to 65535 chars • The GET query string is visible in the browser. Beware of passwords! gruint06/ingint06, Forms, CGI Lecture 5, slide 5 of 19 gruint06/ingint06, Forms, CGI Lecture 5, slide 6 of 19 POST form submission Form <input> POST /response.html HTTP/1.1 Content-Type: application/x-www-form-urlencoded Content-Length: 59 • For all HTML inputs you can indicate CSS styles, etc ... – http://www.htmlhelp.com/reference/html40/forms/input.html Host: localhost • type="text" and type="password" was demonstrated someText=change+me%21&somePass=sdfdsf&theButton=click+me%21 • type="submit" creates a submit button. If you don’t set any value, it will be "submit query" • When sending data with the POST method, the query string is sent after the HTTP • Most inputs have a name= (not necessarily needed for type=submit) empty line. • Most inputs have a type= that determines the user interface element type – So the query string is HTTP content • Most inputs have a value= to indicate initial value • By doing that, the POST method lets you send content with any length (e.g. • type="reset" creates a button that brings all inputs to their initial value upload large files) • The POST query string is not visible in the browser! – You can have both GET-style and POST query strings by <form action="someScript?p1=v1&p2=v2" method="post"> gruint06/ingint06, Forms, CGI Lecture 5, slide 7 of 19 gruint06/ingint06, Forms, CGI Lecture 5, slide 8 of 19 Form <textarea> and <select> Checkboxes and radio buttons Dedicated input elements: • <textarea name="aText"> • <input type="checkbox" name="x" value="y"/> initial text – Typically you will have more checkboxes with the same name multiline – All of the checked boxes will be sent in the query string, with the same name </textarea> <select multiple > http://www.htmlhelp.com/reference/html40/forms/textarea.html and the respective values, as for • <select name="aChoice" > • <input type="radio" name="x" value="y"/> <option value="1">option title</option> – Typically you will have more radio buttons with the same name <option value="two">second</option> – Normally only one radio button can be checked </select> http://www.htmlhelp.com/reference/html40/forms/select.html To indicate an initial value, options can be declared <option selected ...> If the select is declared <select multiple ...>, multiple options can be sent • The query string looks like aChoice=1&aChoice=two etc, i.e. the name repeats for each value gruint06/ingint06, Forms, CGI Lecture 5, slide 9 of 19 gruint06/ingint06, Forms, CGI Lecture 5, slide 10 of 19 Common Gateway Interface (CGI) The input/output paradigm • CGI is a standard that allows us to write programs that respond to forms • Normally in DOS or Unix a program reads an input stream (so-called standard • A standard HTTP server responds to every request input) and writes to an output stream (so-called standard-output) • For some requests (typically starting with /cgi-bin/ ) the server will start a program • A DOS or Unix program also reads its command line arguments, and its environment variables • CGI is the interface between the HTTP server and our program – In DOS you can set an env variable like set varName=value • CGI lets us to find out what has been in the HTTP request that the server got – In Unix, it depends on your shell (command line interpreter), http://hoohoo.ncsa.uiuc.edu/cgi/overview.html · In bash export varName=value http://www.cgi-resources.com · In csh setenv varName value – For example the PATH environment variable tells the system where to find programs • So for input there are: standard input, command line arguments and environment variables • The standard output is the only place for program output gruint06/ingint06, Forms, CGI Lecture 5, slide 11 of 19 gruint06/ingint06, Forms, CGI Lecture 5, slide 12 of 19 CGI program input/output CGI environment variables • SERVER SOFTWARE: type of the server • Input: a number of environment variables set by the WWW server • SERVER NAME: e.g. www,nada.kth.se • One of the variables (the QUERY_STRING) contains arguments in the form • SERVER PORT: e.g. 80 arg1=value1&arg2=value2&... • REQUEST METHOD: GET or POST – In the GET method the query string is read from the URL, after the ’?’ sign • PATH INFO: path to your program in the URL, like /cgi-bin/prog http://yourServer:port/cgi-bin/scriptName?arg1=value1&arg2=value2 • PATH TRANSLATED: path of the program on disk – In the POST method the standard input gives the query string • SCRIPT NAME: name of the CGI program QUERY STRING • Output: the standard output of the CGI program will be sent back to the browser! • : actual path of the program • REMOTE HOST: host where the request comes from – Both the HTTP headers and content • AUTH TYPE: authentication if the user logged-in (e.g. BASIC) · Headers, empty line, content • REMOTE USER: username if the user logged-in – Content is typically HTML but not necessarily • CONTENT TYPE: the content-type HTTP header • CONTENT LENGTH: the content-length HTTP header (useful in POST) gruint06/ingint06, Forms, CGI Lecture 5, slide 13 of 19 gruint06/ingint06, Forms, CGI Lecture 5, slide 14 of 19 CGI at NADA A CGI example in PERL • Put your CGI program in your CGI dir at NADA (if it’s activated) /afs/nada.kth.se/public/www.student/cgibin/yourUserName/yourProgram • Practical Extraction and Report Language • Make sure that the file has execution rights – www.perl.com chmod uo+x yourProgram – http://www.iupui.edu/npi/intro2perl/perl.html cd /afs/nada.kth.se/public/www.student/cgi-bin/yourUserName/ – http://agora.leeds.ac.uk/Perl/start.html fs setacl . system:anyuser rl • An interpreted programming language inspired by C and shellscript (bash, csh) • You should first test your program without a browser • Available on many platforms but inspired by and started on Unix Set the CGI variables by hand using setenv (csh) or export (bash) • Very strong pattern matching setenv QUERY STRING a=b&c=d • Easy to use e.g. to make a simple CGI call yourProgram • But not for larger applications • When it works, test it with a browser http://cgi.student.nada.kth.se/cgibin/yourUserName/yourProgram • We just illustrate the CGI principle with PERL – You can check the server error log and try to find your error between other • Java is not a good language to write CGI in, because CGI makes one people’s errors process/HTTP access and a Java Virtual Machine is heavy (30 Meg) http://cgi.student.nada.kth.se/cgi-bin/get-errlog • Servlets are the solution in Java gruint06/ingint06, Forms, CGI Lecture 5, slide 15 of 19 gruint06/ingint06, Forms, CGI Lecture 5, slide 16 of 19 A form to respond to Responding to a form in a PERL CGI #!/usr/local/bin/perl print "Content-type: text/html\n\n"; <FORM ACTION="/cgi-bin/test.pl" METHOD="GET"> ## CGIs must print HTTP headers AND empty line! Write a message: <INPUT TYPE="text" $REQUEST_METHOD = $ENV{’REQUEST_METHOD’}; NAME="message" SIZE=20 $QUERY_STRING = $ENV{’QUERY_STRING’}; MAXLENGTH=40 VALUE=""> ## Reading environment variables <INPUT TYPE = "submit" VALUE= "Send it!"> if($REQUEST_METHOD ne "GET") { <INPUT TYPE= "reset" VALUE= "Remove it!" > print"Sorry, i can only do <code>GET</code><br />Bye!"; </FORM> exit(0); } ($COMMAND, $MESSAGE) = split(/=/, $QUERY_STRING); ## Split the query string via PERL pattern matching. if($COMMAND eq "message") { print "<H1>You sent:</H1>"; print "Message: $MESSAGE"; exit(0); } exit(0); gruint06/ingint06, Forms, CGI Lecture 5, slide 17 of 19 gruint06/ingint06, Forms, CGI Lecture 5, slide 18 of 19 Dynamic Web content • Content generated by CGI is different from normal HTTP serving • It’s not a static file or image that’s being served • Instead, a dynamic content is generated • You can use CGI to generate dynamic content even if you don’t respond to a form • Or you can use Java servlets for the same purpose gruint06/ingint06, Forms, CGI Lecture 5, slide 19 of 19.

Forms, CGI HTML Forms Form Example Form Example

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support