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 dairykusaja.blogspot.com atas informasi penting ini

Artikel Terkait: