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

Address