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

Artikel Terkait: