This page contains various tips and tricks for web programming in general. Very often, you are faced with an unexpected problem. Printing background colours was the first. Preventing submitter bots from feeding spam into the form of a blog was the second.
How to print background colours
While preparing a page in which I had highlighted some text, I found out that the highlighting was visible on the page viewed in a browser but absent on the printout version.
After a brief search on the Web, I found out that background colours are not rendered by default in browsers. You need to go to the print settings and enable "Print Background colours and images" in order to do so. This is a default action that CSS cannot override. In addition:
« Note that according to W3C standards, printing of background colours or images is optional to the end user; and that by default, each are disabled in printer configuration options. It may be desirable to enable background colours or images for saving an HTML page to PDF for instance, while it may be undesirable for printed output (owing perhaps to vast consumption of ink). To enable either for a particular purpose, access your printer preferences. »
is cited from the submission by Mike Montagne on # CSS Help. I added the highlights.
How to prevent getting forms filled with spam
One of the most common spam bots that crawl the web is the one called the "dumb submitter bot". These bots seek out web forms on pages, fill every editable field full of spam, and submit the form. They don't care what the form was for, or where it goes. A submitter bot crawls the web, like a search engine does, but pages aren't what they're after. They're looking for HTML forms. If the bot stumbles upon a guestbook, it sees the HTML form to submit a new entry. It then fills every editable field with spam.
There are several ways of preventing spam in forms: not to use forms at all, use filters, use "captchas " or use honeypot fields. Except for the first one, none of them is totally secure preventing spam 100% of the time.
Using honey pot fields
The first solution I found is from Trapping "Dumb Submitter Bots: it pretends that spam can be avoided if hidden input fields ("honeypot" fields) that humans won't see, but bots will, are used. If these fields are modified, then you know a bot has spammed your form.
<form name="guestbook" action="/cgi-bin/guestbook.pl" method="post">
Your name:<br>
<input type="text" name="name" value=""><p>
Your message:<br>
<textarea cols="40" rows="6" name="message">
</textarea><p>
<input type="submit" value="Submit Message">
<!-- The following code is invisible to humans and contains some trap text fields -->
<div style="display: none">
If you can read this, don't touch the following text fields.<br>
<input type="text" name="address" value="http://"><br>
<input type="text" name="contact" value=""><br>
<textarea cols="40" rows="6" name="comment"></textarea>
</div>
<!-- End spam bot trap -->I tried something like this on this blog. The code follows:
<form action="<?php echo $editFormAction; ?>" name="formadd" method="POST"
class="center" accept-charset="utf-8">
<label>Nom/pseudo (obligatoire)</label><br />
<input name="author" type="text" class="textfields" size="60" maxlength="100"
value=<?php echo $auteur; ?>><br />
<label>Adresse courriel (obligatoire - ne sera pas publiée)</label><br />
<input name="email" type="text" class="textfields" size="60"
maxlength="100" value=<?php echo $email; ?>><br />
<label>Commentaire</label><br />
<textarea name="content" cols="75" rows="3"></textarea><br />
<input name="post_id" type="hidden" value="<?php echo $post_id; ?>" />
<input type="hidden" name="MM_insert" value="formadd" />
<!-- anti-spam-bot ajouté le 10 décembre 2013 -->
<div style="display:none">
<textarea cols="40" rows="6" name="comment"></textarea>
</div>
<input name="Insert" type="submit" value="Sauvegarder" />
</form>
In fact, lines 11, 12 et 13 have been added as a trap for spam. Spam bots tend to fill all fields. Hereunder, at statement 7, if $_POST['comment'] is not empty, the comment is treated as spam and not saved in the database.
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "formadd"))
// s'assure que la soumission du commentaire provient de la fiche de commentaires
{
$valid_author = !$_POST['author'] == ''; // Check author
$valid_email = checkEmail($_POST['email'], 80); // Vérifie l'adresse curriel
// l'insertion dans la base de données est sujette à trois conditions: auteur et adresses valides + no-spam
if (($valid_email) && ($valid_author) && (empty($_POST['comment'])))
{
$insertSQL = sprintf("INSERT INTO commentaires
(post_id, commentaires.author, commentaires.email, commentaires.content) VALUES (%s, %s, %s, %s)",
GetSQLValueString($_POST['post_id'], "int", $mon_blog),
GetSQLValueString(strip_tags($_POST['author']), "text", $mon_blog),
GetSQLValueString(strip_tags($_POST['email']), "text", $mon_blog),
GetSQLValueString(strip_tags($_POST['content'], "<p><b><i><br><br />"), "text", $mon_blog));
$mon_blog->select_db($database_mon_blog);
$Result1 = $mon_blog->query($insertSQL) or die(mysql_error());
}
} I used to have between 2 and 5 spam inputs on my blog before using this method. No spam was recorded since I used the method. If it does not work, How to prevent robots from automatically filling up a form? provides an alternative solution.
Another method
Bots request a page, parse the page and submit the form. This is fast. Humans type in a URL, load the page, wait before the page is fully loaded, scroll down, read content, decide weather to comment/fill in the form, require time to fill in the form, and submit.
This difference can be used to differentiate spam-bots from human users. Measuring the time elapsed between page-load and form-submit is a way to reject intelligent spam bots who are not fooled by the honeypot field. This is what I use on this site. I measure the differential between the two and reject the comment when this time difference is smaller that 10 seconds: when the page is loaded, a timestamp of this event is taken. When the submit button is clicked, this timestamp is posted and compared with the timestamp of the form-submit and the difference is used to differentiate between a spam-bot and a user.
Simple center a object with css and no hacks
There's several ways to center an element. But it depends on what your element is and how we choose to display it:1) If you have {display:inline; } - This is simple. You can just use "text-align: center;" to center text, images and divs.
2) If you have {display:block; } - This is a bit more difficult. It depends on how your object is positioned. Your object could be relative, absolute, or fixed.
a) If it is relative; then you can use "margin:0 auto;", however you will require a width value.
b) If it is absolutely positioned, then you need to specify your "top:" and "left:" values. You'll also need a width. If you know the width of the element, the best way is to use {left:50%; margin-left:-X}, where X = 1/2 the width of the element. Simple center a object with css and no hacks on stackoverflow