Membuat Form Pendaftaran “Multi-Step” Dengan CSS3 & JQuery

Membuat Form Pendaftaran “Multi-Step” Dengan CSS3 & jQuery

Penulis: andreanisme | 10 Feb 2012

Kali ini saya akan menyajikan artikel tutorial tentang cara membuat form pendaftaran multi step dengan menggunakan CSS3 dan JQuery.

Untuk lebih jelasnya, lihat demonya di link yang saya sematkan di gambar berikut:

Tampilan Form Pendaftaran "Multi-Step" Dengan CSS3 & JQuery

Kita akan membuat 3 step form untuk mengisi dan 1 form untuk menampilkan ringkasan data yang sudah di-inputkan sebelumnya. Untuk detailnya:

1. Username dan password2. Nama depan, nama belakang (family name) dan alamat email3. Jenis kelamin dan regional4. Ringkasan data

Kode HTML

Oke, untuk mengawalinya. Kita akan membuat container dengan membagi 4 div untuk masing-masing langkah.

<div id="container"> <form action="#" method="post">

<div id="langkah_pertama">

http://virtuemagz.com/demo/formdaftar/

<div id="langkah_kedua"> <div id="langkah_ketiga"> <div id="langkah_keempat">

</form></div>

Pada masing-masing div kita isikan elemen HTML untuk membuat komponen form (label, tabel, input, optiion dan lain sebagainya.

Untuk div id langkah pertama, kita akan isikan elemen H1, input, label dan submit.

<div id="langkah_pertama"><h1>FORM<span>PENDAFTARAN</span></h1>

<div> <input type="text" name="username" id="username" value="username" /> <label for="username">Minimal 4 karakter. Huruf kapital, huruf kecil dan angka</label>

<input type="password" name="password" id="password" value="password" /> <label for="password">Minimal 5 karakter. Gunakan kombinasi huruf kapital dan huruf kecil untuk password yang lebih kuat</label>

<input type="password" name="ulangpassword" id="ulangpassword" value="password" /> <label for="ulangpassword">Ketik ulang password</label></div><div class="clear"></div>

<input type="submit" name="submit_pertama" id="submit_pertama" value="Submit" />

<div class="fix"></div></div>

Untuk selanjutnya, ini kode lengkap untuk HTML-nya.

<div id="container"><form action="#" method="post">

<div id="langkah_pertama"><h1>FORM<span>PENDAFTARAN</span></h1> <div class="form"> <input type="text" name="username" id="username" value="username" /> <label for="username">Minimal 4 karakter. Huruf kapital, huruf kecil dan angka</label>

<input type="password" name="password" id="password" value="password" /> <label for="password">Minimal 5 karakter. Gunakan kombinasi huruf kapital dan huruf kecil untuk password yang lebih kuat</label>

<input type="password" name="ulangpassword" id="ulangpassword" value="password" /> <label for="ulangpassword">Ketik ulang password</label></div>

<div class="clear"></div>

<input class="submit" type="submit" name="submit_pertama" id="submit_pertama" value="Submit" />

<div class="clear"></div></div>

<div id="langkah_kedua"><h1>FORM<span>PENDAFTARAN</span></h1>

<div class="form"> <input type="text" name="firstname" id="firstname" value="first name" /> <label for="firstname">Nama Depan </label>

<input type="text" name="lastname" id="lastname" value="last name" /> <label for="lastname">Nama Belakang </label>

<input type="text" name="email" id="email" value="email address" /> <label for="email">Alamat email Anda. Detail pendaftaran akan dikirim melalui alamat email yang anda tuliskan.</label> </div>


<input class="submit" type="submit" name="submit_kedua" id="submit_kedua" value="Submit" />


<div id="langkah_ketiga"><h1>FORM<span>PENDAFTARAN</span></h1><div class="form"> <select id="gender" name="gender"> <option>Laki-laki</option> <option>Perempuan</option> </select> <label for="gender">Jenis kelamin </label>

<select id="region" name="region"> <option>Jawa</option> <option>Sumatra</option> <option>Kalimantan</option> <option>Sulawesi</option> <option>Papua</option> </select> <label for="region">Daerah regional </label></div>


<input class="submit" type="submit" name="submit_ketiga" id="submit_ketiga" value="Submit" /></div>


<div id="langkah_keempat"><h1>FORM<span>PENDAFTARAN</span></h1><div class="form"><h2>Ringkasan</h2>

<table> <tr><td>Username</td><td></td></tr> <tr><td>Password</td><td></td></tr> <tr><td>Email</td><td></td></tr> <tr><td>Nama</td><td></td></tr> <tr><td>Jenis Kelamin</td><td></td></tr> <tr><td>Regional</td><td></td></tr> </table></div>


<input class="send submit" type="submit" name="submit_keempat" id="submit_keempat" value="Kirim" />

</div></form></div>

<div id="progress_bar"><div id="progress"></div><div id="progress_text">LANGKAH 0/3</div></div>

Namun jangan lupa untuk meletakan script untuk memanggil CSS dan javascript pada bagian header yang tidak dituliskan di sini.

Kode CSS

Selanjutnya, mari kita rias markup yang sudah dibuat sebelumnya. Di tutorial ini, di dalam paket file yang bisa diunduh, saya tidak menyediakan file gambar. Karena form pendaftaran ini memang tidak memiliki komponen gambar. Semua menggunakan teknik CSS3 untuk membuat radius dan gradasi warna.

Pada bagian atas dari baris kode CSS dibawah ini, saya menyematkan CSS Reset dari Eric Meyer.

/* CSS Reset (Eric Meyer) */html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

body { background-color: #f9f9f9; color: #222; font-family: Verdana, sans-serif; font-size: 12px;}

input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; }input[type="submit"]:focus, input[type="button"]:focus { outline : none; }

.clear { clear: both; }

#container { background: -moz-linear-gradient(top,#ff2819 0%,#ab0000); background: -webkit-gradient(linear,left top,left bottom,from(#ff2819),to(#ab0000)); border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; border: 1px solid #7d0000; -moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); -webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); width: 754px; height: 370px; margin: 50px auto; padding: 50px 0; overflow: hidden; position: relative;}

#container #langkah_pertama, #langkah_kedua, #langkah_ketiga, #langkah_keempat { display: none; } #container #langkah_pertama{ display: block; }

#container .form { margin: 66px 72px 0 72px; }

#container h1, #container h2 { color: #EAEAEA; font-size: Verdana, sans-serif; text-align: center; font-size: 24px; text-shadow: 1px 1px 2px #222; } #container h1 span { color: #BAB8B8; }

#container h2 { color: #888; font-size: 20px; text-align: left; text-shadow: none; }

#container table { margin: 20px 40px; font-size: 14px; font-weight: bold; } #container table td { padding: 5px 10px; } #container table td:nth-child(2) { color: #222222; }

#container input, #container select { color: #888; border: 1px solid #ccc; font-family: Verdana, sans-serif; font-weight: bold; font-size: 15px; width: 300px; height: 35px; padding: 0 25px; margin: 20px 0; float: left; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } #container input.submit { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #ffffff; padding: 10px 20px; background: -moz-linear-gradient(top,#ff2819 0%,#ab0000); background: -webkit-gradient(linear,left top,left bottom,from(#ff2819),to(#ab0000));

border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; border: 1px solid #7d0000; -moz-box-shadow:0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); -webkit-box-shadow:0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); text-shadow:0px -1px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3); border: none; cursor: pointer; width: 85px; height: 38px; position: relative; bottom: 2px; left: 555px; width: 100px; } #container input.submit:focus { border: none; }

#container input.error { border: 3px solid #FFFA02; } #container input.valid { border: 3px solid #1FFF00; }

#container input:focus, #container select:focus { border: 1px solid #a90329; color: #a90329; }

#container select { padding: 5px 0 5px 25px; } #container option { padding: 0 15px; }

#container label { color: #E5DCDC; font-size: 12px; font-weight: bold; line-height: 14px; float: right; margin: 23px -25px; width: 270px; }

#progress_bar { width: 339px; height: 24px; margin: 0 auto; position: relative;}

#progress { width: 0px; height: 23px; border-radius: 20px;}#progress_text { background: -moz-linear-gradient(top,#b3ef00 0%,#1a8e00);

background: -webkit-gradient(linear,left top,left bottom,from(#b3ef00),to(#1a8e00)); -webkit-border-radius: 20px; -moz-border-radius: 20px; position: relative; line-height: 21px; text-align: center; font-weight: bold; color: white; text-shadow: 1px 1px 2px #222; width: 339px; height: 24px; top: -23px; left: 0;}

Yap! Form sudah terlihat cantik setelah dipoles dengan CSS. Namun, masih ada komponen lagi untuk menambah fungsi dari form tersebut yaitu jQuery.

jQuery

Kita menggunakan jQuery untuk menangani:

membuat efek slider pada perpindahan tahapan (step) validasi data masukan (input)

Kok cuma dua? Tenang… masih banyak yang bisa dilakukan oleh jQuery. Untuk eksplorasi lebih jauh, silakan googling dan bereksperimen sendiri.

Saya menggunakan 2 plugin jQuery, jQueryUI (user interface) dan jQuery inputfocus.

Mari kita copy-paste-kan baris kode jQuery dibawah ini.

$(function(){ //field value var field_values = { //id : value 'username' : 'username', 'password' : 'password', 'ulangpassword' : 'password', 'firstname' : 'first name', 'lastname' : 'last name', 'email' : 'email address' };

//inputfocus $('input#username').inputfocus({ value: field_values['username'] }); $('input#password').inputfocus({ value: field_values['password'] }); $('input#ulangpassword').inputfocus({ value: field_values['ulangpassword'] }); $('input#lastname').inputfocus({ value: field_values['lastname'] }); $('input#firstname').inputfocus({ value: field_values['firstname'] });

$('input#email').inputfocus({ value: field_values['email'] });

//setting langkah $('#progress').css('width','0'); $('#progress_text').html('Langkah 0/1');

//langkah_pertama $('form').submit(function(){ return false; }); $('#submit_pertama').click(function(){ //menghilangkan class $('#langkah_pertama input').removeClass('error').removeClass('valid');

//melakukan cek jika input tidak kosong var fields = $('#langkah_pertama input[type=text], #langkah_pertama input[type=password]'); var error = 0; fields.each(function(){ var value = $(this).val(); if( value.length<4 || value==field_values[$(this).attr('id')] ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50);

error++; } else { $(this).addClass('valid'); } });

if(!error) { if( $('#password').val() != $('#ulangpassword').val() ) { $('#langkah_pertama input[type=password]').each(function(){ $(this).removeClass('valid').addClass('error'); $(this).effect("shake", { times:3 }, 50); });

return false; } else { //update progress $('#progress_text').html('Langkah 1/3'); $('#progress').css('width','113px');

//slider langkah $('#langkah_pertama').slideUp(); $('#langkah_kedua').slideDown(); } } else return false; });

$('#submit_kedua').click(function(){ //menghilangkan class $('#langkah_kedua input').removeClass('error').removeClass('valid');

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; var fields = $('#langkah_kedua input[type=text]'); var error = 0; fields.each(function(){

Kode dibawah komentar (// ) //inputfocus di atas adalah untuk mengaktifkan / memanggil fungsi dari plugin inputfocus.

Kode diantara //langkahkedua - mempunyai fungsi untuk mem-validasi atau mengoreksi data masukan. Misalnya username harus minimal 4 karakter, parameter email dan memeriksa apakah input password dan ulang password adalah sama.

Kode selanjutnya adalah untuk menyimpan hasil masukan dan pada akhirnya meringkasnya dalam ringkasan.

Jika sudah di copy-paste namun fungsi jQuery tidak berfungsi. Coba cek apakah script pemanggil arwahnya javascriptnya sudah diletakan di antara <head></head> atau belum. Ini script yang harus dimasukan di awal-awal dokumen HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script><script type="text/javascript" src="js/jquery.inputfocus-0.9.min.js"></script><script type="text/javascript" src="js/jquery.main.js"></script>

Sekian dulu tutorial Membuat Form Pendaftaran “Multi-Step” Dengan CSS3 & JQuery, sampai ketemu di artikel-artikel berikutnya.

http://virtuemagz.com/wp-content/uploads/2012/02/ringkasan-multi-step.png

Membuat Form Pendaftaran “Multi-Step” Dengan CSS3 & JQuery

Documents

Transcript of Membuat Form Pendaftaran “Multi-Step” Dengan CSS3 & JQuery