WebsTutorial

Today’s tutorial is based on simple and attractive CSS3 HTML5 login and registering form with fields validation. In html5 we can actually do validation without using any external JQuery or other scripts.

In this tutorial we would:

• Design a toggle functionality using checkbox.
• Make two forms with HTML5 validation inputs
• And CSS3 toppings

So the logic for toggle is simple, if checked then show the form else hide the form. With CSS3 we can give transition effects.

So here is the HTML markup for Toggle:

<input type="checkbox" id="login_toggle" checked=""/>
<label id="toggle" for="login_toggle">Click here to login</label>

CSS3 Markup for its effect and styling:

#login_toggle:checked + #login-form {
	top: -210px;
}

#toggle {
	background-image: url("bg.png");
	border: 3px solid #FFFFFF;
	float: right;
	padding: 5px 50px;
	position: relative;
	right: 80px;
	top: 210px;
	color: #fff;
	border-top: 0px;
	text-shadow: 0 0 1px #000000;
	
	border-radius: 0 0 4px 4px;

	-webkit-box-shadow: 1px 4px 4px #000000;
	-moz-box-shadow: 1px 4px 4px #000000;
	box-shadow: 1px 4px 4px #000000;
	cursor: pointer;
}

In html5 we can set a new attribute to input type named as required. When this attribute is inserted then the form won’t process until its validated.

HTML5 form markup

<form id="loginForm" class="right">
	<div id="input">
		<input class="input username" type="text" placeholder="Username" name="username" required />
		<span>A</span>
	</div>
	
	<div id="input">
		<input class="input password" type="password" placeholder="Password" name="password" required />
		<span>L</span>
	</div>
	
	<div id="input">
		<input type="submit" class="submit" value="Login">
	</div>
</form>

Simple isn’t it? Just try the demo and have fun with CSS3, there’s so much creativity you can do with it.

Download

Demo