Cara Membuat Form Input Interaktif Dengan Jquery Part 1
Hallo sobat, apa kabar semuanya. Kembali lagi dengan saya di panduan Source Code Aplikasi, di artikel kali ini kita akan belajar dan latihan mengenai Cara Membuat Form Input Interaktif Dengan Jquery Part 1. Dimana form yang akan kita bikin meliputi 3 tampilan form yang berbeda dan di berikan Jquery supaya lebih terlihat keren. Form yang akan kita bikin ada tiga tampilan diantaranya
– Tampilan step 1, Create your account mempunyai 3 form input yaitu Email, Password, Confirm Password
– Tampilan step 2, Social Profiles pun memliki 3 form input yaitu Twitter, Facebook, Google Plus
– Yang terakhir yakni tampilan step 3, Personal Details yang mempunyai 4 form input First Name, Last Name, Phone, Address dan tombol submit bagi mengirim data form.
Bagus 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 dapat copy script di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Cara Membangun 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>
Jikalau telah save dengan nama index.html, dan jalankan di browsernya. Karenanya output yang di hasilkan seperti gambar di bawah ini
Langkah berikutnya bikin file dengan nama style.css dan isikan script di bawah ini
/*kustom 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 pada tag head yang terdapat di pada file html nya
Jikalau telah save dan refresh di browsernya, karenanya hasilnya seperti gambar di bawah ini
Namun klik next belum dapat berfungsi dan perlu kita berikan Jquery nya supaya terlihat lebih menarik dan interaktif, oke sekianlah dulu di panduan kali ini mengenai Cara Membuat Form Input Interaktif Dengan Jquery Part 1 kita jumpa lagi dan sambung lagi di artikel Cara Membangun Form Input Interaktif Dengan Jquery Part 2.
Terimakasih dan hingga Jumpa.
Sumber https://kursuswebsite.org
