lis651 lecture 0 forms thomas krichel 2010-01-21
Post on 27-Mar-2015
216 Views
Preview:
TRANSCRIPT
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.
top related