Category: Showcase,
Tutorials,
inspiration
![Form-usages-1 in 10 Intelligent Ways of using [FORM] Elements](http://media.smashingmagazine.com/cdn_noupe/img/form-usages-1.jpg)
In this tutorial you will learn how to create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.
<div id="poll-container">
<h3>Poll</h3>
<form id='poll' action="poll.php" method="post" accept-charset="utf-8">
<p>Pick your favorite Javascript framework:</p>
<p><input type="radio" name="poll" value="opt1" id="opt1" /><label for='opt1'> jQuery</label><br />
<input type="radio" name="poll" value="opt2" id="opt2" /><label for='opt2'> Ext JS</label><br />
<input type="radio" name="poll" value="opt6" id="opt6" /><label for='opt6'> mootools</label><br /><br />
<input type="submit" value="Vote →" /></p>
</form>
</div>
This form will be processed by the PHP for now, and when we get the Javascript running, by jQuery. The PHP and Javascript are designed to pull the option ID from the value tag.
Check out the demo
FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all.
![Form-usages-2 in 10 Intelligent Ways of using [FORM] Elements](http://media.smashingmagazine.com/cdn_noupe/img/form-usages-2.jpg)
<form action="../script.php" method="post" enctype="multipart/form-data" id="form-demo">
<fieldset id="demo-fallback">
<legend>File Upload</legend>
<p>
This form is just an example fallback for the unobtrusive behaviour of FancyUpload.
If this part is not changed, something must be wrong with your code.
</p>
<label for="demo-photoupload">
Upload a Photo:
<input type="file" name="Filedata" />
</label>
</fieldset>
Check out the demo
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from boys and spammers in a new, intuitive way of completing “verify humanity” tasks. In order to do that users are asked to drag and drop specified item into a circle.
The code calls captcha.php file and gets a random number. Php file just generates simple number and put it in session. When AJAX got that number it creates items based on that number. Lets imagine that we have array of “pencil”, “scissors”, “clock”, “heart”, “note”, so if number 3 is returned it will take “heart” and look for item-heart.png file in /imgs directory.
![Form-usages-3 in 10 Intelligent Ways of using [FORM] Elements](http://media.smashingmagazine.com/cdn_noupe/img/form-usages-3.jpg)
Check out the demo Read more…
