LIS650 lecture 5 forms, JavaScript and the DOM

1. LIS650 lecture 5forms, JavaScript and the DOM Thomas Krichel 2009-03-01

2. today • More HTML • <form>s and form element • <script> and event attributes • basics of JavaScript • the DOM in JavaScript • JavaScript and CSS

3. Forms • Forms are parts of an HTML document that users can fill in. They may include buttons, checkboxes, text areas, file selections. • The thing that users fill in are called the controls of the form. • Some controls are hidden. • Controls are submitted to PHP in the form of variables. Each control in the HTML form becomes a variable in PHP. This is seen later.

4. forms examples • Here is an example in http://wotan.liu.edu/home/krichel/courses/lis650/examples/forms/ • Elements used in forms use a special attribute group that I will call the “form attributes”. I will discuss them now.

5. <form> • This element encloses a form. It is a block level element. All form elements (discussed now) should be children of the <form> element. • Technically can be more than one <form> in the HTML page. • But it does not make much sense to have several <form>s. • <form> accepts the core and i18n attributes. And it has some other attributes. Some of these are required.

6. submitting a form • Data from a form is submitted to a special URL where an file can handle a query. • I made such a file at http://wotan.liu.edu/list_input.php • A form is submitted when either • a special submit input is activated • the return character is entered over a form element.

7. the action= attribute of <form> • To specify the locus of submission, <form> has a required attribute action=. • On wotan, you can set action="/list_input.php" to call up the special input form exhibitor script I made for you. • In LIS651 you learn how to write your own one.

8. method= of <form> • <form> admits a method= attribute. This attribute determines the http method by which the form is submitted to the script. There are only two realistic choices • method="get" (default)‏ • method="post" • When the form is submitted the http request line that follows will have the method GET or POST. • Validation requires lowercase values.

9. method="get" • If you use GET, the form data is transmitted by appending it to the URL of the script. Google's Web search does it that way, for example. • There is a standard way to write the data in the URL knows as Common Gateway Interface, CGI. It is of no further interest to us. • 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.

10. method="post" • 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 request. • Thus it can be as long as you want. • If you use POST you can set the MIME type of the data with a special attribute enctype=

11. 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 form • accept= says what MIME-types can be accepted

12. elements to create controls • There are four elements to create controls: • <input/> for simple text input • <select/> for a choice from a menu • <textarea/> for a text box • <button/> for a button • The first three can only be used as children of the <form>. <button/> is a normal text element. • All for accept an attribute group I will call the control attributes.

13. control 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 control, you can set the order. The value of the attribute is a number between 0 and 32767. The control with a lower number will be dealt with before the one with a higher number.

14. control attribute: readonly= • If you set readonly="readonly" the control can only be read but not set. This means • 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. • readonly= is not set by default.

15. control attribute: disabled= • If you set disabled="disabled" the control can only be read but not set. This means • it can not receive focus and can not be modified • it is excluded in tabbing • it is not transmitted to the server for processing. • disabled= is not set by default.

16. control attribute: name= • The name= attribute sets the name of a control. • When the form is submitted the value of the control is labeled with a name. Otherwise the receiving application would not know what the submitted value means. • The script that is found by the action= attribute will identify the controls by name. Therefore every control should have a different name.

17. control attribute: accesskey= • We are familiar with this attribute from the <a> • Since from controls also require navigation around the page, it can be useful to set an accesskey= for them.

18. the <input/> control • This element creates a simple control. Usually a form has several <input/>s as well as text that explains the from. • <input/> is a replaced element. • It is a text level element. • Despite the fact that it is a child of the <form>, which is block-level, the <input/> requires an extra block level parent.

19. more on <input/> • <input/> admits the core and i18n attribute. • It admits the name=, readonly=, disabled=, and tabindex= and accesskey= attributes. • It requires a type= attribute.

20. 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 POST)‏ • ‘hidden’ submit hidden form data, not shown • ‘image’ submit image map • ‘button’ a button

21. the size= attribute of <input/> • It lets you set the size of the input field. • Note that the size of the field may not limit the input to that size. • 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.

22. 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. • But it is good security to have a limit.

23. the value= attribute of <input/> • This gives the initial value of the <input/>. • The initial value is shown to the user. • value= is optional but should be given for the radio and checkbox type.

24. the checked= 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.

25. the src= attribute of <input/> • When the input is of type 'image' the src= attribute gives the URL of the image. • This is for input using image maps.

26. the <select> control • This control selects from a menu. • Each <select> element can have a number of <option> elements that contain the options that the user can choose from. • <select> also takes the core, i18n, tabindex=, disabled=, and name= attributes, and some others that we see now.

27. attributes to <select> • multiple="multiple" allows multiple selections. I don’t know how they are being transmitted. I have not used this option. • size= sets how many rows of the selection should be displayed at any one time. The value has to be a natural number.

28. selectable choice: <option> • Within a <select> there are a series of <option> elements that contain the selections. • <option> takes the core, i18n and form attributes. Example <select name="brewery"> <option>Bruch</option> <option>Karlsberg</option> </select>

29. value= attribute 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. • Example <option value="bruch">Brauerei G. A. Bruch, Saarbrücken</option>

30. other attributes to <option> • <option> take a label= attribute. If label= is set, the user agent should use label= rather than the content of the <option> element. At least this is what the spec says. Firefox does not seem to agree. • selected= can be used to select an option. • An <option> can be disabled=.

31. <optgroup> • This optional element has <option> elements as its children. It is used for hierarchical menus. But itself can't be nested. • It takes the core and i18n attributes. • It requires a label= attribute. <optgroup label="dark"> <option value="b6">Baltika 6</option> <option value="gu">Guinness</option> </optgroup>

32. control element: <textarea> • This creates a text area where you can put a chunk of text. It requires two attributes • rows= the number of rows in the box • cols= the number of columns in the box • This initial value is a child text node of <textarea>. • It also takes name=, accesskey=, readonly=, disabled= and tabindex=.

33. <label> • This is a way to add labels for inputs. • It takes a for= attribute says what control the label is for. You reference the control by its id=. Example: <label for="height_input">your height:</label> <input id="height_input" name="height" type="text"/> • <label> also accepts the accesskey=, core and i18n attributes.

34. control element: <button> • This makes a button for decoration. • It can appear outside <form>. • It requires a label= attribute. • It takes a type= attribute that can be either be 'button', 'submit' or 'reset'. • It has takes a name= attribute. • It takes a value= attribute to set a value. • It also takes the core and i18n attributes. • And it can have character contents!

35. the <script> • <script> is an element that calls a script. • Interestingly enough, you can place <script> in the head or the body. • It requires a type= attribute that gives the type of the script language. e.g. type="text/javascript". • 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.

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

37. example <script type="text/javascript"> window.open("http://www.google.com"); </script>

38. external script • <script> takes the src= argument that gives a URI where the script can be found. Such a script is called an external script. • You can also create an external file, say google.js with the line • window.open("http://openlib.org/home/krichel"); Then you can call it up in the html file • <script type="text/javascript" src="krichel.js"></script> • see krichel.html

39. automated vs triggered scripts • <script> is useful to set up automated scripts. The user has to do nothing to get the script to run. When the browser hits the <script> it executes the script. • You can also trigger a script. To do that, you attach an attribute to a HTML element. These attributes are called event attributes.

40. triggering script example • Example <p onmouseover="alert('Thank you. That feels good!')">Roll your mouse over me.</p> • Here if the user rolls the mouse over the paragraph, the user is alerted by the browser with the message.

41. event attributes • Event attributes can be given to all elements that admit the core attributes • 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.

42. core event attributes • Some event attributes can be used on all elements that also accept the “core” (as by Thomas’ naming) attributes. • I will refer to such attributes as “core event attributes”. • Other event attributes are limited to certain elements.

43. core event attributes with the mouse • 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. • 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.

44. core events attributes press & click • 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. • 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.

45. special event attributes: focusing • 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>, <button>, <label>, <textarea>, and with <area>, an element we don’t cover. • 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.

46. special event attributes with <form> • 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.

47. special event attributes with <body> • onload= occurs when the user agent finishes loading a document. • onunload= occurs when the user agent removes a document from a window.

48. special event attributes for controls • onselect= occurs when a user selects some text in a text field. This attribute may be used with the <input> and <textarea> elements. • onchange= occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: <input>, <select>, and <textarea>.

49. JavaScript • This is a client-side scripting language. • Your web page is read by the client. If it contains instructions written in JavaScript, the client executes the command, provided it knows about JavaScript. • Different browser capabilities when it comes to executing JavaScript did bedevil JavaScript at the outset.

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