Windows has a nice option labeled
Show characters right below password input fields:
Useit.com recommends it:
It’s time to show most passwords in clear text as users type them. So without further ado, here’s what it looks like on the web: unmasking the password field This is the HTML code from the example:
inframe to each of these links. In the second Official jQuery Podcast Ralph Whitbeck, Elijah Manor and their guest Richard D. Worth go through what inFrame is and when/why it’s useful:
Try it out: Click on the links to view/hide
Some random example from A List Apart: “CSS Sprites2″: regular link to the file
Smooth Gallery, a mootools gallery: regular link to the file
Of course, you have to include jQuery if you’re not using it already in the page. (more…)
As I was saying in a past–not so documented–article, this is how the Hidden Captcha concept works:
If yes, they’re okay — let’em comment, no annoying captcha required.
No? We’ve got a suspect. Read them their rights and serve them the ultimate “are you human?” test.
Here’s what you start with, the source code from this tutorial.
(Note: be sure to have the Arial font file called arial.ttf in the fonts folder–copy it from your System in there because their archive does not come with it).
<div id="captcha"> <img src="captcha.php" alt="" /><input type="text" name="code" /> Are you human? </div>
Hidden Captcha instead of Akismet?
In this tutorial I’ll walk you through the steps involved in building a databaseless PHP admin section for Smooth Gallery.
So let’s take a look at it:
As mentioned on the manager page, the password is “demo” and you don’t have sweat about removing/adding/reordering images—the manager in the demo resets the file to an initial input each time a user logs in.
For faster testing: right click some photo from the internet, select copy image location and paste it in the Add New Item/Image location field (that’s the only required field). Then press Add. Then in the Edit Items part copy and paste image locations from one item to another and then update it.
You might want to download the gallery + manager before continuing:
Download Smooth Gallery Manager (1933 downloads) — Databaseless PHP admin pannel for Smooth Gallery.
After you do, open up manager.php and follow along. Only the more important parts ware discussed below, the rest is commented in the file.
So how come no databases?
It’s an image gallery, it’s not gonna have thousands of entries. There’s not much justification in creating a database for 5-20 items. We’ll keep it all in the HTML.
And this will give us a chance to work with a really neat tool: PHP Simple HTML DOM Parser. This HTML parser written in PHP5+ is going to save us a lot of work. And I think this won’t be the last you hear of it here on Vile Works.
1. The logic behind it, in plain English
We’re going to have a simple log in/log out functionality, we don’t want anyone who knows the manager’s URI to be able edit our gallery.
After the log in, two main options will be available: add new item and edit existing items. …And a log out link.
if logged in if received 'add item' add the item; display 'add item' form; if received 'update items' update all the items; display 'update items' form; display 'log out' link; else display 'log in' form;
The conditioned actions “if received ‘add item’ -> add the item” and “if received ‘update items’ -> update the items” are placed in the code before their forms so that they will display a success or error message in the page just above the form that was submitted.
The “add new item” functionality will add a new item at the beginning of the gallery: the image along with its title, description and a link to another page.
The “update items” will allow us to:
- change the items’ titles, descriptions, images and the URL the images link to
- delete items
- and to reorder the items
How I use captcha without making my users complete the barely readable word
Capthca sucks. For more information on how much captcha can suck see John Willis’ post Top 10 Worst Captchas.
But at the same time it can be really annoying for webmasters to have their forms unprotected with all the spam bots running free out there.
What I wanted was to have the commenting feature protected against spam bots without having the innocent human users ruining their eyes on captcha like images, or complete any mathematical equation or any other additional question fields.
My ideea (and as I did some Google searches, I found out other people had similar ideas) was the followig algorithm:
If yes, he’s ok. Let him comment.
No? He’s a suspect. Read him his rights and give him the ultimate “are you human?” test.
//complete the text field with the correct word from the image: $('secretword').value='nospam'; //hide the div containing the captcha image and the text field: $('captcha').style.display='none';