IST263: Lecture 5.

User's input in HTML.

So far we have been talking about how to display some information for users. However, sometimes we need tools to send some information from users. We need a way to collect some information and send it to the web server. HTML forms are especially made for this purpose. They allow to obtain some information from user and then pass all that information to a script on the web server.

Forms.

To insert a form into an HTML document we use special tag <form> and closing tag </form>. This tag have several optional parameters:

action

method

enctype

name
None of these parameters is required, but forms are very rare used without action parameter. The value of the action parameter specifies the script on the web server to send all info to and to execute. So, it doesn't make any sense to have a form without action parameter, although, sometimes we need to do this (we'll see it later).

Parameter method can take two possible values: GET or POST. The value of this argument tells the browser how the data from the form is to be sent to the server. Value GET adds all of the data from the form to the http script address. And you can see in your address bar a string like this:

Value GET is the default value for this parameter. Value POST being assigned to the parameter method makes the browser to send all user's data in a different way without displaying them in the address bar. It's not a bad idea to use method=post when you type your password in an HTML form.

Parameter name allows to assign a specific name to any form. This is convenient when we have several forms on a page and have an intention to use data from these forms in JavaScript. We will understand the importance of form names later. So far take it as a hint:

Name your form once you created it. Try to give all of your forms names that describe what info from this form is for.

You shouldn't worry about parameter enctype unless you are trying to upload a file to the web server. Thus, a typical example of HTML form would be:

<form name="firstfrm" action="myscript.cgi">
</form>

Of course this form doesn't actually do anything because we did not use any tools to actually collect information for user. To get some information from users HTML provides several tags we can use inside forms. These tags are:

<input>

<select>

<textarea>

<button>

Tag `<INPUT>`.

Tag input is probably the most popular tag in HTML forms. It provides a lot of different ways of asking info from users. Tag input doesn't require a closing tag and it's never used without additional arguments. The most important parameter type of this tag makes is look very different depending on the assigned value. Let's take a look at possible values of the parameter type more closely.

Type `TEXT`

Tag input with type=text creates an element for entering a text string. This element can have any of the following parameters:

name the value of this parameter gives a name for this particular text string. This name will appear in the address bar (if we use GET method of the form) on the left side of the equal sign. On the right side there will be the text string entered by the user.
maxlength an integer value of this parameter specifies the maximum amount of character allowed in the text field. By default it is unlimited.
size an integer value of this parameter sets the maximum number of displayed characters.
value a string value of this parameter sets the default value of the string. This value will be displayed in the text field initially. Being changed this value can be restored by clicking on Reset button of the form.

Here is a typical example of a text field in a form:

Code	Result
<form name="userfrm" action="register.cgi"> Your name: <input type=text name="uname" size=16 maxlength=16> <br> University: <input type=text name="univ"> </form>	Your name: University:

Note: do not forget to name your text fields!

Type `PASSWORD`

Password field is very much like the text field. The only difference between them is that every character user types in the password field will appear as an asterisk. Remember that HTML does not provide any encryption for password fields. The password you typed will be sent as a text. Moreover, if you use GET method it will be displayed in the address bar. Here is a short example:

Code	Result
<form name="userfrm" action="register.cgi"> Login: <input type=text name=login size=8 maxlength=8> <br> Password: <input type=password name=passwd size=12 maxlength=12> </form>	Login: Password:

Type `FILE`

FILE type creates a text field and a Browse button for entering a local file name. User can either manually type in name of the file or click on the button and select a file from pop-up dialog window. If you want the use send a file to the server you have to set property method of the form equal POST and also set encryption type enctype="multipart/form-data". In this case the file selected by the user will be sent to the script specified as parameter action of the form. Otherwise, user will send only the name of the file, but not the content. Note that what ever happens to the file on the server is up to the script; that is, you should take care about saving this file in the script if you want to store it on the server.

The following example illustrates how to send content of a file to a server script:

Code Result

<form name=fsave action="save.pl" method=post enctype="multipart/form-data"> File: <input type=file name=fname> </form>

File:

Code	Result
<form name=fsave action="save.pl" method=post enctype="multipart/form-data"> File: <input type=file name=fname> </form>	File:

And this example will send only the file name to the script:

Code Result

<form name=fget action="save.pl"> File: <input type=file name=fname> </form>

File:

Code	Result
<form name=fget action="save.pl"> File: <input type=file name=fname> </form>	File:

Type `CHECKBOX`

INPUT tag of the checkbox type creates a check box that allows users to enter true/false values (checked/unchecked). Additional parameters of this type are:

value sets the value of the checkbox that would be sent to the server in the form name=value (this parameter is required). The values of unchecked boxes are not to be sent.
name sets the name of the check box. The meaning of this parameter is exactly the same as for all other input elements. Although, for check boxes this parameter also allows to combine several check box elements in a group. To do so the value of the property name should be set identical for all elements that belong to a group. In this case the web server will get information about checked boxes in the form name=values of checked boxes separated with commas.
checked this parameter has no value and sets the checkbox's default value to checked.

The following example shows how to use a group of check boxes:

Code	Result
<form name=boxfrm action=getdata.pl> <input type=checkbox name=account value=CH checked> Checking account<br> <input type=checkbox name=account value=SV> Saving account<br> <input type=checkbox name=account value=CD> CD account<br> </form>	Checking account Saving account CD account

Code

Result

<form name=boxfrm action=getdata.pl>
  <input type=checkbox name=account value=CH checked> Checking account<br>
  <input type=checkbox name=account value=SV> Saving account<br>
  <input type=checkbox name=account value=CD> CD account<br>
</form>

Type `RADIO`

RADIO type creates a radio button that also allows to enter true/false values. The difference between radio buttons and check boxes that only one radio button can be selected from a group. Additional parameters:

value sets the value of the radio button that would be sent to the server (this parameter is required).
name sets the name of the radio button. Radio buttons from the same group must have the same name.
checked this parameter has no value and sets the radio button default value to On.

Example of radio buttons:

Code	Result
<form name=btnfrm action=getdata.pl> Select your operating system:<br> <input type=radio name=os value=95> Windows 95<br> <input type=radio name=os value=2000> Windows 2000<br> <input type=radio name=os value=XP checked> Windows XP<br> <input type=radio name=os value=Linux> Linux<br> </form>	Select your operating system: Windows 95 Windows 2000 Windows XP Linux

Code

Result

<form name=btnfrm action=getdata.pl>
  Select your operating system:<br>
  <input type=radio name=os value=95> Windows 95<br>
  <input type=radio name=os value=2000> Windows 2000<br>
  <input type=radio name=os value=XP checked> Windows XP<br>
  <input type=radio name=os value=Linux> Linux<br>
</form>

Type `SUBMIT`

Creates a submit button upon clicking on which user sends data to the server script. By default this button is displayed as a grey button with "Sumbit" text on it ("Submit query" in Netscape). Text on the button can be changed by setting parameter value="new text". Optional parameter name may also be assigned but not required for submit buttons. If you have this parameter set, then additional info in the form name=Submit will be sent to the server.

The form below has two submit buttons. One with default settings and the other with changed text on it:

Code Result

<form name=btnfrm action=getdata.pl> <input type=submit><br> <input type=submit value=OK> </form>

Code	Result
<form name=btnfrm action=getdata.pl> <input type=submit><br> <input type=submit value=OK> </form>

Type `RESET`

INPUT elements of the type reset creates a button upon clicking on which user resets all elements of the form in their default values. Optional parameter value allows to change the text on the button. The default text is "Reset". The following example shows how this element works:

Code	Result
<form name=osfrm action=getdata.pl> Your name: <input type=text name="uname" size=16 maxlength=16><br> University: <input type=text name="univ" value="Marshall"><br> Operating system:<br> <input type=radio name=os value=95> Windows 95<br> <input type=radio name=os value=2000> Windows 2000<br> <input type=radio name=os value=XP checked> Windows XP<br> <input type=radio name=os value=Linux> Linux<br> <input type=submit value=OK>   <input type=reset value=Clear> </form>	Your name: University: Operating system: Windows 95 Windows 2000 Windows XP Linux

Code

Result

<form name=osfrm action=getdata.pl>
 Your name: <input type=text name="uname" size=16 maxlength=16><br>
 University: <input type=text name="univ" value="Marshall"><br> 
 Operating system:<br>
 <input type=radio name=os value=95> Windows 95<br>
 <input type=radio name=os value=2000> Windows 2000<br>
 <input type=radio name=os value=XP checked> Windows XP<br>
 <input type=radio name=os value=Linux> Linux<br>
 <input type=submit value=OK> &nbsp;
 <input type=reset value=Clear>
</form>

Type `BUTTON`

Creates a button with the text specified by value parameter on it. This button doesn't have any assigned action by default, but can be very useful if it's combined with some JavaScript code because you can assign certain actions that need to be taken if user clicks on the button. Example:

Code	Result
<form name=osfrm action=getdata.pl> <input type=button value="Just Button" onClick="alert('Nothing happens!!!');"> </form>

Type `IMAGE`

Element of the type creates a graphical Submit button. The image file to use is set by parameter src just like for img tag. One more parameter align is identical to the same parameter for tag img. Example:

Code	Result
<form name=osfrm action=getdata.pl> This is my button: <input type=image src="img/check.bmp"> </form>	This is my button:

This element has one more interesting feature when user clicks on the image, then two more parameters are added to all parameters for the server. These new parameters are:

name.x=value

name.y=value
where name is the name assigned to this element and values are the X and Y coordinated of the point of the image where user made a mouse click.

Type `HIDDEN`

Element of this type will not be displayed on the screen at all, however, it's name and value will be sent to the browser. These elements are useful when you want to create a several-page form and only the last page actually gets all needed info. Then every page needs to have all data from all previous pages, but you do not want to display it. Example:

Code	Result
<form name=previnfo action="page3.pl"> <input type=hidden name=login value="testuser"> <input type=hidden name=city value="Huntington"> University: <input type=text name=univ> <input type=submit value=OK> </form>	University:

Code

Result

<form name=previnfo action="page3.pl">
 <input type=hidden name=login value="testuser">
 <input type=hidden name=city value="Huntington">
 University: <input type=text name=univ>

 <input type=submit value=OK>
</form>

This file contains a set of different examples that illustrate usage of the tag input.

Tag `<SELECT>`.

This tag creates a list of options and allows user to choose one or more items from the list. Of course, the same thing can be done using types radio or checkbox of the tag input, but if the number of choices is too big, then it increases the size of the form. The select tag displays the options as a scroll down list or as a menu and doesn't take that much space. Parameters of this tag are:

name this required parameter works identical to all name parameters of the input tag.
size the value of this parameter is an integer value that sets the number of options user can see at a moment. If the value is 1, then the select element will be displayed as a drop down menu. If value of size is greater than 1, then it will be a scroll down list that displays exactly size elements at a moment.
multiple this parameters doesn't have to have any value (just like parameter checked for check boxes). If a select elements is set to be multiple, then user can choose more than one option form the list.

All elements of the list are to be assign using tag <option> inside the <select>. Tag <option> does not require a closing tag. It has two optional parameters:

selected works identical to parameter checked of check boxes making this element of the list selected
value the string which will be sent to the server. If this parameter is not assigned, then the text following the option tag will be sent.

This is a short example of usage the select element:

<form name=selectfrm action=test.cgi>
 <select name=classes multiple>
  <option value=163>IST163: Programming practicum with C++ 
  <option value=263>IST263: Web Programming 
  <option value=264>IST264: Topics in Hardware Technology 
  <option value=362>IST362: Netwok Protocols 
  <option value=363>IST363: Network Administration 
  <option value=366>IST366: Database Design and Report Writing 
  <option value=466>IST466: Database Programming 
  <option value=480>IST480: Network Programming  
 </select>
</form>

Detailed examples could be found in this file.

Tag `<TEXTAREA>`.

This tag creates a field to enter multi-line text. This text will be displayed inside the form as a rectangular block with horizontal and vertical scroll bars. This tag requires closing tag </textarea>. Parameters of the tag <textarea>:

name same old story.
cols integer value of this parameter sets the number of visible columns of the entered text
rows integer value of this parameter sets the number of visible rows of the entered text
disabled if this parameter is present, then the text element will be displayed, but user wont be allowed to edit the text in it. (This parameter doesn't need a value.)

Text placed between tags <textarea> and </textarea> is considered to be the default value and will be displayed in the form. The simplest example is this:

Code	Result
<form name=previnfo action="page3.pl"> <textarea name=letter> This is default text. </textarea> </form>	This is default text.

An example illustrating usage of all parameters can be found in this file.

Tag `<BUTTON>`.

Tag button provides one more way of creating button in your forms. The difference between this tag and tag input of the type button is that everything included between <button> and closing tag </button> will be displayed on the created button. That feature allows designers to create buttons that contain multi-line text or even images on them. Optional parameter type of the tag button can take one of the following values:

submit this button will work as a submit button

reset to create a reset button

button to create a button without specifying a certain action. (default value)
Here is a small example:

Code	Result
<form name=btnfrm action="page3.pl"> <button type=submit><img src="img/check.bmp"> OK</button>   <button><img src="img/ignore.bmp"> Cancel</button> </form>

This file contains a complete example.

User's input in HTML.

Forms.

Tag <INPUT>.

Type TEXT

Type PASSWORD

Type FILE

Type CHECKBOX

Type RADIO

Type SUBMIT

Type RESET

Type BUTTON

Type IMAGE

Type HIDDEN

Tag <SELECT>.

Tag <TEXTAREA>.

Tag <BUTTON>.

Tag `<INPUT>`.

Type `TEXT`

Type `PASSWORD`

Type `FILE`

Type `CHECKBOX`

Type `RADIO`

Type `SUBMIT`

Type `RESET`

Type `BUTTON`

Type `IMAGE`

Type `HIDDEN`

Tag `<SELECT>`.

Tag `<TEXTAREA>`.

Tag `<BUTTON>`.