HTML forms and the dynamic web Antonio Lioy < lioy@polito.it > english version created by Marco D. Aime < m.aime@polito.it > Politecnico di Torino Dip. Automatica e Informatica timetable.html departure Using HTML forms to send data in the dynamic web arrival from=torino&to=roma&day=31/03/07 date SUBMIT RESET timetable.asp timetable.asp Torino Roma 6:50 8:00 7:45 8:55 browser <html>... </html> server (dynamic) A.Lioy - Politecnico di Torino (2003-09) H-1
Base structure of HTML forms NAME (or ID): symbolic name to refer to the form ACTION: relative URL to a CGI, PHP, ASP script or to any type of elaboration on the server METHOD: GET or POST the elements in a form are called controls <form name="f1" method="get" action="http://..."> <input...> <select...>... <input type="submit"...> <input type="reset"...> tag INPUT Form: input controls TYPE: text, password, checkbox, radio, image, file, hidden, submit, reset, button NAME: symbolic name (use ID if unique) to pass data to the server via HTTP to access the element from client-side scripts (e.g. JavaScript or VBScript) VALUE: initial content of the field or value to be sent <input type=... name=... value=...> A.Lioy - Politecnico di Torino (2003-09) H-2
SUBMIT Form: buttons created with the tag INPUT sends form data to the web server RESET created with the tag INPUT set all the controls in the form to their default value BUTTON created with the tag BUTTON type=submit reset button richer (e.g. text + image) than INPUT SUBMIT/RESET and can be used outside a form too Form: text oriented controls <input type=text size=n maxlength=m name= > text line long N characters, at maximum M <input type=password p > as type=text but shows characters as * it is NOT a secure method to hide a password <input type=hidden name= value= > fixed value to be sent to the server in hidden way it is NOT a secure method to hide data <textarea rows=nr cols=nc name= >... initial text... </textarea> text field of NR rows, each one with NC characters A.Lioy - Politecnico di Torino (2003-09) H-3
Form example (text, password) <form action="/cgi-bin/query" method="get"> your name: <input type="text" text name="name"> <br> your home page: <input type="text" name="home" value="http://"> password: <input type="password" name="pswd"> <br> <input type="submit" value="ok"> <input type="reset" value= cancel"> Form: single choice control (menu) tag SELECT to enclose the various options tag OPTION for the various options, possibly with a default choice (SELECTED) tag OPTGROUP to group options (cascading menus; a single grouping level) prefer the attribute LABEL <select name=...> <select name...> <option label=... > <option>... </option> <option selected>... </option> </select> A.Lioy - Politecnico di Torino (2003-09) H-4
Form: multiple choice controls CHECKBOX element of type on/off independent from other controls of the same type all the selected ones (CHECKED) are sent to the server may also send nothing to the server RADIO a set of element of type on/off identified by the same NAME (in this case you cannot use ID) mutually exclusive (you can select only one) the value of the (single) selected element (CHECKED) is sent to the server Example of form (checkbox) <form action="/cgi-bin/query" method="get"> Compose your own fruit salad: <br> <input type="checkbox" name="banana"> Banana <input type="checkbox" name="apple" checked> Apple <input type="checkbox" name="orange"> Orange (red) <br> <input type="submit"> <input type="reset"> A.Lioy - Politecnico di Torino (2003-09) H-5
Example of form (radio) <form action="/cgi-bin/query" method="get"> Select your preferred fruit: <input type="radio" name="frt" value="banana"> Banana <input type="radio" name="frt" value="apple" checked> Apple <input type="radio" name="frt" value="orange"> Orange (red) <br> <input type="submit"> <input type="reset"> Disabled or read-only controls attribute readonly does not allow the user to change the value of a control (still possible via client-side script) valid in INPUT and TEXTAREA controls attribute disabled disables the control the user cannot change the value it will not be sent to the server valid in INPUT, TEXTAREA, BUTTON, SELECT, OPTION, OPTGROUP controls Boolean attributes modifiable by client-side scripts A.Lioy - Politecnico di Torino (2003-09) H-6
Form: file upload the control <input type="file" > inserts an element to select the name of a file the actual nature of the control depends on the browser, but typically: text field to directly insert the file name button to activate a graphical interface (navigation of the local file system and selection of a file) all the form data are sent individually as parts of a MIME message usable only with POST and the specific MIME type: <form action=... enctype="multipart/form-data" method="post"> Form example (file upload) <form action="/cgi/fileprint" enctype="multipart/form-data" method="post"> File to be printed: <input type="file" name="myfile"> Number of copies to be printed: <input type="text" name="copies" size="2"> <br><br> <input type="submit" value="submit"> A.Lioy - Politecnico di Torino (2003-09) H-7
File upload C > S transfer POST /cgi/fileprint HTTP/1.1 Host: server.it Content-Type: multipart/form-data; boundary=aabb Content-Length: 199 --AaBb Content-Disposition: form-data; name="myfile"; filename="timetable.txt" Content-Type: text/plain 8:30-12:30 room 12 --AaBb Content-Disposition: form-data; name="copies" 3 --AaBb-- Using scripts to validate forms the DOM event model is used to activate a clientside script typically, a script is associated to the event onsubmit: the script is executed when pressing the button Submit if the script returns the value "true", than the data is sent to the server, otherwise not it is possible to associate scripts to other events to validate individual controls as soon as new data is inserted A.Lioy - Politecnico di Torino (2003-09) H-8
Example of a script to validate a form <form name="sample" method="post" action=... onsubmit="return validateform()"> Name: <input type="text" name="name" size="30"><br> Age: <input type="text" name="age" size="3"><br> Birthday: <input type="text" name="birthday" size="10"><br> <input type="submit"> <input type="reset"> Validation script <script type="text/javascript"> function validateform() { formobj = document.sample; if (formobj.name.value == "") { alert("insert your name!"); return false; } else if (formobj.age.value == "") { alert("insert your age!"); return false; } else if... return false; return true; } </script> 19 A.Lioy - Politecnico di Torino (2003-09) H-9
How to validate? check that the value of the control: is not empty (if possible given the type) has a correct value ("looks good") rather than it does not have a wrong value ("doesn't look bad") example (validation of a text control used to enter an Italian ZIP code): must contain only numerical characters ('0' '9') must have exactly five characters (optionally) if the list of all possible ZIP codes is known, it must be included in this list in case of error, provide the user with a suggestion on how to correct the error (i.e. NOT wrong ZIP code) Transmission of form parameters (GET) URI = concatenation of the field action? the parameters represented according to the encoding application/x-www-form-urlencoded the body of the request remains empty A.Lioy - Politecnico di Torino (2003-09) H-10
application/x-www-form-urlencoded usable both with GET and POST is the default encoding generates a string composed by the names of the form controls followed by "=" and by the inserted values: name_ctrl1=val_ctrl1&name_ctrl2=val_ctrl2& separator between a control and the next one: & white spaces in names and values replaced by + special characters, not US-ASCII or with special meaning ( /? ) replaced by %xx (where "xx" is the hexadecimal number of their ISO-8859-1 code) Ex. x-www-form-urlencoded: form <form name="sample" method="get" action="/cgi-bin/acquire"> Name and surname: <input type="text" name="surname" size="30"><br> Number of children: <input type="text" name="children" size="3"><br> Birthday: <input type="text" name="birthday" size="10"><br> <input type="submit"> <input type="reset"> A.Lioy - Politecnico di Torino (2003-09) H-11
Ex. x-www-form-urlencoded: transmission if the previous form is filled by Mr. Marco Noè, born on 30/10/74, father of 3 children than the following string is created: surname=marco+no%e8&children=3&birthday=30%2f10%2f74 Transmission of form parameters (POST) URI is the values of the field action (default, i.e. enctype not specified) Content-Type: application/x-www-form-urlencoded Content-Length: body contains only the parameter string encoded according with the format application/x-www-formurlencoded con enctype=multipart/form-data Content-Type: multipart/form-data Content-Length: body = MIME message (one section per parameter) note: compulsory for controls of type File A.Lioy - Politecnico di Torino (2003-09) H-12
Example of data sent with GET : form <form method="get" action="/cgi/insroom"> <table border="0"> <tr> <td>room number:</td> <td><input type="text" size="8" name="num"></td> </tr> <tr> <td>location:</td> <td><input type="text" size="15" name="loc"></td> </tr> <tr> <td> <input type="submit" value="send"> <input type="reset" value="clear"> </td> </tr> </table> Ex. of data sent with GET : URI, HTTP, env http://localhost/cgi/insroom?num=12a&loc=main+site URI HTTP channel (C > S) GET /cgi/insaula?num=12a&loc=main+site HTTP/1.1 Accept: image/gif, image/x-xbitmap,image/jpeg,*/* Referrer: http://localhost/pad/formroom.html Accept-Language: en Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible;msie 6.0;Windows NT 5.0) Host: 192.168.235.10 Connection: Keep-Alive num=12a&loc=main+site QUERY_STRING A.Lioy - Politecnico di Torino (2003-09) H-13
Data sent with POST (case 1) : form <form method="post" action="/cgi/insroom"> <table border="0"> <tr> <td>room number:</td> <td><input type="text" size="8" name="num"></td> </tr> <tr> <td>location:</td> <td><input type="text" size="15" name="txtloc"></td> </tr> <tr> <td> <input type="submit" value="send"> <input type="reset" value="clear"> </td> </tr> </table> Data sent with POST (case 1): URI,HTTP,env http://localhost/cgi/insroom URI HTTP channel (C > S) POST /cgi/insaula HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, */* Referrer: http://localhost/pad/formroom.html Accept-Language: en Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible;msie 6.0;Windows NT 5.0) Host: 192.168.235.10 Connection: Keep-Alive Content-Type: application/x-www-form-urlencoded Content-Length: 26 num=12a&txtloc=main+site QUERY_STRING A.Lioy - Politecnico di Torino (2003-09) H-14
Data sent with POST (case 2) : form <form method="post" action="/cgi/insroom" enctype="multipart/form-data"> <table border="0"> <tr> <td>room number:</td> <td><input type="text" size="8" name="num"></td> </tr> <tr> <td>location:</td> <td><input type="text" size="15" name="txtloc"></td> </tr> <tr> <td> <input type="submit" value="send"> <input type="reset" value="clear"> </td> </tr> </table> Data sent with POST (case 2): URI,HTTP,env http://localhost/cgi/insroom URI HTTP channel (C > S) POST /cgi/insroom HTTP/1.1... Content-Type: multipart/form-data; boundary=aabbcc Content-Length: 148 --AaBbCc Content-Disposition: form-data; name="num" 12A --AaBbCc Content-Disposition: form-data; name="txtloc" Main Site --AaBbCc-- NOTE: unencoded value A.Lioy - Politecnico di Torino (2003-09) H-15
Attention to empty fields! apart the tag SELECT all other fields in a form may transmit no data and in one case (TYPE=CHECKBOX) also the variable of the field may be missing (if it is OFF) the server-side applications must be able to treat all the cases Example 1 <form name="sample" method="get" action="http://www.shop.it/payment.asp"> Credit card: <input type="text" name="cardno" size="16"> <br> MasterCard <input type="radio" name="cc" value="mastercard"> <br> Visa <input type="radio" name="cc" value="visa"> <br> <input type="submit"> <input type="reset"> cardno=123456789012345&cc=mastercard A.Lioy - Politecnico di Torino (2003-09) H-16
Example 2: form <form name="sample" method="get" action="http://www.freinds.it/person.asp"> surname: <input type="text" name="surn" size="30"> <br> hobby: <ul> <li>fishing <input type="checkbox" name="cb_fish"> <li>skiing <input type="checkbox" name="cb_ski"> </ul> <input type="submit"> <input type="reset"> Example 2: data sent to the server the server-side application must manage the following cases (and other combinations ) surn= surn=de+chirico surn=de+chirico&cb_fishing=on surn=de+chirico&cb co&cb_ fishing=on&cb &cb_skiing=on A.Lioy - Politecnico di Torino (2003-09) H-17
Form: better transmitting with GET or POST? GET: allows checking the response page allows creating bookmarks and links to the page leaves trace of the parameters values inside the server s log (problem for privacy and/or security) some servers limit the length of the query string to 256 characters if enclosed in the URI POST: does not allow caching and bookmarking does not leave any trace in the logs does not pose any limit to the query string A.Lioy - Politecnico di Torino (2003-09) H-18