LIS651 lecture 0 forms Thomas Krichel

course resources Course home page is at The course resource page The class mailing list Me. –Send me . Unless you request privacy, I answer to the class mailing list. –Skype me at thomaskrichel. Get skype from skype.com.

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 xamples/forms

This element encloses a form. It is a block level element. All form elements (discussed now) should be children of the element. There may be more than one in the HTML page. accepts the core and i18n attributes. And it has some other attributes. Some of these are required.

the action= attribute of 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 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 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 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 element This creates a text area where you can put a large chunk of text. The contents of 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. also admits the i18n, core and input attributes (discussed now)

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 The input with a lower number will be dealt with before the one with a higher number.

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.

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.

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

more on admits the core, i18n and the input attributes. It requires a type= attribute. It takes a name= attribute.

the type= attribute of This attribute can only take the following values –textenter text –password enter text, but don't echo on screen –checkboxenter checks on boxes –radiocheck one select –submitpress to submit form –resetreset form –fileupload file (can only be done with POST) –hiddenhidden form data, not shown –imageimage map submission, not covered further –button a button

the name= attribute of 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 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 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 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 dont specify a maximum length there is no limit. But it is good security to have a limit.

the value= attribute of This gives the initial value of the. 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 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.

the src= attribute of 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 element. Each element can have a number of elements that contain the options that the user can choose from. also takes the core and i18n attributes, and some others that we see now.

attributes to name= has the name of the control that is set multiple="multiple" allows multiple selections. However, I dont 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.

selectable choice: Within a there are a series of elements that contain the selections. takes the core, i18n and form attributes. Example Bruch Karlsberg

value= attribute to value= can be used to set the value of the control when the value set is different than the contents string of the element. Example Brauerei G. A. Bruch, Saarbrücken

other attributes to label= can be set to label the option. if it is set, the user agent should use label rather than the content of the 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.

This element has elements as its children. It takes the same attributes as. It is used to create hierarchical options. This is mainly a time and space-saving device in the presence of many options. Say Baltika 6 Guinness"/>

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. 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 control by its id=. Example: your height:

the push button This makes a button for decoration. It is not a form element strictly speaking because it can appear outside 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!

Thank you for your attention! Please shutdown computers when you are done.