CGI.pm FORM defaults

During the dotcom era, components in web development using Perl, especially in the context of Perl/CGI-based frameworks, were often referred to as "widgets." This terminology was particularly common in web application frameworks and templating systems that Perl developers used to build dynamic user interfaces. The term "widget" was borrowed from graphical user interface (GUI) development, where it referred to elements like buttons, text fields, and menus. Frameworks like Perl's *HTML::Widgets* module provided ways to create and manage these UI components, which were called "widgets" for familiarity and ease of understanding.
The different FORM elements and the widgets the browser creates from them were listed in the first lesson of this module. In this lesson, we will look at each of them in sufficient detail for you to make use of their various features.
Optional features for the widgets are accessed via attributes in the HTML elements. For example, to set the size of a text field, you would use the SIZE attribute in the HTML like this:

<INPUT TYPE=TEXT SIZE=35>

This would give you a text field with enough space to type 35 characters. Keep in mind that most of these optional features do not work the same on different browsers.
I have put together a list of widgets and their attributes. You will need to study this list before you complete this lesson's exercise. So, without further ado:

All of the widgets use the NAME attribute for the name of the field. This is the name that is passed as the left side of the name=value pair that is sent to the server.
The only widgets with a different behavior for the NAME attribute are RADIO and IMAGE, so there is a description of that unique behavior for those widgets. Otherwise, we will omit the description of the NAME attribute for each widget.

<INPUT TYPE=TEXT> 
<INPUT TYPE=PASSWORD>

The TEXT and PASSWORD fields operate exactly the same, with the exception that the PASSWORD field has its display obscured. The attributes supported are:

SIZE	The width of the field in characters
MAXLENGTH	The maximum number of characters allowed in the field
VALUE	A default value for the text field. This also works for PASSWORD, but it seems kind of silly.

• PASSWORD field:
  The PASSWORD field works exactly the same as the TEXT field. It sends its value to the server in the clear. It should not be used for sending sensitive information (like passwords, for instance).
  The PASSWORD field is fine for validating a user profile for a nonsensitive application like Personalized Yahoo for example, but it is not secure enough for protecting important data.

<INPUT TYPE=CHECKBOX>

The CHECKBOX widget is an on/off selector. It is usually rendered as a small box that can be checked or blank.
The name/value pair will be either name=on or name=value, if the VALUE attribute is used. These are the attributes for the CHECKBOX widget:

VALUE	The value that will be sent if the box is checked.
CHECKED	If present, this makes the default state checked.

<INPUT TYPE=RADIO>

Radio widgets are like grouped check boxes. Each radio button can be either on or off, but only one radio button in a group can be on at a time. A group of radio buttons are defined by giving them all the same NAME. Each radio button in a group should have a different VALUE so that you can distinguish which one is checked.

<INPUT TYPE=SUBMIT>

This widget is the submit button for the form. A form may have more than one submit button. You will be able to determine which one was clicked by giving them different names.

VALUE

Used to set the text that is displayed in the button

<INPUT TYPE=RESET>

The RESET widget is a button that resets the form. It does not generate a name/value pair.

VALUE

Used to set the text that is displayed in the button

<INPUT TYPE=HIDDEN>
The HIDDEN field is used for sending informational data to the server. It is not displayed, but its name/value pair gets sent to the server along with the form. This is commonly used for maintaining context (we'll use this later in this module).

This is a graphical version of the SUBMIT widget. It is commonly used for creating graphical buttons. When you click the image, it submits the form along with the coordinates of where the image was clicked. This widget generates two name/value pairs like this:

name.x=35
name.y=42

NAME	The name for the name/value pairs. Note the description above for this widget's unique behavior.
SRC	The URL of the image to display
WIDTH	The width of the image
HEIGHT	The height of the image
BORDER	Defaults to having a border. Use BORDER=0 to turn it off.
VALUE	There is no VALUE attribute for this widget!

<SELECT> 
</SELECT>

A widget that displays multiple choices, like a dropdown box or a selection box. This element is an HTML container, so it requires an end tag. Within the container, each selection option is indicated with an <OPTION> tag. For example:

<SELECT NAME="parts" SIZE=4 MULTIPLE>
  <OPTION> Strings
  <OPTION SELECTED> Pickups
  <OPTION> Bridge
  <OPTION> Neck
  <OPTION> Frets
  <OPTION> Tuning machines
</SELECT>

Use the SELECTED attribute in the OPTION tag to indicate default selections.

SIZE	The number of options displayed at once. Omit this for a drop-style box on some systems.
MULTIPLE	Include this attribute to allow multiple selections.

<TEXTAREA>

</TEXTAREA>

A free-form text-entry area. Note that the WRAP attribute is a common Netscape extension.

ROWS	The height of the widget's display area in lines of text
COLS	The width of the widget's display area in columns of characters
WRAP	These are possible values: HARD enables word wrap and passes the line breaks to the server. SOFT enables word wrap and does not pass the line breaks to the server. OFF disables word wrap.

CGI.pm has very reasonable defaults for these form elements. These are as follows:

attribute	default
method	method="POST"
action	action="myscript.cgi" or whatever your current cgi script is called.
enctype	enctype="application/x-www-form-urlencode"

We should not ever need to change the enctype within our form (in fact we should avoid even trying to do so). If you want to create a multi-part form (for uploading files etc) we create this in a different manner. We must use this syntax for multi-part forms if we want CGI.pm to handle them properly. We create a multi-part form like this:

print start_multipart_form({-action=>"myscript.pl", -method=>"POST"});
# print form internals.
print end_form();

Click the Exercise link below to create a form using tons of widgets.
Perl Widget - Exercise