HTML5 Form Validation With Regex


There are two ideas that enters the scene now:

  • The tag has new type attribute values like url, email, date, telephone number, and color.
  • The tag has the new attribute pattern where you can describe allowed input with a regex.

Here are three pragmatic (but not globally perfect) examples I created:


Strong password: <input title="at least eight symbols containing at least one number, one lower, and one upper letter" type="text" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />

Email address: <input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

Phone number: <input type="text" required pattern="(\+?\d[- .]*){7,13}" title="international, national or local phone number"/>

“Go Back” Button


Browsers already have “back” buttons, so you’d better have a darn good reason for needing to put one on your page!

Input button with inline JavaScript

<input type="button" value="Go Back From Whence You Came!" onclick="history.back(-1)" />

This is totally obtrusive, but you could fix that by only appending this button through JavaScript.

PHP

If JavaScript isn’t a possibility, you could use the HTTP_REFERER, sanitize it, and echo it out via PHP.

<?php
  $url = htmlspecialchars($_SERVER['HTTP_REFERER']);
  echo "<a href='$url'>back</a>"; 
?>

Floating Header: Scroll Effect using HTML,CSS,JQuery


Ever scrolled halfway down the page – and then the navbar at the top appears? This can be very useful and looks professional. This tutorial will introduce a very basic approach how to get this happening.

1. Download the basic ‘Bootstrap’  Pre-Config from ( BootStrap ) .

Now update the index.html with the following:

<!DOCTYPE HTML>

<html>

<head>

<link rel="stylesheet" href="css/bootstrap.css">

<script type="text/javascript" src="js/vendor/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>

<style type="text/css">

body {

padding-top: 60px;
 Continue reading 

Adding multiple backgound images to same element


To add multiple background in the same element just add the images like this:

div.test {
	background-image: url(17072011167.jpg), url(25022010220.jpg);
	background-repeat: repeat;
	background-position: top left, top right;
	height: 768px;
	border: 1px solid #000000;
}

just replace div.test with #test and add div with id test and you are all done !!

Firebug Script for IE6


Just write the following line in the head tag of your html.

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>