CSS to remove input value in form

In the answer to this question:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_23259201.html

Roonaan suggested that a simple alternative to captcha is to have an input with a style of display:none and give it both a name and a value then process the form only if that field is empty.

I have tried his suggestion without success.  The value seems to be passed even when the input style is set to display: none

Am I missing something?
<?php
 
if (!empty($_POST['valid']))
echo $_POST['valid'];
 
?>
 
<form action="formTest.php" method="post">
 <input type="text" name="valid" value="Remove This If You Are a Person" style="display: none" />
 <input type="submit" name="submit" value="Submit" />
</form>

Open in new window

LVL 16
hankknightAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

supertone44Commented:
What is the name/value pair that keeps getting passed? Is it valid=Remove This If You Are a Person?

If so then try this:


<input type="text" name="valid" value="<?php echo $_POST['valid'];?>" style="display:none;" />

Open in new window

0
ncooCommented:
I think you want the reverse logic of that:

If the field 'valid' is hidden from the user they will not see it, so they will not fill it in.

If they are a spam bot (most anyway) they have no concept of css so will see the field and fill it in.

You then only process the form if valid is empty.

<?php
 
if (empty($_POST['valid']))
echo $_POST['valid'];
 
?>
 
<form action="formTest.php" method="post">
 <input type="text" name="valid" style="display: none" />
 <input type="submit" name="submit" value="Submit" />
</form>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
Hank, you can use a form token to accomplish what you want.  Code below.  It's an easy drop-in.

Best regards, ~Ray
// ALWAYS START A SESSION AT THE TOP OF EVERY PAGE
session_start();
 
 
// HERE ARE THE TOKEN FUNCTIONS
/* ************************************************************************* */
function make_form_token() 
{ // MAKE YOUR OWN VERSIONS OF X AND Y - CONSIDER USING MICROTIME, ETC
	$string = "X" . time() . $_SERVER["SCRIPT_FILENAME"] . "Y";
	$token  = md5($string);
	$_SESSION["_form_token"] = $token;
return $token;
}
 
function check_form_token($token=null) 
{ // EVALUATE THE IDENTITY OF THE TOKEN
	if (empty($token)) { $token = $_POST["_form_token"]; }
	if ($token == $_SESSION["_form_token"]) {
		$_SESSION["_form_token"] = md5($_SESSION["_form_token"]); // MUNG THE TOKEN
return true; 
}
return false;
}
 
function form_token_error() 
{ // IF YOU LIKE YOUR CLIENTS, YOU CAN MAKE THIS FRIENDLY
	die("Server Error F");
}
/* ************************************************************************** */
 
 
// HERE IS THE LINE of HTML IN THE FORM SCRIPT
<input type="hidden" name="_form_token" value="<?=make_form_token();?>" />
 
 
// CHECK FORM TOKEN IN THE ACTION SCRIPT
	if (!check_form_token()) { form_token_error(); }

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Ray PaseurCommented:
@hankknight: Normally, it is a good idea to test the answers before you accept them.  One test you might want to consider on this topic is the test of what happens if a client's browser does not obey the CSS you have employed.  For example, let's say a client has poor eyesight and uses an audio accessibility aid or a  screen reader.  You've tried to be "tricky" but instead you've just bought yourself a thorny accessibility issue.  Depending on who your clients are, that could make for bad publicity.  Just a word to the wise.  Best regards to all, ~Ray
0
ncooCommented:
You raise a good point with accessibility but if you add a label to the input field and hide that as well using CSS. The label could read: leave this field empty. Screen readers would read this to the user and the user would know to leave the field empty.
0
Ray PaseurCommented:
@ncoo: That's an excellent idea!  Thanks, ~Ray
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.