lesson 10. forms forms and form elements are used to collect information from the user and pass it...
TRANSCRIPT
Lesson 10
Forms
• Forms and form elements are used to collect information from the user and pass it on to the server for storage and/or processing.
• They are an important part of any e-commerce site that deals with customers, since they provide a familiar, easy-to-use interface.
Example of common form elements
<form>
• The form tag is used to define a form within a page.
• The different form elements, such as text boxes and radio buttons, must be between the <form> and </form> tags in order for their values to be collected and sent with the HTTP request, when the form is submitted.
<form>
• When the form is submitted by the user, the data collected is usually sent to a program or script (Perl, C, etc.) on the server which processes the information appropriately.
• These programs translates information since the server and client machines might be running under different OS.
<form> (continued)
• There are several attributes normally required for the <form> tag; action and method.
The action attribute gives the URL of the program that will receive the information collected by the form.
The method attribute specifies the way in which the collected information will be sent.
<form action= >
• Normally, the relative or absolute URL of the destination program is supplied.
• e.g.
<form action=“../cgi-bin/script”>
<form action=“http://www.site.com/cgi-bin/script2”>
Forms
<head> <title>Test Form1</title></head><body> <form name="form1" action="http://cs.senecac.on.ca/~int222/cgi-bin/echo-c.cgi" method="POST"> <input type="text" name='entry1' size="45" value="Please enter your name here!“ /> </form></body>
Forms
<head> <title>Test Form1</title></head><body> <form name="form1" action="http://cs.senecac.on.ca/~int222/cgi-bin/echo-c.cgi" method="POST"> <label> Name: <input type="text" name='entry1' size="45" value="Please enter your name here!"> </label> </form></body>
<form method= >
• When the form data is submitted, it collects all the information collected by the various form elements, and sends it to the server as name/value pairs.
• It does this in one of two ways, either with the get method, or with the post method.
• e.g.<form action=“http://www.site.com/cgi-bin/script2”
method=“get”><form action=“http://www.site.com/cgi-bin/script2”
method=“post”>
An alternate method of form handling
• It may sometimes be necessary to collect information on a form, but you may have no way to process the data on the server-side, due to lack of access to a CGI (common gateway interface) or other server-side processing tool.
• An alternative is to use the mailto: form of URL in the action attribute of the form. This will cause the data in the form to be sent in an email as name/value pairs. The data must then be extracted from the email and processed separately.
• If you do this, you must also use the enctype attribute to set the form in which the data is transmitted to plain text.
Form elements
• Most of the form elements use the <input> tag, and take the form;
<input type=“_______”> Depending on the kind of element, name and value may be required attributes.
• The type specifies the kind of element (e.g. text, checkbox, etc.)
• The elements which are different are the drop-down menu/scrolling list, which uses the <select> tag, and the textarea, which uses the <textarea> tag.
Form elements• The name, (if any) specifies an arbitrary name
which the collected data will be referred to by.<input type="_____" name = "_____">This applies to the following elements;– text– password– radio– checkbox– reset– submit– button– file
Form elements: text• The text element represents a single-line box
which allows the user to enter information.
• The text box is used often, to collect any type of information that the user cannot select from a list.
• The required attributes are type and name
e.g.<input type=“text” name=“last_name”>
Form elements: text• Optional attributes include;
– value, which sets a default value in the box– size, which sets how many characters wide the
box is– maxlength, which sets how many characters
can be entered in the box
If size is less than maxlength, the text will scroll when necessary.
Form elements: text• The text box does not control what characters are
entered (e.g. you may expect a name but get a number). Validation of the entered data must be done separately.
• e.g.
<input type=“text” name=“area_code” value=“905” size=“3” maxlength=“3”>
When the form containing this element is submitted, the name/value pair sent to the server will be area_code=905
Form elements: password• The password element looks and works just like
the text element, except that any text entered is marked by * characters.
• Keep in mind that when you use the get method to transmit a form that collects a password, the password will be visible in plain characters in the URL, which may be seen over one’s shoulder, or can easily be detected by network URL sniffers. Also, this information may end up in a shared bookmark or favorites file that other users may see.
Form elements: password• e.g.
<input type=“password” name=“password” size=“8” maxlength=“8”>
When the form containing this element is submitted, the name/value pair sent to the server will be password=abcdefgh
Form elements: radio
• Radio buttons represent a group of buttons where only one button of the group can be marked as selected at any time. Selecting one button automatically deselects any button of the group that was selected before it.
• An example of their use is in an online test with multiple choice questions where there is only one correct answer.
• The required attributes are type, name and value. e.g.<input type=“radio” name=“answer”
value=“b”>• The value you assign to the value attribute should
be whatever you want to be sent to the server.
Form elements: radio
• An optional attribute is “checked” which indicates that the radio button should be the one marked as the default choice. Note that checked must appear without the quotes.
• The name must be the same for all radio buttons of the same group. This is what allows only one button at a time to be selected.
Form elements: radio
• e.g.
<input type=“radio” name=“choice” value=“a” checked><br>
<input type=“radio” name=“choice” value=“b”>
When the form containing this element is submitted, the name/value pair sent to the server will be choice=a
Form elements: checkbox
• Checkbox buttons function independently of each other.
• An example of their use is in an online form where multiple options may be applicable.
• The required attributes are type, name and value.
e.g.<input type=“checkbox” name=“options” value=“linux”>
• An optional attribute is “checked” which indicates that the checkbox should be checked by default. Note that checked must appear without the quotes.
Form elements: checkbox
• e.g.
<input type=“checkbox” name=“os” value=“linux” checked><br>
<input type=“checkbox” name=“os” value=“unix”>
When the form containing this element is submitted, the name/value pair sent to the server will be os=linux
Form elements: textarea
• The textarea uses its own tag, <textarea></textarea>. It allows the user to enter free form text, as with the text element, but accepts more than one line of text.
• The only required attribute is name.
• Optional attributes are cols and rows, which specify the physical size of the area.
• Any default text goes within the tags
Form elements: textarea
• e.g.
<textarea name=“answer" rows="2" cols="30">This is the default text.</textarea>
When the form containing this element is submitted, the name/value pair sent to the server will be answer=This+is+the+default+text.
Form elements: submit
• The submit button will cause the form and all its data to be submitted to the server via the URL specified in the form’s action attribute. An optional name and value may be specified. This can be necessary when there is more than one submit button on a form, and you want the server-side program to know which one was pressed.
• The default label on the button is Submit.• e.g.
<input type=“submit”>
Form elements: submit
• If you add the value attribute, that will be the label on the button.<input type=“submit” value=“part 1”>
• If you add a value and a name, the value will be the label on the button and the name and value will be sent as a name value pair with the rest of the form.
• e.g.<input type=“submit” name=“vote_now” value=“part 1”>
When the form containing this element is submitted, the name/value pair sent to the server will be vote_now=part+1
Form elements: reset
• The reset button will cause the form and all its data to be removed and replaced with the default values, if any.
• The server is not involved when this button is used.
• The default label on the button is Reset.• e.g.
<input type=“reset”>
Form elements: reset
• An optional value may be specified, which will then be used as the label for the button. The effect of pressing the button will be the same.
• e.g.
<input type=“reset” value=“Clear Form”>
Form elements: button
• It is possible to define a generic button. This button does not submit or reset a form.
• Instead, it relies on the programmer to define its function, usually with JavaScript.
• Use of this button will be covered in a later part of the course.
Form elements: select
• The select tag allows the programmer to provide a menu of choices for the user to choose from.
• The select tag contains a number of option tags, one for each choice the user will be offered.
• The menu box will expand in width to fit the longest value.
• There are two ways to use the select tag;
Form elements: select
1. By only specifying the name attribute, you create a dropdown list of items, only one of which can be selected at a time.
By adding the selected attribute to one of the option tags, the default choice can be specified.
Form elements: select
e.g.<select name=“menu">
<option value=“first item”>item 1</option>
<option value=“second item” selected>item 2</option>
<option value=“third item”>item 3</option>
</select>
When the form containing this element is submitted, the name/value pair sent to the server will be menu=second+item
Form elements: select
2. By specifying the name attribute and a size greater than 1, you create a dropdown list of items, only one of which can be selected at a time.
By adding the multiple attribute to the select tag, multiple items can be selected at the same time. Multiple items are selected by holding down the control key and selecting individual items, or by holding down the shift key, and selecting two items, to choose the selected items and all those between.
Form elements: select
e.g. <select name=“menu" size="3" multiple>
<option value=“1”>choice 1</option> <option value=“2”>choice 2</option> <option value=“3”>choice 3</option> <option value=“4”>choice 4</option>
<option value=“5”>choice 5</option> </select>
When the form containing this element is submitted, the name/value pair sent to the server will be menu=3&menu=5
Note: if size is set at one, and the multiple attribute is included, the element takes on a slightly different appearance.
Form elements: select
• If you use the value attribute of the option tag, its value will be sent to the server, otherwise, the value between the <option></option> tags will be sent. This means that you can show the user one set of values to choose from, but send another value to the server, one which might have more meaning to the server-side program, or be easier to validate and process.
Form elements: select
• e.g.
If you present the user with a list of provinces to choose from, you can show them the whole name, but only send the server the official two letter abbreviation for the selected province. This makes it easier to validate, process, and store in a database. <select name=“province">
<option value=“ON”>Ontario</option>
<option value=“BC” selected>British Columbia</option>
<option value=“AB”>Alberta</option>
</select>
The user sees but the server gets province=ON
Form elements: file
• The file element allows the user to select a file which will be sent to the server along with the rest of the submitted form data.
• The user can either enter a file name in the text box, or browse for the file graphically, using the tool provided by the operating system.
• Like a regular text box, the maxlength and size attributes can be set if desired.
Form elements: file
• e.g.
<input type="file" name="file_to_upload">
Form elements: file
• Note: In order to actually send a file, rather than just the name/value pair that is generated, you must set the enctype attribute in the form tag to “multipart/form-data”, and set the method to “post” when using the file element.
• The server must then handle the received data, including any exceptions, such as a non-existent file name, or an unknown file format. This is beyond the scope of this course.
Form elements: hidden
• One element which hasn’t yet been introduced is the hidden element.
• This is used to automatically send a name/value pair to the server along with the other information collected by the form.
• Hidden fields can be used to tell the server-side processing program what page the submission came from, and can be used to maintain session between pages.
Form elements: hidden
• e.g.
<input type=“hidden” name=“sequence” value=“43”>
When the form containing this element is submitted, the name/value pair sent to the server will be sequence=43
Using forms
• Select meaningful names for the form elements, since these names will refer to the values that you will need to process on the server. Apply the same principles that you use in selecting variable names in other programming languages, with particular attention to the guidelines used for the language that you will be using to process the form.
Using forms
• When designing a form, give consideration to the kind of element to use. Think about the following;– What information do I need?– How will it be validated?– How will it be processed?– How can the possible input be limited, but still
effective?
Using forms
• e.g. – The user’s name must be entered in a text box,
since it can be anything, but the province can be selected from a drop-down list or menu, since the number of possible choices are fixed, and not likely to change. This limits the possible choices that the user has, and makes more precise validation possible. Otherwise, if a textbox were used, the user could type in the province name many different ways (ontario, ONTARIO, Ontario, Ont., Ont, on, ON, etc.). In this case, it is next to impossible to check if a valid province name has been entered.
Using forms
• e.g. – You need to collect a phone number for North
America. You know that the area code will be 3 digits long, so you can provide a text box with a maxlength set to 3.
Using forms
• e.g. – The phone number will be 7 digits long, so you
can set that text box maxlength to 7. There is no sense in collecting the - in a phone number, since you may end up removing it to store or process the number.
– You could use a select menu with the all area codes for N.A., but this would prove difficult to maintain, since they will be changing fairly often (there will two area code splits in the Toronto area this year alone). If the correct area code is not on the list, the user cannot give you the correct information.
Using forms
• You must give an appropriate label to each of the form elements.
• These labels communicate with the user, but do not affect the name given to the element with the name attribute.
• Use a table to layout a form (with or without borders), putting the label in one column, and the element beside it in the next column. This makes the form easier to read and use.
Using forms
• When designing the layout of a form, keep in mind the context.
• Most HTML forms have similar paper versions, and users will be confused if the normal order of fields is not followed, and they may omit required information by mistake.
• Do not deviate from the normal name, address, phone number order unless you have a very good reason.
Using forms
• You must take great care in choosing labels that clearly and unambiguously tell the user what information is expected in each particular element. Remember that there will be no one that they can easily ask if they don’t understand, and what is obvious to you may not be obvious to others.
Using forms
• When designing pages with forms, keep in mind that the data that you are collecting must be processed, and probably stored, and design your forms to make this easier. This means that you should give thought to the variable names you choose, and what data you actually send to the server. For example, why send province=Ontario when you can send province=ON. This is a smaller piece of data to process and store, and is just as meaningful.
Example of common form elements
Review
• Forms are an important part of many websites, since they allow you to collect and process information provided by the user.
• A form consists of various form elements, such as text boxes, radio buttons, and menus.
• A form is defined by the <form> tag. All the elements to be included in a form must be between the <form> and </form> tags.
Review
• The destination of the information collected in a form is usually a program on the server which can process the data. The URL to which the data is sent is set by the action attribute of the <form> tag. The URL can either be relative or absolute.
• Form information can be sent to the server in one of two ways, by setting the method attribute of the <form> tag to GET, or POST. Each has its advantages and drawbacks, and thought must be given to the appropriate method in each case.
• Each of the form elements requires its own syntax. You should practice to become familiar with use of all the elements.
<form method=“get” >
• This is the simpler of the two ways.• All the name/value pairs representing the form
elements and their data are appended to the URL specified in the action attribute, as in the following example;
www.test.com/cgi-bin/script?textfield1=some+text&textfield2=some+more+text
• Note that a ? is used to separate the URL from the name/value pairs, and that the name/value pairs are separated from each other by &.
<form method=“get” >
• Since URLs cannot contain spaces or some other characters, the information is encoded by replacing spaces with +, and other characters with the hexadecimal equivalent (e.g. a comma is represented as %2C)
• If the form tag has no action attribute, and the method is set to “get”, when you submit the form, the page displayed in the browser will not change, but the URL will include the name/value pairs submitted. In this way, you can see how the browser is encoding the information it is sending. This can be useful both for learning, and for debugging, when the suspected problem may be in the data being sent by the form.
<form method=“post” >
The post method involves two steps;
1 The browser makes contact with the server specified in the action attribute.
2 Once a connection is made, the data is sent to the server as a separate transmission which the web browser user is not aware of.
get vs. postget
• Data collected by the form appears in the URL box of the browser, and in the URL recorded in a browser’s history file. This may present privacy concerns, especially if the user is using a shared machine, such as in a college or public library.
• The get method can be a little faster when there are only a few items to include, and security is not a concern.
• You can allow the user to access a server- side application without using a form or submit button, by providing a link with the <a href= > tag as usual, and manually adding the parameters to be sent e.g.<a href=“../cgi-bin/script?x=45&y=3”>compute</a>
post• Data collected is not seen by the
user, and not recorded as part of the history file.
• The post method is better for forms with a lot of fields or elements, and ones that have text or textarea elements with a lot of content in them.
• The post method will only work when the data is submitted with the use of a form.
Example of common form elements