Membuat Form Registrasi Menggunakan HTML 5 dan CSS3

Seperti kita ketahui bersama HTML 5 memberikan kita kemudahan tampilan baik, dan saat ini penulis coba memberikan salah satunya, seperti yang coba penulis buat adalah membuat form registrasi dengan html 5 dan css3 yang biasanya form yang yang satu ini biasa menggunakan javascripts tapi untuk kali ini penulis coba membuat variasi berbeda. 

Berikut ini tampilan dari form tersebut :

 

HTML

<form action="" method="post">
   <div id='name' class='outerDiv'>
	<label for="name">Full name:</label>
	<input type="text" name="name" required  />
	<div class='message' id='nameDiv'> Enter your 
first and last name. </div> </div> <div id='username' class='outerDiv'> <label for="number">Username:</label> <input type="text" name="username" required /> <div class='message' id='usernameDiv'> Pick a
unique name on Twitter. </div> </div> <div id='password' class='outerDiv'> <label for="password">Password:</label> <input type="password" name="password" required /> <div class='message' id='websiteDiv'>6 characters
or more (be tricky!).</div> </div> <div id='email' class='outerDiv'> <label for="email">Email:</label> <input type="email" name="email" required /> <div class='message' id='emailDiv'> We'll send
you a confirmation.</div> </div> <div id='submit' class='outerDiv'> <input type="submit" value="Create my account" /> </div> </form>

CSS

#twitter input:not(:focus){
	opacity:0.6;
}

#twitter  input:required{
}

#twitter  input:valid {
	opacity:0.8;
}		

#twitter input:focus:invalid{
	border:1px solid red;
	background-color:#FFEFF0;
}

Berikut ini untuk mengdownload versi lengkap program tersebut disini dan penulis ingin mengucapkan ke nikesh.me atas informasi penting ini

Kunjungi www.prowebpro.com untuk menambah wawasan anda.

 

Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Address

PT. Proweb Indonesia

 

Please visit: www.proweb.co.id