LIS651 lecture 0forms

Thomas Krichel

2010-01-21

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.

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

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

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

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.

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

• It requires a type= attribute. It takes 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 'checked' 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="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.

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='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>

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

http://openlib.org/home/krichel

Thank you for your attention!

Please shutdown computers when you are done.