LIS651 lecture 0 forms

1. Thomas Krichel 2010-01-21 LIS651 lecture 0forms

2. course resources • Course home page is at http://wotan.liu.edu/home/krichel/courses/lis651n10s • The course resource page http://wotan.liu.edu/home/krichel/courses/lis651 • The class mailing list https://lists.liu.edu/mailman/listinfo/cwp-lis651-krichel • Me. • Send me email. Unless you request privacy, I answer to the class mailing list. • Skype me at thomaskrichel. Get skype from skype.com.

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/lis651/examples/forms

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. • There may be more than one <form> in the HTML page. • <form> accepts the core and i18n attributes. And it has some other attributes. Some of these are required.

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

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

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

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

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

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. 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 input attributes (discussed now)

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

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

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

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

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

20. 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'].

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

27. attributes to <select> • name= has the name of the control that is set • multiple="multiple" allows multiple selections. However, I don’t know how they are being transmitted. By default, multiple= is not set. • size= sets how many rows of the selection should be displayed at any one time.

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> • 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='selected' can be used to select an option.

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

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

33. the for= attribute to label • The 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"/>

34. the push button <button> • This makes a button for decoration. • It is not a form element strictly 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!

35. Thank you for your attention! Please shutdown computers when you are done. http://openlib.org/home/krichel