Membuat Bentuk Interface Multi-Step

Indonesian (Bahasa Indonesia) translation by Uady (you can also view the original English article)

Membentuk kegunaan merupakan topik yang sangat penting dalam desain web. Sebagai salah satu masukan utama interface yang disediakan untuk pengguna, kegunaan formulir sangat penting untuk pengalaman pengguna yang baik.

Hari ini, kita akan membuat formulir multi-part, lengkap dengan validasi dan animasi. Kita akan membahasnya dari awal, jadi bersiaplah!

Bentuk Praktik Terbaik Tingkat Tinggi

Bentuk desain interface adalah jebakan dari kendala kegunaan. Sebelum memulai, mari kita bahas beberapa praktik terbaik formulir.

Jangan membuat pengguna Anda berpikir terlalu keras

Formulir umumnya bukan tempat untuk mendorong interaksi unik. Bentuk yang bagus memberikan teknik navigasi yang jelas dan transparansi penuh. Bentuk yang baik diberi label yang baik dan mudah dinavigasi.

Jangan terlalu berlebihan

Penting untuk tidak menyimpang terlalu jauh dari perilaku bentuk bawaan. Ada standar yang menjadi dasar untuk perilaku standar bentuk. Penyimpangan dari standar ini mungkin memiliki efek negatif pada aksesibilitas, jadi pertimbangkan untuk mempertahankan gaya default tersebut jika memungkinkan.

Ingat, pengguna tidak harus tinggal

Pengguna formulir Anda tidak harus tinggal. Mereka memilih untuk tetap tinggal. Mengisi formulir adalah tugas, jadi buatlah mudah. (Jika memungkinkan, buat menjadi menyenangkan!) Jangan membingungkan atau menuntut pengguna; sebagai gantinya, buat dialog di sekitar pertanyaan yang diminta oleh formulir. Bersikap sopan.

Kapan menggunakan teknik multi-bagian

Bentuk multi-part tentu saja merupakan teknik yang bagus, terkadang. Tidak ada jawaban tunggal untuk "berapa banyak input yang dibutuhkan sebelum saya harus membagi formulir". Sebaliknya, selalu pertimbangkan apakah membagi formulir menjadi beberapa bagian akan membantu atau menghambat kegunaan. Kedua, pertimbangkan apakah itu membantu atau menghalangi aspek lain dari desain interaksi.

Jika Anda memiliki formulir dengan bagian yang sangat berbeda, mungkin perlu dipisahkan menjadi beberapa bagian. Proses Checkout adalah contoh umum dari ini. (Info pribadi, info pengiriman, info pembayaran, dan konfirmasi sangat berbeda dan bagian umumnya substansial.)

Merencanakan Interaksi

Kita akan membuat formulir pendaftaran dengan bidang acak. Kita perlu tahu bagian apa yang sedang digunakan, jadi kita memerlukan indikator di bagian atas formulir. Kita ingin mentransisikan bagian formulirnya secara horizontal, meluncur dari kanan ke kiri. Untuk mencapai hal ini, kita akan mengatur bagian-bagian yang berbeda untuk memiliki posisi absolut di dalam bagian "jendela" elemen. Kita juga ingin memiliki dua tombol; satu adalah tombol submit normal. Yang lainnya adalah tombol "bagian selanjutnya".

Markup

Inilah formulirnya:

<form id="signup" action="somewhere" method="POST">
    <ul id="section-tabs">
      <li class="current active"><span>1.</span> Creds</li>
      <li><span>2.</span> Deets</li>
      <li><span>3.</span> Settings</li>
      <li><span>4.</span> Last Words</li>
    </ul>
  <div id="fieldsets">
  <fieldset class="current">
    <label for="email">Email:</label>
    <input name="email" type="email" class="required email" />
    <label name="password" for="password">Password:</label>
    <input type="password" minlength="10" class="required">
  </fieldset>
  <fieldset class="next">
    <label for="username">Username:</label>
    <input name="username" type="text">
    <label for="bio">Short Bio:</label>
    <textarea name="bio" class="required"></textarea>
  </fieldset>
  <fieldset class="next">
    <label for="interests">Basic Interests:</label>
    <textarea name="bio"></textarea>
    <p>Receive newsletter?<br>
      <input type="radio" name="newsletter" value="yes"><label for="newsletter">yes</label>
      <input type="radio" name="newsletter" value="no"><label for="newsletter">no</label>
    </p>
  </fieldset>
  <fieldset class="next">
    <label for="referrer">Referred by:</label>
    <input type="text" name="referrer">
    <label for="phone">Daytime Phone:</label>
    <input type="tel" name="phone">
  </fieldset>
  <a class="btn" id="next">Next Section ▷</a>
  <input type="submit" class="btn">
  </div>
</form>

Markup ini cukup mudah, tetapi mari kita bicara tentang beberapa bagiannya.

Fieldsets: Fieldsets adalah elemen semantik untuk pengelompokan input; ini sesuai dengan situasi kita dengan sempurna.
Classnames: jQuery Validate menggunakan kelas untuk menentukan tipe bawaan. Kita akan melihat bagaimana ini bekerja dalam satu menit.
Bidangnya acak. Kita telah menutup input radio dalam tag paragraf untuk pemformatan yang lebih mudah.
Kirim dan tombol berikutnya: tag anchor dengan kelas tombol akan digunakan untuk pergi ke bagian selanjutnya. Masukan yang dikirimkan akan ditampilkan saat diperlukan melalui JavaScript.

The Styles (LESS-Flavoured)

Ini panjang, bersiaplah..

@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:300);
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:700);


body {
  background: url(http://farm5.staticflickr.com/4139/4825532997\_7a7cd3d640\_b.jpg);
  background-size: cover;
  height: 100%;
  font-family: 'Merriweather Sans', sans-serif;
  color: #666;
}

#signup {
  width: 600px;
  height: auto;
  padding: 20px;
  background: #fff;
  margin: 80px auto;
  position: relative;
  min-height: 300px;
}
#fieldsets {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
textarea {
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ddd;
  padding: 8px;
  margin-bottom: 8px;
  position: relative;
  &:focus {
    outline: none;
    border: 1px solid darken(#2cbab2,10%);
  }
}

input[type=radio]{
  margin: 6px;
  display: inline-block;
}
fieldset {
  border: none;
  position: absolute;
  left: -640px;
  width: 600px;
  padding: 10px 0;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  opacity: 0;
  &.current {
    left: 20px;
    opacity: 1;
  }
  &.next {
    left: 640px;
  }
}
input[type=submit] {
  display: none;
  border: none;
}
#section-tabs {
  font-size: 0.8em;
  height: 50px;
  position: relative;
  margin-top: -50px;
  margin-bottom: 50px;
  padding: 0;
  font-weight: bold;
  list-style: none;
  text-transform: uppercase;
  li {
    color: #a7a7a7;
    span {
      color: #bababa;
    }
    cursor: not-allowed;
    &.active {
      color: #444;
      cursor: pointer;
    }
    border-left: 1px solid #aaa;
    text-decoration: none;
    padding: 0 6px;
    float: left;
    width: 25%;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    line-height: 30px;
    background: #ddd;
    position: relative;
    &:after {
      content: "";
      display: block;
      margin-left: 0;
      position: absolute;
      left: 0;
      top: 0;
    }
    &.current {
      opacity: 1;
      background: #fff;
      z-index: 999;
      border-left: none;
      &:after {
        border: 15px solid transparent;
        border-left: 15px solid #2cbab2;
      }
    }
  }
}
.error {
  color: #bf2424;
  display: block;
}
input.error, textarea.error {
  border-color: #bf2424;
  &:focus {
    border-color: #bf2424;
  }
}
label.error {
    margin-bottom: 20px;
}
input.valid {
  color: green;
}
label.valid {
  position: absolute;
  right: 20px;
}
input+.valid, textarea+.valid {
  display: none;
}
.valid+.valid {
  display: inline;
  position: absolute;
  right: 10px;
  margin-top: -36px;
  color: green;
}

.btn {
  border: none;
  padding: 8px;
  background: #2cbab2;
  cursor: pointer;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  &:hover {
     background: darken(#2cbab2, 6%);
  }
  color: #fff;
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-family: 'Merriweather Sans', sans-serif;
}

Mari kita melewati bagian penting dari style.

Overview

Bentuknya sendiri diatur ke lebar tertentu, berpusat dengan margin: 0 auto, kemudian set ke position:relative. Pemosisian ini memungkinkan penentuan absolute positioning dari elemen anak untuk menempatkannya secara absolut, relatif terhadap formulir yang dikandung. Formulir yang mengandung memegang tiga jenis elemen utama: tab bagian dan "window" fieldset, serta tombol.

Tab bagian ditempatkan relatif terhadap elemen yang mengandung, dan "ditarik" ke atas dengan margin negatif atas. Kita mengimbangi efek pada sisa tata letak dengan margin bawah yang sama.

Fieldset "window" diatur untuk diposisikan absolut, relatif terhadap elemen form induk. Lebar dan tinggi keduanya diatur hingga 100%. Tujuan dari jendela ini adalah untuk menahan elemen, lalu menyembunyikannya ketika berada di luar tepi dengan overflow: hidden. Kita tidak bisa melakukan ini pada formulir, karena kita ingin mempertahankan tab indikator.

Akhirnya, elemen tombol (tag anchor dan masukan pengiriman) ditata untuk diposisikan secara mutlak ke sudut kanan bawah formulir, diimbangi dengan 20 piksel dari bawah dan kanan. Kita juga telah menambahkan transisi CSS sederhana ke elemen tombol untuk menggelapkan background di hover.

Beberapa Catatan Lagi

Fieldsets diatur menjadi position: absolute. Kita memiliki dua kelas untuk dua negara bagian, dan negara default. Keadaan default menarik fieldset ke kiri form; kelas .current menempatkan fieldset di area yang terlihat dari bentuk, dan akhirnya kelas .next mendorong fieldset ke kanan dari form.
Kelas saat ini memiliki opacity 1; keadaan default (dan inheren .next) memiliki opacity 0.
Kita menganimasikan fieldets antara kelas-kelas ini dengan transisi css sederhana.
Kelas .error dan .valid akan membantu dengan styling validasi. Kita menggunakan Merriweather Sans, font yang tersedia secara gratis untuk digunakan melalui Google Webfonts.

JavaScript

Inilah bagian yang membuat semua interaksi bekerja. Beberapa catatan sebelum kita melihat kode: kode ini tergantung pada jQuery dan jQuery Validate. jQuery memvalidasi adalah plugin yang telah ada untuk waktu yang sangat lama, dan oleh karena itu telah diuji dan dibuktikan oleh ribuan orang.

Strategi dasar kita: menyiapkan beberapa aturan validasi untuk formulir, termasuk fungsi khusus untuk memeriksa nomor telepon. Kita ingin pengguna dapat menavigasi kembali melalui bagian yang telah selesai sebelumnya. Kita ingin mereka dapat menggunakan tombol enter untuk pindah ke bagian berikutnya; namun, kita tidak ingin mengizinkan pengguna untuk maju ke bagian selanjutnya hingga bagian sebelumnya telah selesai dan valid.

Jika pengguna mencoba mengklik tab untuk bagian di luar yang telah mereka selesaikan, kita ingin menghindari navigasi ke bagian itu.

Kita ingin mengandalkan kelas (bukan animasi jQuery) untuk transisi antar bagian.

Jadi, dengan memperhatikan hal ini, berikut adalah JavaScript akhir. (Catatan: jika Anda tidak menggunakan jQuery Anda, ini mungkin sedikit menakutkan; namun tetap menggunakannya, dan Anda akan belajar dengan menyelami kode.) Setelah naskah lengkap, kita akan mengambilnya satu bagian di ada waktu dan jelaskan apa yang terjadi.

$("#signup").validate({
  success : function(label){
    label.addClass("valid").text("✓");
  },
  error : function(e){
  // do nothing, but register this function
  },
  onsubmit:false,
  rules: {
    phone: {
      required: true,
      phoneUS: true
    }
  }
});

$("body").on("keyup", "form", function(e){
  if (e.which == 13){
    if ($("#next").is(":visible") && $("fieldset.current").find("input, textarea").valid() ){
      e.preventDefault();
      nextSection();
      return false;
    }
  }
});


$("#next").on("click", function(e){
  console.log(e.target);
  nextSection();
});

$("form").on("submit", function(e){
  if ($("#next").is(":visible") || $("fieldset.current").index() < 3){
    e.preventDefault();
  }
});

function goToSection(i){
  $("fieldset:gt("+i+")").removeClass("current").addClass("next");
  $("fieldset:lt("+i+")").removeClass("current");
  $("li").eq(i).addClass("current").siblings().removeClass("current");
  setTimeout(function(){
    $("fieldset").eq(i).removeClass("next").addClass("current active");
      if ($("fieldset.current").index() == 3){
        $("#next").hide();
        $("input[type=submit]").show();
      } else {
        $("#next").show();
        $("input[type=submit]").hide();
      }
  }, 80);

}

function nextSection(){
  var i = $("fieldset.current").index();
  if (i < 3){
    $("li").eq(i+1).addClass("active");
    goToSection(i+1);
  }
}

$("li").on("click", function(e){
  var i = $(this).index();
  if ($(this).hasClass("active")){
    goToSection(i);
  } else {
    alert("Please complete previous sections first.");
  }
});


jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
  return this.optional(element) || phone_number.length > 9 &&
    phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

Jadi, mari kita mulai satu-satu.

$("#signup").validate({
  success : function(label){
    label.addClass("valid").text("✓");
  },
  error : function(e){
  // do nothing, but register this function
  },
  onsubmit:false,
  rules: {
    phone: {
      required: true,
      phoneUS: true
    }
  }
});

Fungsi ini adalah fungsi pengaturan untuk jQuery Validate. Pertama, kita memberi tahu plugin untuk mengambil formulir pendaftaran dan menerapkan validasi untuk itu. Jika validasi berhasil, kita menambahkan kelas valid ke label yang dimasukkan plugin validasi setelah elemen input, dan mengganti teks dengan tanda centang ✓ utf-8.

Kita juga mendaftarkan error callback, meskipun sebenarnya tidak melakukan apa pun dalam fungsi ini. Tidak mendaftarkan fungsi tampaknya memiliki callback yang sama sebagai fungsi keberhasilan pada kesalahan. Kita sedang mengatur hook onsubmit ke false; ini karena menekan enter secara otomatis mengirimkan formulir, yang secara default memicu validasi untuk mencegah pengiriman formulir yang tidak valid. Mencegah perilaku default pengiriman formulir tidak mencegah validasi form. Hasilnya adalah bahwa bidang pada layar "berikutnya" sudah menunjukkan kesalahan validasi, meskipun formulir tidak pernah dikirimkan.

$("body").on("keyup", "form", function(e){
  if (e.which == 13){
    if ($("#next").is(":visible") && $("fieldset.current").find("input, textarea").valid() ){
      e.preventDefault();
      nextSection();
    }
  }
});

Fungsi ini mendengarkan acara kunci yang dipicu pada formulir. Jika kunci yang dipukul masuk (kode kunci 13), kita kemudian melakukan pemeriksaan berikut. Jika tombol berikutnya masih terlihat dan bagian saat ini valid, mencegah perilaku default dari tombol enter yang sedang ditekan saat berada di formulir, yang merupakan pengiriman formulir.

kita kemudian memakai nextSection(), yang memajukan formulir ke bagian berikutnya. Jika bagian saat ini berisi input yang tidak valid, input tersebut diidentifikasi dan formulir tidak maju. Jika tombol berikutnya tidak terlihat, itu berarti kita berada di bagian akhir (yang akan kita lihat di fungsi berikutnya) dan kita ingin membiarkan perilaku default (pengiriman formulir) terjadi.

$("#next").on("click", function(e){
  nextSection();
});

$("form").on("submit", function(e){
  if ($("#next").is(":visible") || $("fieldset.current").index() < 3){
    e.preventDefault();
  }
});

Fungsi-fungsi ini sangat mudah. Jika Anda menekan tombol dengan id "next", kita ingin maju ke bagian selanjutnya. Ingat fungsi nextSection() berisi semua pemeriksaan yang diperlukan untuk validasi form.

Pada acara kirim di formulir, kita ingin menghindari pengiriman formulir jika tombol berikutnya terlihat atau jika fieldset saat ini bukan yang terakhir.

function goToSection(i){
  $("fieldset:gt("+i+")").removeClass("current").addClass("next");
  $("fieldset:lt("+i+")").removeClass("current");
  $("li").eq(i).addClass("current").siblings().removeClass("current");
  setTimeout(function(){
    $("fieldset").eq(i).removeClass("next").addClass("current active");
      if ($("fieldset.current").index() == 3){
        $("#next").hide();
        $("input[type=submit]").show();
      } else {
        $("#next").show();
        $("input[type=submit]").hide();
      }
  }, 80);

}

Fungsi goToSection() adalah pekerja keras di belakang navigasi formulir ini. Dibutuhkan satu argumen - indeks navigasi target. Fungsi mengambil semua fieldsset dengan indeks lebih besar dari yang dilewati dalam parameter indeks dan menghapus kelas current, dan menambahkan kelas next. Ini mendorong elemen di sebelah kanan formulir.

Selanjutnya, kita menghapus kelas saat ini dari semua fieldsset dengan indeks kurang dari yang dilewatkan dalam indeks. Selanjutnya, kita memilih item daftar yang sama dengan indeks yang diteruskan dan menambahkan kelas saat ini.

Selanjutnya kita menghapus kelas saat ini dari semua saudara li lainnya. tenetapkan batas waktu, setelah itu hapus kelas berikutnya dan tambahkan kelas saat ini dan aktif ke fieldset dengan indeks yang sama dengan yang dilewatkan dalam parameter indeks.

Kelas aktif memungkinkan kita mengetahui bahwa pengguna dapat menavigasi ke bagian khusus ini lagi. Jika dilewatkan dalam parameter indeks adalah 3 (fieldset akhir), kita menyembunyikan tombol berikutnya dan menunjukkan tombol submit. Jika tidak, kita ingin memastikan tombol berikutnya terlihat dan tombol kirim disembunyikan. Ini memungkinkan kita untuk menyembunyikan tombol submit kecuali fieldset terakhir terlihat.

function nextSection(){
  var i = $("fieldset.current").index();
  if (i < 3){
    $("li").eq(i+1).addClass("active");
    goToSection(i+1);
  }
}

$("li").on("click", function(e){
  var i = $(this).index();
  if ($(this).hasClass("active")){
    goToSection(i);
  } else {
    alert("Please complete previous sections first.");
  }
});

The nextSection() fungsi pada dasarnya adalah pembungkus di sekitar fungsi goToSection(). Ketika nextSection dipanggil, pemeriksaan sederhana dilakukan untuk memastikan bahwa kita tidak berada di bagian terakhir. Asalkan kita tidak, kita pergi ke bagian dengan indeks yang sama dengan indeks dari bagian saat ini, ditambah satu.

Kita mendengarkan acara klik pada daftar item. Fungsi ini memeriksa untuk memastikan item daftar memiliki kelas aktif, yang diterima begitu pengguna awalnya tiba ke bagian formulir tersebut dengan menyelesaikan semua bagian sebelumnya. Jika item daftar memang memiliki kelas, kita memanggil goToSection dan lulus dalam indeks item daftar itu. Jika pengguna mengklik item daftar yang sesuai dengan bagian yang belum dapat mereka akses, browser akan memberi tahu mereka untuk memberi tahu bahwa mereka harus menyelesaikan bagian sebelumnya sebelum maju.

jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
  return this.optional(element) || phone_number.length > 9 &&
    phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

Akhirnya, kita menambahkan metode yang ditentukan oleh plugin jQuery Validate yang memeriksa input secara manual. Kita tidak akan menghabiskan banyak waktu untuk hal ini, karena fungsi yang tepat ini dapat ditemukan dalam Validasi documentation.

Pada dasarnya, kita memeriksa untuk memastikan teks yang dimasukkan pengguna ke dalam bidang telepon cocok dengan regex (string panjang angka dan simbol). Jika ya, maka inputnya valid. Jika tidak, pesan "Silakan tentukan nomor telepon yang valid" ditambahkan setelah input. Anda dapat menggunakan fungsi yang sama ini untuk memeriksa jenis masukan apa pun (tidak harus menggunakan regex).

Catatan: Jangan gunakan ini sebagai metode otentikasi kata sandi. Ini sangat tidak aman dan siapa saja dapat melihat sumber untuk melihat kata sandi.

Kesimpulan

Kita telah menggunakan semantik HTML dan LESS sederhana yang dikombinasikan dengan beberapa JavaScript minimal untuk membangun interaksi bentuk yang kuat. Metode yang digunakan untuk membangun formulir ini, terutama menggunakan nama-nama kelas untuk mengidentifikasi keadaan dan mendefinisikan fungsi dan animasi, dapat digunakan di hampir semua proyek interaktif. Fungsionalitas yang sama dapat digunakan untuk demonstrasi langkah demi langkah, permainan, dan hal lain yang bergantung pada interaksi sederhana berbasis negara.

Apa lagi yang akan Anda lakukan pada formulir ini? Jenis interaksi apa yang Anda temukan untuk membantu pengguna lebih alami mengalir melalui proses yang membosankan seperti mengisi formulir multi-langkah panjang? Bagikan di komentar!