LIS650 lecture 5 forms, JavaScript and the DOM

Thomas Krichel 2008-10-12 LIS650 lecture 5forms, JavaScript and the DOM

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

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.

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.

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.

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

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

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

the action= attribute of <form> • It has a required action= attribute. • The value of this attribute is the location of a file that contains the action to execute when the form is submitted. • In our case, this will be the file name of the PHP script that deals with the form on wotan. • By default, scripts are executed using return on the browser while a form element has focus, or a special submit button.

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.

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.

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=

home grown action • I made an action script for the get method at http://wotan.liu.edu/list_get.php. • It shows the result of the form submission, formatted as a definition list. • On wotan, you can refer to it as "/list_get.php".

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

the form control <input/> • This element creates a 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.

more on <input/> • <input/> admits the core, i18n and the form attributes. • It requires a type= attribute and a name= attribute.

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’ hidden form data, not shown • ‘image’ image map submission, not covered further • ‘button’ a button

the name= attribute of <input/> • This give a name to the control that the users are setting. • The script that is found by the action= attribute will identify the controls by name. Therefore every control should have a different name.

control name and PHP variable • When the form is passed to the PHP script named with the action= of the the <form> the controls are accessible as PHP variables. • If name is the name of the control, and if the method is POST, the control is read as the variable$_POST['name']. • If name is the name of the control, and if the method is GET, the control is read as the variable $_GET['name'].

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.

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.

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.

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.

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.

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. • <select> also takes the core and i18n attributes, and some others that we see now.

attributes to <select> • name= has the name of the control that is set • multiple="1" allows and multiple="0" (default) disallow multiple selections. However, I don’t know how they are being transmitted. Therefore I suggest you don’t use this option. • size= sets how many rows of the selection should be displayed at any one time.

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>

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>

other attributes to <option> • label= can be set to label the option. if it 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. See forms/options.html for a test example. • selected= can be used to select an option.

<optgroup> • This element has <option> elements as its children. • It takes the same attributes as <option>. • 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="dark"> <option value="b6">Baltika 6</option> <option value="gu">Guinness"/></option> </optgroup>

the <textarea> element • This creates a text area where you can put a large chunk of text. The contents of <textarea> contains the initial value. • It takes some attributes • 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.

<label> • This is a way to add labels for inputs. • Normally, the input label should be taken from the label= attribute of the control. But that only works if the label= attribute is available. • <label> can be used if the other method can not be.

the for= attribute to label • The for= attribute says what control the label is for. You reference the cont • You reference the control by its id=. • Example: <label for="height_input">your height:</label> <input id="height_input" name="height" type="text"/>

the push button <button> • This makes a button for decoration. • It is not a form element stricly speaking because it can appear outside <form> • 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 to set a value. • It also takes the core and i18n attributes. • And it can have character contents!

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.

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.

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

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

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.

triggering script example • 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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

LIS650 lecture 5 forms, JavaScript and the DOM