Web server tool lets you enhance HTML forms

Interactivetools.com specializes in tools based on Perl and JavaScript. We discovered the company by stumbling across its free editing component called htmlArea. The purpose of htmlArea is to enhance the textarea fields in HTML forms.

In our quest to help our alter ego find useful tools for the Web server and computer lab at his son’s school we have tried all sorts of products. We’ve delved into calendaring tools, JavaScript editors and all sorts of Web server scripts. In this latter category we found some tools from a company called Interactivetools.com that we just love.

Interactivetools.com specializes in tools based on Perl and JavaScript. We discovered the company by stumbling across its free editing component called htmlArea. The purpose of htmlArea is to enhance the textarea fields in HTML forms. For example:

Some text.

This coding creates a form with a single textarea field that contains the string “Some text.” and a submit button. It could be used to add to and update content on a Web site or in a content-management system. Unfortunately, as it stands it would require that users hand-code HTML in the textarea if anything other than plain text is wanted. For the geeks among us this is not a great hardship but for anyone else with less time to waste and less interest in such esoterica it would be a royal pain to use.

HtmlArea uses two chunks of JavaScript to augment the textarea tags. One JavaScript chunk goes in the area of your Web page and a copy of the other gets added to the form for each textarea that is to use the htmlArea script, thus:

Some text.

editor_generate(‘S1’);

The result transforms each referenced textarea into a WYSIWYG word processor. The textarea is topped with a toolbar that lets you change the font, color and size of text, and to make it bold, italic, underlined and so on.

You can insert horizontal lines, hyperlinks and images, add bulleted and numbered lists as well as justify, indent and unindent paragraphs. You even can have the formatted content shown as raw HTML. When you hit the submit button the raw HTML text is sent to whatever action is defined for the form – typically a server-side script or CGI application.

Better still, exactly which features are available depends on how you configure the tool. For naive users you might leave out everything but font, font size and attribute choices. HtmlArea also can be modified so that links outside the editing frame can modify the WYSIWYG content. Thus you could add a series of links or buttons to insert boilerplate text, standard links and the like.

Installation is simple: Just download the archive file  and unzip the contents into a subdirectory under the root of your Web site.

The catch is that htmlArea requires Internet Explorer 5.5 or later running on Windows because it uses the MSHTML Editing Platform in IE 5.5+ browsers. The MSHTML Editing Platform defines a contentEditable attribute or designMode property that makes sections of a Web page editable and provides some built-in commands for performing text-editing operations (such as bold, italic, center and insert image).

How does htmlArea work? According to Interactivetools.com, “it replaces a textarea with a [user-definable] toolbar, an in-line frame that has the contentEditable attribute set to true, and a hidden field with the same name as your original textarea that gets updated automatically when you modify content in the editor.”

A neat feature is that the htmlArea subsystem is backward-compatible with other browsers – they get a regular textarea field instead of the WYSIWYG editor when they load a page with htmlArea support.

Next week, a tool built on textArea. POST your text to gearhead@gibbs.com.