Pages

Tuesday, June 9, 2009

Free spell checkers in HTML Forms

A few days ago, some friends on toostep asked a question about doing a spell check in the postings and edit and do spell check in the comments. This post is in response to that question.

In this post I want to suggest you five interesting and free spell checkers for HTML Forms (input and text area) ready to use in your web projects. I also provided some suggestions regarding how to implement them on your pages using a few lines of HTML and Javascript code. Try them!

Any suggestion about this topic? Please leave a comment, thanks!

1. Spellify



Spellify is a script.aculo.us based spell checker, released by Nikola Kocic, for form fields that utilizes Google as its spell check engine. Spellify can also be configured to different languages (refer to spellify.js for more information regarding language settings) and requires:

- PHP 4+ with CURL library installed (developed using PHP 4.4.6)
- script.aculo.us 1.8.0 (only effects.js and scriptaculous.js required)
- Prototype JavaScript Framework 1.6.0

To install Spellify on your pages add spellify.js, prototype.js and scriptaculous.js on the tag of your page:

<script src="spellify/prototype.js" type="text/javascript"></script>
<script src="spellify/scriptaculous.js" type="text/javascript"></script>
<script src="spellify/spellify.js" type="text/javascript"></script>


...and copy the HTML code you find in the step 3 of this page. Then add a form with some fields like these:

<input type="text" id="search" name="search"/>
<input type="text" id="city" name="city"/>


In this way, all fileds will be cheked while an user types a word into them. Spellify can also ignore a specific text field by setting its class attribute to spellify_ignore. For example, if you want to ignore the input field "city" use this code:

<input type="text" id="city" name="city" class="spellify_ignore" />


Take a look at the spellify official page for a live preview.


2. GoogieSpell



GoogieSpell is a Gmail like spell checker that you can use in your own web-application. It support for around 27 languages; well tested and works on IE 5.5, IE 6.0, IE 7, FF 1.0+, Safari, Opera etc; generic, extendable and easy to install; AJAX based (without page-reloading; Lightweight (around 50 KB); Well documented and with GoogieSpell Multiple it's possible to spell check multiple text fields at once. Take a look here for the demo and for the code.


3. Ajax-Spell



Ajax-Spell is a useful spell checker for HTML text area which requires at least PHP 5 and either pspell or aspell. The only thing you have to do to work with ajax-spell is to include spell_checker.js and the MooTools javascript library in the tag of your page and add the class spell_check to any textarea you want to have a spell checker added to.

For example, add mootools and spell_checkers.js in this way:

<script src="mootools.js" type="text/javascript"></script>
<script src="mootools.js" type="spell_checker.js"></script>


... and add a text area like te following:

<textarea class="spell_check" rows="12" cols="40" name="text"></textarea>


Take also a look at this page for other information about this script.

4. ActiveSpell



ActiveSpell is a free ajax script to implement spell checking on any text box. It's maintained by ActiveCampaign, Inc and is based off of Ajax-Spell by Garrison Locke. You can fina download it here.

5. PHP Spell Checker
This simple PHP Spell Checker is used to spell check any of the input field of the HTML form. It is useful for webmasters who want to add spell checking to any text box (textarea) on their website or corporate intranet. The script is designed not to mess any way to your main script processing of the form. It just return modified (already spell-checked) text into any input field. It is written on PHP and using JavaScript as minimum as possible. Take a look at this page for more information.

Hope the toostep team will use these free resources to meet the needs of its users.

ShareThis