CGI
view release on metacpan or search on metacpan
lib/CGI/HTML/Functions.pod view on Meta::CPAN
The script "frameset.cgi" in the examples directory shows one way to
create pages in which the fill-out form and the response live in
side-by-side frames.
=head1 SUPPORT FOR JAVASCRIPT
The usual way to use JavaScript is to define a set of functions in a
<SCRIPT> block inside the HTML header and then to register event
handlers in the various elements of the page. Events include such
things as the mouse passing over a form element, a button being
clicked, the contents of a text field changing, or a form being
submitted. When an event occurs that involves an element that has
registered an event handler, its associated JavaScript code gets
called.
The elements that can register event handlers include the <BODY> of an
HTML document, hypertext links, all the various elements of a fill-out
form, and the form itself. There are a large number of events, and
each applies only to the elements for which it is relevant. Here is a
partial list:
=over 4
=item B<onLoad>
The browser is loading the current document. Valid in:
+ The HTML <BODY> section only.
=item B<onUnload>
The browser is closing the current page or frame. Valid for:
+ The HTML <BODY> section only.
=item B<onSubmit>
The user has pressed the submit button of a form. This event happens
just before the form is submitted, and your function can return a
value of false in order to abort the submission. Valid for:
+ Forms only.
=item B<onClick>
The mouse has clicked on an item in a fill-out form. Valid for:
+ Buttons (including submit, reset, and image buttons)
+ Checkboxes
+ Radio buttons
=item B<onChange>
The user has changed the contents of a field. Valid for:
+ Text fields
+ Text areas
+ Password fields
+ File fields
+ Popup Menus
+ Scrolling lists
=item B<onFocus>
The user has selected a field to work with. Valid for:
+ Text fields
+ Text areas
+ Password fields
+ File fields
+ Popup Menus
+ Scrolling lists
=item B<onBlur>
The user has deselected a field (gone to work somewhere else). Valid
for:
+ Text fields
+ Text areas
+ Password fields
+ File fields
+ Popup Menus
+ Scrolling lists
=item B<onSelect>
The user has changed the part of a text field that is selected. Valid
for:
+ Text fields
+ Text areas
+ Password fields
+ File fields
=item B<onMouseOver>
The mouse has moved over an element.
+ Text fields
+ Text areas
+ Password fields
+ File fields
+ Popup Menus
+ Scrolling lists
=item B<onMouseOut>
The mouse has moved off an element.
+ Text fields
+ Text areas
+ Password fields
+ File fields
+ Popup Menus
+ Scrolling lists
=back
In order to register a JavaScript event handler with an HTML element,
just use the event name as a parameter when you call the corresponding
CGI method. For example, to have your validateAge() JavaScript code
executed every time the textfield named "age" changes, generate the
field like this:
print textfield(-name=>'age',-onChange=>"validateAge(this)");
This example assumes that you've already declared the validateAge()
function by incorporating it into a <SCRIPT> block. The CGI.pm
start_html() method provides a convenient way to create this section.
Similarly, you can create a form that checks itself over for
consistency and alerts the user if some essential value is missing by
creating it this way:
print start_form(-onSubmit=>"validateMe(this)");
See the javascript.cgi script for a demonstration of how this all
works.
=head1 LIMITED SUPPORT FOR CASCADING STYLE SHEETS
CGI.pm has limited support for HTML3's cascading style sheets (css).
To incorporate a stylesheet into your document, pass the
start_html() method a B<-style> parameter. The value of this
parameter may be a scalar, in which case it is treated as the source
URL for the stylesheet, or it may be a hash reference. In the latter
case you should provide the hash with one or more of B<-src> or
B<-code>. B<-src> points to a URL where an externally-defined
stylesheet can be found. B<-code> points to a scalar value to be
incorporated into a <style> section. Style definitions in B<-code>
override similarly-named ones in B<-src>, hence the name "cascading."
You may also specify the type of the stylesheet by adding the optional
B<-type> parameter to the hash pointed to by B<-style>. If not
specified, the style defaults to 'text/css'.
To refer to a style within the body of your document, add the
B<-class> parameter to any HTML element:
print h1({-class=>'Fancy'},'Welcome to the Party');
Or define styles on the fly with the B<-style> parameter:
print h1({-style=>'Color: red;'},'Welcome to Hell');
You may also use the new B<span()> element to apply a style to a
section of text:
print span({-style=>'Color: red;'},
h1('Welcome to Hell'),
"Where did that handbasket get to?"
);
Note that you must import the ":html3" definitions to have the
( run in 2.508 seconds using v1.01-cache-2.11-cpan-cdf2f3d4e48 )