Cara Membuat Form Input Interaktif Dengan Jquery Part 1

Hallo sobat, apa kabar semuanya. Kembali lagi dengan saya pada tutorial Dumet School, di artikel kali ini kita akan belajar dan latihan tentang Cara Membuat Form Input Interaktif Dengan Jquery Part 1. Dimana form yang akan kita buat meliputi 3 tampilan form yang berbeda dan di berikan Jquery supaya lebih terlihat keren. Form yang akan kita buat ada tiga tampilan diantaranya

–  Tampilan step 1, Create your account memiliki 3 form input yaitu Email, Password, Confirm Password

–  Tampilan step 2, Social Profiles juga memliki 3 form input yaitu Twitter, Facebook, Google Plus

–  Yang terakhir adalah tampilan step 3, Personal Details  yang memiliki 4 form input First Name, Last Name, Phone, Address dan tombol submit untuk mengirim data form.

Baik mari kita praktekkan Cara Membuat Form Input Interaktif Dengan Jquery Part 1 sesuai demo gambar di atas ini, pertama-tama kita ketikkan html nya terlebih dahulu atau bisa copy script di bawah ini

<!DOCTYPE html>
<html>
<head>          
  <title>Cara Membuat Form Input Interaktif Dengan Jquery Part 1</title>      
</head>
    <body>
        <!-- multistep form -->
        <form id="msform">
            <!-- progressbar -->
            <ul id="progressbar">
                <li class="active">Account Setup</li>
                <li>Social Profiles</li>
                <li>Personal Details</li>
            </ul>
            <!-- fieldsets -->
            <fieldset>
                <h2 class="fs-title">Create your account</h2>
                <h3 class="fs-subtitle">This is step 1</h3>
                <input type="email" name="email" placeholder="Email" />
                <input type="password" name="pass" placeholder="Password" />
                <input type="password" name="cpass" placeholder="Confirm Password" />
                <input type="button" name="next" class="next action-button" value="Next" />
            </fieldset>
            <fieldset>
                <h2 class="fs-title">Social Profiles</h2>
                <h3 class="fs-subtitle">This is step 2</h3>
                <input type="text" name="twitter" placeholder="Twitter" />
                <input type="text" name="facebook" placeholder="Facebook" />
                <input type="text" name="gplus" placeholder="Google Plus" />
                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="button" name="next" class="next action-button" value="Next" />
            </fieldset>
            <fieldset>
                <h2 class="fs-title">Personal Details</h2>
                <h3 class="fs-subtitle">This is step 3</h3>
                <input type="text" name="fname" placeholder="First Name" />
                <input type="text" name="lname" placeholder="Last Name" />
                <input type="text" name="phone" placeholder="Phone" />
                <textarea name="address" placeholder="Address"></textarea>
                <input type="button" name="previous" class="previous action-button" value="Previous" />
                <input type="submit" name="submit" class="submit action-button" value="Submit" />
            </fieldset>
        </form>
    </body>
</html>

Jika sudah save dengan nama index.html, dan jalankan pada browsernya. Maka output yang di hasilkan seperti gambar di bawah ini

Langkah berikutnya buat file dengan nama style.css dan isikan script di bawah ini

/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);
    
/*basic reset*/
* {margin: 0; padding: 0;}
  
html {
 height: 100%;
 /*Image only BG fallback*/
 background:gray;
}
    
body {
 font-family: montserrat, arial, verdana;
}
 
/*form styles*/
#msform {
 width: 400px;
 margin: 50px auto;
 text-align: center;
 position: relative;
}
 
#msform fieldset {
 background: white;
 border: 0 none;
 border-radius: 3px;
 box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
 padding: 20px 30px;
   
 box-sizing: border-box;
 width: 80%;
 margin: 0 10%;
    
 /*stacking fieldsets above each other*/
 position: absolute;
}
 
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
 display: none;
}
 
/*inputs*/
#msform input, #msform textarea {
 padding: 15px;
 border: 1px solid #ccc;
 border-radius: 3px;
 margin-bottom: 10px;
 width: 100%;
 box-sizing: border-box;
 font-family: montserrat;
 color: #2C3E50;
 font-size: 13px;
}
 
/*buttons*/
#msform .action-button {
 width: 100px;
 background: #27AE60;
 font-weight: bold;
 color: white;
 border: 0 none;
 border-radius: 1px;
 cursor: pointer;
 padding: 10px 5px;
 margin: 10px 5px;
}
 
#msform .action-button:hover, #msform .action-button:focus {
 box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
 
/*headings*/
.fs-title {
 font-size: 15px;
 text-transform: uppercase;
 color: #2C3E50;
 margin-bottom: 10px;
}
 
.fs-subtitle {
 font-weight: normal;
 font-size: 13px;
 color: #666;
 margin-bottom: 20px;
}
 
/*progressbar*/
#progressbar {
 margin-bottom: 30px;
 overflow: hidden;
 /*CSS counters to number the steps*/
 counter-reset: step;
}
 
#progressbar li {
 list-style-type: none;
 color: white;
 text-transform: uppercase;
 font-size: 9px;
 width: 33.33%;
 float: left;
 position: relative;
}
 
#progressbar li:before {
 content: counter(step);
 counter-increment: step;
 width: 20px;
 line-height: 20px;
 display: block;
 font-size: 10px;
 color: #333;
 background: white;
 border-radius: 3px;
 margin: 0 auto 5px auto;
}
 
/*progressbar connectors*/
#progressbar li:after {
 content: '';
 width: 100%;
 height: 2px;
 background: white;
 position: absolute;
 left: -50%;
 top: 9px;
 z-index: -1; /*put it behind the numbers*/
}
 
#progressbar li:first-child:after {
 /*connector not needed before the first step*/
 content: none; 
 }
 
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
 background: #27AE60;
 color: white;
}

Kemudian panggil link css nya di dalam tag head yang ada di dalam file html nya

Jika sudah save dan refresh pada browsernya, maka hasilnya seperti gambar di bawah ini

Namun klik next belum bisa berfungsi dan perlu kita berikan Jquery nya supaya terlihat lebih menarik dan interaktif, oke sekian dulu pada tutorial kali ini tentang Cara Membuat Form Input Interaktif Dengan Jquery Part 1 kita jumpa lagi dan sambung lagi pada artikel Cara Membuat Form Input Interaktif Dengan Jquery Part 2.

Terimakasih dan sampai Jumpa.