LIS650 lecture 5 html forms javascript, http and apache

1. Thomas Krichel 2005-02-26 LIS650 lecture 5html formsjavascript, http and apache

2. today • forms filling in to prepare for active web sites • javascript • http • apache introduction

3. Forms • Forms are parts of an HTML document that a user can fill in. • The thing that users act on are called the controls of the form. They include buttons, checkboxes, text areas, file selections... • some controls are hidden • elements used in forms use a special attribute group that I will call the "form attributes". I will discuss them now. • Let us look first at an example to fix ideas.

4. form attribute: "tabindex" • Stupid users use the mouse to fill in form. Smart users use the tab character on the keyboard. It is much quicker. • if you set the "tabindex" on a in input, you can set the order. The value of the attribute is a number between 0 and 32767. The input with a lower number will be dealt with before the one with a higher number.

5. form attribute: "readonly" • If you set readonly="1" the control can only be read but not set. readonly="0" is the default, it means that the control can be set. • if an input is readonly="1" • it can receive focus but cannot be modified by the user. • it is included in tabbing navigation. • it is transmitted to the server for processing

6. form attribute: "disabled" • If you set disabled="1" the control can only be read but not set. disabled="0" is the default, it means that the control can be set. • if an input is disabled="1" • it can not receive focus and can not be modified • it is excluded in tabbing • it is not transmitted to the server for processing.

7. <form> • This element encloses a form. • It accepts the core and i18n attributes. • It admits an "action" attribute. Its value is the URL of a script that will handle the form after it is submitted. • It admits a "method" attribute. This attribute determines how the form is submitted to the script. There are only two choices • get • post

8. The GET method • if you use get, the form data is transmitted by appending it to the URL of the script. • Google do it that way • Advantage: you can bookmark the form. • Problem: there is a limit of 1024 chars for the URL, therefore only a limited information can be transmitted in this way.

9. the POST method • if you use post, the user agent sends the form as a POST message to the server. • The data is sent in the body of the http exchange. • Thus it can be as long as you want. • If you use POST you can set the content-type of the message with a special attribute "enctype"

10. more attributes to <form> • Here are two more attributes I will list for completeness • "accept-charset" says what character sets will be accepted by the • "accept" says what MIME-types can be accepted.

11. <input> • This element creates a control. Usually a form has several <input>s as well as text that explains the from. • It admits the core, i18n and the from attributes.

12. the "type" attribute of <input> • This attribute can only take the following values • text enter text • password enter text, but don't echo on screen • checkbox enter checks on boxes • radio check one select • submit press to submit form • reset reset form • file upload file (can only be done with PUT) • hidden hidden form data, not shown • image an image to decorate submit button • button a button

13. the "name" attribute of <input> • This give a name to the control that the users are setting. • Think of it like an attribute name in HTML • and what the user writes is the attribute value

14. the "size" attribute of <input> • It lets you set the initial size of the input field. • When the type is 'text' or 'password' the value you give to this field is the number of characters. • Otherwise it is the number of pixels.

15. the "maxlength" attribute of <input> • this sets the maximum length on the value. • note that this is different from the size of the input field because there is scrolling. • if you don't specify a maximum length there is no limit.

16. the "value" attribute of <input> • This gives the initial value of the <input>. • The initial value is shown to the user, and sh • "value" is optional but should be given for the radio and checkbox type.

17. other attributes of <input> • When the input is of type "radio", setting the "checked" attribute to any value will tell the browser what button is initially set. Of course there can only be one of them. • When the input is of type "checkbox", setting the "checked" attribute to any value will make sure it is checked initially. • When the input is of type 'image' the "src" attributes give the URL of the image.

18. the <button> element • This makes a button for decoration. • It takes a "type" attribute that can be either be 'button', 'submit' or 'reset'. • It has takes a "name" attribute for the name of the control that it sets. • It takes a "value" attribute attribute to set a value. • And it can have character contents!

19. creating menus • This is done with <select> element. • Each <select> element can have a number of <option> elements that contain the options that the user can choose from.

20. attributes to <select> • "multiple" can be set to 'multiple' to allow or disallow multiple selections. • "size" sets how many rows of the selection should be displayed at any one time. • "name" has the name of the control that is set. • It also takes the core and i18n attributes.

21. attributes to <option> • "value" can be used to set the value of the control when the value set is different than the contents string of the option element. • "label" can be set to label the option. if it is set, the user agent should use label rather than the content. At least this is what the spec says. Firefox does not seem to agree. • <option> takes the core and i18n attributes.

22. <optgroup> • This element has <option> elements as its children. • It is used to create hierarchical options. This is mainly a time and space-saving device in the presence of many options. Say • <optgroup label="Winter"><option label="January"/><option label= "February"/><option label="March"></optgroup> • <optgroup> takes the same attributes as <option>.

23. the <textarea> element • This creates a text area where you can put a large chunk of text. • "name" sets the name of the control that is set. • "cols" sets the number of columns in the text area. • "rows" sets the number of rows in the text area. • <textarea> also admits the i18n, core and form attributes.

24. <label> • This is a way to add labels for inputs. • Normally, the input label should be taken from the "label" attribute of the input. • <label> can be used if the other method can not be. • It accepts a "for" attribute to give the input for which it is the label is for. Example: • <input name="sex"/><label for="sex">sex</label>

25. summary • forms deliver data to the server. The server can then process the data and deliver a response. • Active effects can also be done client-side. This is done using the <script> element that mostly uses a language called javascript.

26. the <script> • <script> is an element that calls a script. • It requires a "type" attribute that gives the type of the script language. e.g. type="text/javascript". • It takes the "src" argument that gives a URI where the script can be found. Such a script is called an external script. • It takes a "defer" attribute. If set as defer="1" you tell the user agent that the script will generate no output. This helps the user agent in that case.

27. example <script type="text/javascript"> document.write("hello, world"); </script> • Interestingly enough, you can place this script in the head or the body. • This is an example of an automated script. The user has to do nothing to get the script to run. • You can also trigger a script. To do that, we have to study some more HTML attributes. We will do that later.

28. external script • You can also create an external file, say hello.js with the line document.write("hello, world"); • Then you can call it up in the html file <script type="text/javascript" src="hello.js"/>

29. default script language • You should set the default scripting language used in the document using the <meta> element in the <head> • <meta http-equiv="content-script-type" content="text/javascript"/> • If you don't the validator does not complain, but I don't see other ways to specify the language.

30. Javascript history • A programming language that was developed by Netscape for their browser in 1995. • To counter, Mickeysoft developed Jscript. • It has been standardized by the European Computer Manufacturers Association as ECMA 262.

31. principal features • It contains instructions for a user agent to execute. Javascript is not run by the server. • It resembles Java, but not the same language. • It is an object-oriented language.

32. object • In an object-oriented language, an object is the prime focus of attention. • An object has properties and methods. • Example from real life. Let a bus be an object. • “color” of the bus is a property • “move to next station” is a method

33. objects in javascript • Properties are accessed by object_name.property_name • Methods are accessed by object_name.method_name() • where object_name is the name of an object, property_name is the name of a property and method_name() is the name of an object. Note the use of the dot and the parenthesis.

34. Example • Syntax rules • Comments are started with // and go to the end of the line. • Instructions are terminated with semicolon • Example // create a new object called bus new bus = Object(); // paint it white --- set a property bus.color = ‘white’; // move to next stop --- apply a method bus.movetonextstop();

35. event attributes • Event attributes can be given to elements (like any attribute, really) • The name of the attributes gives a certain event that could happen to the element. • The value of the event attribute is the script to be executed when the event occurs on the element that has the event attribute. • Example <p onmouseover="stink">Cow shit is ... </p> as the user moves the mouse over the paragraph, the browser fires up an imaginary script called stink that makes it start to stink.

36. core event attributes I • "onclick" occurs when the pointing device button is clicked over an element. • "ondblclick" occurs when the pointing device button is double clicked over an element. • "onmousedown" occurs when the pointing device button is pressed over an element. • "onmouseup" occurs when the pointing device button is released over an element. • "onmouseover" occurs when the pointing device is moved onto an element.

37. core events attributes II • "onmousemove" occurs when the pointing device is moved while it is over an element. • "onmouseout" occurs when the pointing device is moved away from an element. • "onkeypress" occurs when a key is pressed and released over an element. • "onkeydown" occurs when a key is pressed down over an element. • "onkeyup" occurs when a key is released over an element.

38. special event attributes • "onfocus" occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may only be used with the <a> element, and some form elements that we have not covered. • "onblur" occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus.

39. more special event attributes • "onsubmit" occurs when a form is submitted. It only applies to the <form> element. • "onreset" occurs when a form is reset. It only applies to the <form> element. • some more are only used with other form elements... • Let us look at some examples

40. two stupid examples <html><head><title>javascript test</title> <meta http-equiv="content-script-type" content="text/javascript"/></head> <body><p onmouseover="alert('Today is '+Date());" >time</p><hr/> <p onmouseover= "document.write('not funny')">joke</p> <p></body></html>

41. An even more silly example <html><head><title>Bush in the bush</title> <meta http-equiv="content-script-type" content= "text/javascript"/><script type="text/javascript"> prbu=new Image(); prbu.src="bush.jpg"; natb=new Image(); natb.src="natgeo.jpg"; </script></head><body><h4>Bush in the bush</h4><div><img id="bush" src="bush.jpg" onmouseover="document.bush.src=natb.src" onmouseout="document.bush.src=prbu.src" alt="bush in the bush"/></div></body></html>

42. http • Stands for the hypertext transfer protocol. This is the most important application layer protocol on the Internet today, because it provides the foundation for the world wide web. • defined in Fielding, Roy T., James Gettys, Jeffrey C. Mogul, Paul J. Leach, Tim Berners-Lee ``Hypertext Transfer Protocol -- HTTP/1.1'' (1999), RFC 2616

43. history • 1990: version 0.9 allows for transfer of raw data. • 1996: rfc1945 defines version 1.0. by adding attribute:value headers. • 1999: rfc 2616 • adds support for • hierarchical proxies • caching, • virtual hosts and some • Support for persistent connections • is more stringent.

44. http resource identification • identification of resources is assumed through Uniform Resource Identifiers (URI). • As far as http is concerned, URIs are string. • http can use ``absolute'' and ``relative'' URIs. • A URL is a special case of a URI.

45. rfc about http An application-level protocol for distributed, collaborative, hypermedia information systems. … HTTP is also used as a generic protocol for communication between user agents and proxies/gateways to other Internet systems, including those supported by the SMTP, NNTP, FTP, Gopher, and WAIS protocols. In this way, HTTP allows basic hypermedia access to resources available from diverse applications.

46. http assumes transport • http assumes that there is a reliable way to transport data from one host on the Internet to another one. • All http requests and responses are separate TCP connections. The default is TCP port 80, but other ports can be used.

47. use of other standards • http shares the same registry as the MIME multimedia email extensions. It is based at the IANA, at http://www.isi.edu/innotes/iana/ assignments/media-types/media-types • The default character set is ISO-8859-1.

48. Absolute http URL • the absolute http URL is http://host[:port][[abs_path][?query]] • If abs_path is empty, it is /. • The scheme name "http" and the host name are case-insensitive. • Characters other than those in the ``reserved'' and ``unsafe'' sets of RFC 2396 are equivalent to their ``%HEX HEX'' encoding. • optional components are in [ ]

49. http messages • There are two types of messages. • Requests are sent form the client to the server. • Responses are sent from the server to the client. • The generic format is the same as for email messages: • start line • message headers • empty line • body • Empty lines before the start line are ignored. • The request's start line is called the request-line. • The response start line is called the status-line.

50. overall operation server side • Server sends response, required items are • status line • protocol version • success or error code • optional items are • server information • body