Form validation methods

From my experience, I already use 3 main type of method to validate a form. Purpose of form validation is to prevent spamming, injection and empty message. In addition, this will make our form more friendly, safe and interactive.


Method is use :

1. JavaScript validation.

Integrated on the form web pages, refuse the submit form if the required fields is empty or out of criteria. This will pop-up a message window. We can this, on web page validation.

2. PHP script validation.

Add-on some validation script on the PHP file which processing the form output and send the mail. Then, redirect user to the corresponding page. We can say, this is on server validation.

3. Using captcha.

This method required user to fill some validation code to continue sending the form. Now a days, there was a lot of type of captcha. You can built and customised you own captcha or use free recaptcha. E.g: Recaptcha - Stop spam. Read books. We can say, this is a complete solutions for form validation; on web page and on server validation.

Next, I'll write a simple tutorial about applying this three methods of validating  a form.
Have a nice day!

Write by Arafa Daming

Enabling HTML5 on Internet Explorer (IE) with javascript

Create new HTML5 elements for Internet Explorer (IE) using javascript. Save this script as a javascript(e.g: html5.js) and include in your web pages.

This script should load before any others. We want the new elements to be parsed before pretty much anything happens.

document.createElement("article");
document.createElement("aside");
document.createElement("audio");
document.createElement("canvas");
document.createElement("command");
document.createElement("datalist");
document.createElement("details");
document.createElement("embed");
document.createElement("figcaption");
document.createElement("figure");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("keygen");
document.createElement("mark");
document.createElement("meter");
document.createElement("nav");
document.createElement("output");
document.createElement("progress");
document.createElement("rp");
document.createElement("rt");
document.createElement("ruby");
document.createElement("section");
document.createElement("source");
document.createElement("summary");
document.createElement("time");
document.createElement("video");

Example :


<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]-->

This is very usefull if you want to develop a HTML5 web pages.
Have a nice day!

Write by Arafa Daming

Make a simple rounded button with CSS

Minimizing the image usage on our web page is to reduce our page size and become easily to load. Usually, we are using an image as a fancy button. Now, with CSS3 new features, we can reduce images on our pages.

Example:

I'm a button

HTML code:


<a href="#" class="mybutton" title"I am a button">I'm a button</a>

CSS code:

 .mybutton  {
    border-right:1px solid #25839a;
    border-bottom:1px solid #25839a;
    padding:0px 16px;
    color:#fff;
    font-size:18px;
    line-height:38px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    background:#ff6117;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-decoration:none;

Hover code (Optional) :

 .mybutton:hover  {
    background:#6d777e;
    border-right:1px solid #6d777e;
    border-bottom:1px solid #6d777e;
    }

Write by Arafa Daming

Make a pop-up box like Facebook box

Someone ask me how to create a pop-up box as a notice to visitor. Then, I suggested jQuery to him i found this jQuery plugin (Facebox)

Now, I'll write tutorial about how to apply this plugin.

First, you need to enclose jQuery and this plugin to your page :

<script src="jquery.1.4.4.min.js"></script>
<script src="facebox.js"></script>

And then the jQuery script

<script language="javascript">
$(document).ready(function() {
 $.facebox.settings.opacity = 0.5;
 $('a[rel*=facebox]').facebox();
 $.facebox('This message will pop-up when the page loaded');
});
</script>

Put all this code in the HTML <head> tag.
Done. Have a try!
Visit the official site for more info.

Write by Arafa Daming

Defination of Web 1.0, Web 2.0 and Web 3.0

Web 1.0

1. The first generation of the World Wide Web, characterized by separate static websites rather than continually-updated weblogs and social networking tools.
2.  One-way broadcasting, meaning only the owner of the site can publish information.
3.  Web 1.0 (1991-2003) is a retronym which refers to the state of the World Wide Web, and any website design style used before the advent of the Web 2.0 phenomenon.
4.  Refers to the first stage of the World Wide Web linking web pages with hyperlinks.

Example : Static Page


Web 2.0

1. The term Web 2.0 is associated with web applications that facilitate participatory information sharing, interoperability, user-centered design, and collaboration on the World Wide Web.
2. The second generation of the World Wide Web, especially the movement away from static web pages to dynamic and shareable content and social networking
3. Web 2.0 does not refer to any specific change in the technology of the Internet, but rather the behavior of how people use the Internet.
4. Web 2.0 (or Web 2) is the popular term for advanced Internet technology and applications including blogs, wikis, RSS and social bookmarking.
5. user interaction / behaviour

Example :You-Tube and it user, Facebook

Web 3.0

1. The predicted third generation of the World Wide Web, usually conjectured to include semantic tagging of content.
2. The creation of high-quality content and services produced by gifted individuals using Web 2.0 technology as an enabling platform.
3. Access internet any time, any where, any device.

Example : Surfing Web 3.0 at your smart phone.


Please note that :

• Don't "use", "build" or "design" web 3.0. They do not represent any look and feel. 
• Web 2.0 & 3.0 are terms that cater for those who don't have clear understanding about the internet. 
• If someone says "I want a web 3.0 website", "I want to make my site design looks like web 2.0" will only make people laugh, especially those who are internet savvy.

Have a nice day!

Write by Arafa Daming