Friday, December 7, 2012

HTML 5 Form Validations

HTML 5 has introduced Javascript plug-ins to achieve something similar effect.

But these code will only work in Safari 5, Chrome 6, Opera 9, Firefox 4 Beta and the iPhone/iPad. Also each browser has a slightly different default behaviour.

The "required " attribute

The simplest change you can make to your forms is to mark a text input field as 'required':





Syntax:
Your Name: <input type="text" name="name" required>

That's it. And you are done. No need to use any javascript and CSS. Isn't that so cool.

Example:

<?php
$msg="";
$email="";
if(isset($_POST['sent']))
{if(isset($email))
    {
       
    $msg="Your email is ".$email;
    }
    else {
        $msg="Enter email.";
    }
   
   
}

?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to this APP</title>
<style type="text/css">
#mainHolder{
    margin:0px auto;
    width:500px;
}
</style>
</head>

<body>
<div id="mainHolder">
 <form action="" method="post" >
<a href="index.php">Refresh</a>
<fieldset>
<legend>Sent Email</legend>
    <p> <?php if(isset($msg)){ echo $msg;}?>
    <p>Enter email <input type="input" name="email"  required /></p>
    <p><input type="submit" value="Sent" name="sent" /></p>
</fieldset>
</form>
</div>
</body>
</html>

Output in Mozilla:









Output in Chrome:








Woow.......Try it yourself :)

4 comments:

  1. I can’t remember the last time I enjoyed an article as much as this one. You have gone beyond my expectations on this topic and I agree with your points. You’ve done well with this. ui/ux design

    ReplyDelete
  2. This is getting a bit more subjective, but I much prefer the Zune Marketplace. The interface is colorful, has more flair, and some cool features like ‘Mixview’ that let you quickly see related albums, songs, or other users related to what you’re listening to. Clicking on one of those will center on that item, and another set of “neighbors” will come into view, allowing you to navigate around exploring by similar artists, songs, or users. Speaking of users, the Zune “Social” is also great fun, letting you find others with shared tastes and becoming friends with them. You then can listen to a playlist created based on an amalgamation of what all your friends are listening to, which is also enjoyable. Those concerned with privacy will be relieved to know you can prevent the public from seeing your personal listening habits if you so choose. interface designer

    ReplyDelete
  3. Thanks for sharing excellent informations. Your web-site is very cool. I'm impressed by the details that you have on this web site. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for extra articles. You, my pal, ROCK! I found simply the information I already searched all over the place and simply couldn't come across. What a perfect web-site. website tips

    ReplyDelete
  4. Hey there! Nice stuff, please keep us posted when you post again something like that! top brand agencies

    ReplyDelete