Cara membuat formulir multi-langkah menggunakan vanilla JavaScript dan CSS – Beragampengetahuan

Formulir multi-langkah adalah pilihan yang baik bila formulir Anda besar dan memiliki banyak kontrol. Tidak ada seorang pun yang ingin menelusuri formulir yang sangat panjang di perangkat seluler. Dengan mengelompokkan kontrol berdasarkan layar, kita dapat meningkatkan pengalaman mengisi formulir yang panjang dan rumit.

Namun kapan terakhir kali Anda mengembangkan formulir multi-langkah? Apakah ini terdengar menarik bagi Anda? Ada begitu banyak hal yang perlu dipikirkan dan begitu banyak bagian bergerak yang harus dikelola sehingga saya tidak akan menyalahkan Anda karena beralih ke perpustakaan formulir atau bahkan beberapa jenis widget formulir untuk menangani semuanya untuk Anda.

Namun melakukannya dengan tangan bisa menjadi praktik yang baik dan cara yang bagus untuk menyempurnakan dasar-dasarnya. Saya akan menunjukkan cara membuat formulir multi-langkah pertama saya, dan saya harap Anda tidak hanya melihat betapa mudahnya pendekatan itu, tapi mungkin bahkan menemukan sesuatu yang bisa saya lakukan untuk membuat pekerjaan saya lebih baik.

Kita akan menelusuri strukturnya bersama-sama. Kami akan membuat formulir lamaran pekerjaan yang menurut saya dapat dipahami oleh banyak dari kita dalam beberapa hari terakhir. Saya akan mulai dengan membuat dasar HTML, CSS, dan JavaScript, lalu kita akan mempertimbangkan pertimbangan aksesibilitas dan validasi.

Saya telah membuat repositori GitHub untuk kode akhir jika Anda ingin mereferensikannya selama proses berlangsung.

Struktur bentuk multi-langkah

Formulir lamaran kerja kami memiliki empat bagian, bagian terakhir adalah tampilan ringkasan di mana kami menampilkan semua jawaban kepada pengguna sebelum mereka mengirimkannya. Untuk mencapai hal ini, kami membagi HTML menjadi empat bagian, masing-masing diidentifikasi dengan ID, dan menambahkan navigasi di bagian bawah halaman. Saya akan memberi Anda HTML dasar di bagian selanjutnya.

Memandu pengguna melalui bagian-bagian tersebut berarti kami juga akan menyertakan indikator visual tentang langkah mana yang mereka jalani dan berapa banyak langkah yang tersisa. Indikatornya bisa berupa teks dinamis sederhana yang diperbarui berdasarkan langkah aktif, atau bisa juga berupa indikator jenis bilah kemajuan yang lebih canggih. Kami akan menggunakan yang pertama untuk menjaga hal-hal sederhana dan fokus pada sifat multi-langkah dari formulir.

Struktur dan gaya dasar

Kami akan lebih fokus pada logikanya, tetapi saya akan memberikan cuplikan kode dan tautan ke kode lengkap di bagian akhir.

Pertama mari kita buat folder untuk menyimpan halaman kita. Kemudian, buat a index.html file dan rekatkan yang berikut ke dalamnya:

<form id="myForm">
  <section class="group-one" id="one">
    <div class="form-group">
      <div class="form-control">
        <label for="name">Name <span style="color: red;">*</span></label>
        <input type="text" id="name" name="name" placeholder="Enter your name">
      </div>

      <div class="form-control">
        <label for="idNum">ID number <span style="color: red;">*</span></label>
        <input type="number" id="idNum" name="idNum" placeholder="Enter your ID number">
      </div>
    </div>

    <div class="form-group">
      <div class="form-control">
        <label for="email">Email <span style="color: red;">*</span></label>
        <input type="email" id="email" name="email" placeholder="Enter your email">
      </div>

      <div class="form-control">
        <label for="birthdate">Date of Birth <span style="color: red;">*</span></label>
        <input type="date" id="birthdate" name="birthdate" max="2006-10-01" min="1924-01-01">
      </div>
    </div>
  </section>

  <section class="group-two" id="two">
    <div class="form-control">
      <label for="document">Upload CV <span style="color: red;">*</span></label>
      <input type="file" name="document" id="document">
    </div>

    <div class="form-control">
      <label for="department">Department <span style="color: red;">*</span></label>
      <select id="department" name="department">
        <option value="">Select a department</option>
        <option value="hr">Human Resources</option>
        <option value="it">Information Technology</option>
        <option value="finance">Finance</option>
      </select>
    </div>
  </section>

  <section class="group-three" id="three">
    <div class="form-control">
      <label for="skills">Skills (Optional)</label>
      <textarea id="skills" name="skills" rows="4" placeholder="Enter your skills"></textarea>
    </div>

    <div class="form-control">
      <input type="checkbox" name="terms" id="terms">
      <label for="terms">I agree to the terms and conditions <span style="color: red;">*</span></label>
    </div>

    <button id="btn" type="submit">Confirm and Submit</button>
  </section>
  
  <div class="arrows">
    <button type="button" id="navLeft">Previous</button>
    <span id="stepInfo"></span>
    <button type="button" id="navRight">Next</button>
  </div>
</form>

<script src="

Melihat kodenya, Anda dapat melihat tiga bagian dan grup navigasi. Bagian ini berisi masukan formulir tetapi tidak ada validasi formulir asli. Hal ini memberi kami kontrol lebih besar atas tampilan pesan kesalahan, karena validasi formulir asli hanya akan dipicu ketika Anda mengklik tombol kirim.

Selanjutnya, buat a styles.css file dan rekatkan ini ke dalamnya:

:root 
  --primary-color: #8c852a;
  --secondary-color: #858034;


body 
  font-family: sans-serif;
  line-height: 1.4;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
  max-width: 600px;


h1 
  text-align: center;


form 
  background: #fff;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;


.form-group 
  display: flex;
  gap: 7%;



.form-group > div 
  width: 100%;


input:not([type="checkbox"]),
select,
textarea 
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;


.form-control 
  margin-bottom: 15px;


button 
  display: block;
  width: 100%;
  padding: 10px;
  color: white;
  background-color: var(--primary-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;



button:hover 
  background-color: var(--secondary-color);


.group-two, .group-three 
  display: none;


.arrows 
  display: flex;
  justify-content: space-between
  align-items: center;
  margin-top: 10px;


#navLeft, #navRight 
  width: fit-content;


@media screen and (max-width: 600px) 
  .form-group 
    flex-direction: column;
  

Buka file HTML di browser dan Anda akan melihat sesuatu yang mirip dengan tata letak dua kolom pada gambar di bawah, dengan indikator halaman saat ini dan navigasi.

Tambahkan fungsionalitas menggunakan JavaScript biasa

Sekarang, buat a script.js file di direktori yang sama dengan file HTML dan CSS, dan tempelkan JavaScript berikut ke dalamnya:

const stepInfo = document.getElementById("stepInfo");
const navLeft = document.getElementById("navLeft");
const navRight = document.getElementById("navRight");
const form = document.getElementById("myForm");
const formSteps = ["one", "two", "three"];

let currentStep = 0;

function updateStepVisibility() 
  formSteps.forEach((step) => 
    document.getElementById(step).style.display = "none";
  );

  document.getElementById(formSteps[currentStep]).style.display = "block";
  stepInfo.textContent = `Step $currentStep + 1 of $formSteps.length`;
  navLeft.style.display = currentStep === 0 ? "none" : "block";
  navRight.style.display =
  currentStep === formSteps.length - 1 ? "none" : "block";


document.addEventListener("DOMContentLoaded", () => 
  navLeft.style.display = "none";
  updateStepVisibility();
  navRight.addEventListener("click", () => 
    if (currentStep < formSteps.length - 1) 
      currentStep++;
      updateStepVisibility();
    
  );

  navLeft.addEventListener("click", () => 
    if (currentStep > 0) 
      currentStep--;
      updateStepVisibility();
    
  );
);

Skrip mendefinisikan metode berdasarkan formStep Nilai yang sesuai dengan ID bagian formulir. itu diperbarui stepInfo dengan bagian formulir yang sedang aktif. Teks dinamis ini bertindak sebagai indikator kemajuan bagi pengguna.

Kemudian menambahkan logika untuk menunggu halaman dimuat dan menambahkan peristiwa klik ke tombol navigasi untuk memungkinkan perputaran melalui bagian formulir yang berbeda. Jika Anda menyegarkan halaman, Anda akan melihat bahwa formulir multi-langkah berfungsi seperti yang diharapkan.

Navigasi formulir multi-langkah

Mari kita lihat lebih dekat apa yang dilakukan kode Javascript di atas. ada updateStepVisibility() fungsinya, pertama-tama kita sembunyikan semua bagian untuk mendapatkan keadaan bersih:

formSteps.forEach((step) => 
  document.getElementById(step).style.display = "none";
);

Kemudian kami menampilkan bagian yang sedang aktif:

document.getElementById(formSteps[currentStep]).style.display = "block";`

Selanjutnya, kami memperbarui teks yang menunjukkan kemajuan formulir:

stepInfo.textContent = `Step $currentStep + 1 of $formSteps.length`;

Terakhir, sembunyikan tombol “Sebelumnya” jika Anda berada di bagian pertama dan tombol “Berikutnya” jika Anda berada di bagian terakhir:

navLeft.style.display = currentStep === 0 ? "none" : "block";
navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block";

Mari kita lihat apa yang terjadi saat halaman dimuat. Saat formulir dimuat ke bagian pertama, pertama-tama kita sembunyikan tombol “Sebelumnya”:

document.addEventListener("DOMContentLoaded", () => 
navLeft.style.display = "none";
updateStepVisibility();

Kami kemudian mengambil tombol “Berikutnya” dan menambahkan acara klik yang secara kondisional menambah jumlah langkah saat ini dan kemudian memanggil updateStepVisibility() berfungsi dan kemudian perbarui bagian baru yang akan ditampilkan:

navRight.addEventListener("click", () => 
  if (currentStep < formSteps.length - 1) 
    currentStep++;
    updateStepVisibility();
  
);

Terakhir, kita ambil tombol Sebelumnya dan melakukan tindakan yang sama, tetapi dalam arah yang berlawanan. Di sini kami secara kondisional mengurangi jumlah langkah dan panggilan updateStepVisibility():

navLeft.addEventListener("click", () => 
  if (currentStep > 0) 
    currentStep--;
    updateStepVisibility();
  
);

kesalahan penanganan

Pernahkah Anda menghabiskan lebih dari 10 menit mengisi formulir sebelum mengirimkannya, hanya untuk menerima pesan kesalahan samar yang meminta Anda memperbaiki ini atau itu? Saya lebih suka formulir tersebut memberi tahu saya segera apa yang salah sehingga saya dapat memperbaikinya maju Saya pernah mengklik tombol “Kirim”. Inilah yang akan kami lakukan dalam formulir kami.

Kebijakan kami adalah dengan jelas menunjukkan kontrol mana yang memiliki kesalahan dan memberikan pesan kesalahan yang berarti. Kesalahan teratasi ketika pengguna mengambil tindakan yang diperlukan. Mari tambahkan beberapa validasi ke formulir. Pertama, ambil elemen masukan yang diperlukan dan tambahkan ke elemen yang sudah ada:

const nameInput = document.getElementById("name");
const idNumInput = document.getElementById("idNum");
const emailInput = document.getElementById("email");
const birthdateInput = document.getElementById("birthdate")
const documentInput = document.getElementById("document");
const departmentInput = document.getElementById("department");
const termsCheckbox = document.getElementById("terms");
const skillsInput = document.getElementById("skills");

Kemudian, tambahkan fungsi untuk memvalidasi langkah tersebut:

function validateStep(step) 
  let isValid = true;
  
  if (step === 0) 
    if (nameInput.value.trim() === "") 
    showError(nameInput, "Name is required");
    isValid = false;
  

  if (idNumInput.value.trim() === "") 
    showError(idNumInput, "ID number is required");
    isValid = false;
  

  if (emailInput.value.trim() === "" 

Di sini kami memeriksa apakah setiap input yang diperlukan memiliki nilai tertentu dan apakah input email memiliki input yang valid. Kami kemudian mengatur boolean isValid sesuai. Kami juga memanggil a showError() Fungsinya, kami belum mendefinisikannya.

Rekatkan kode ini di atas validateStep() Fungsi:

function showError(input, message) 
  const formControl = input.parentElement;
  const errorSpan = formControl.querySelector(".error-message");
  input.classList.add("error");
  errorSpan.textContent = message;

Sekarang tambahkan gaya berikut ke stylesheet Anda:

input:focus, select:focus, textarea:focus 
  outline: .5px solid var(--primary-color);


input.error, select.error, textarea.error 
  outline: .5px solid red;


.error-message 
  font-size: x-small;
  color: red;
  display: block;
  margin-top: 2px;


.arrows 
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 900;



#navLeft, #navRight 
  display: flex;
  align-items: center;
  gap: 10px;


#stepInfo 
  color: var(--primary-color);

Jika Anda menyegarkan formulir, Anda akan melihat bahwa tombol tersebut tidak membawa Anda ke bagian berikutnya hingga masukan dianggap valid:

Terakhir, kami ingin menambahkan penanganan kesalahan secara real-time sehingga kesalahan tersebut hilang ketika pengguna mulai memasukkan informasi yang benar. Tambahkan fungsi ini di bawah validateStep() Fungsi:

function setupRealtimeValidation() 
  nameInput.addEventListener("input", () => 
    if (nameInput.value.trim() !== "") clearError(nameInput);
  );

  idNumInput.addEventListener("input", () => 
    if (idNumInput.value.trim() !== "") clearError(idNumInput);
  );
  
  emailInput.addEventListener("input", () => 
    if (emailInput.validity.valid) clearError(emailInput);
  );
  
  birthdateInput.addEventListener("change", () => 
    if (birthdateInput.value !== "") clearError(birthdateInput);
  );
  
  documentInput.addEventListener("change", () => 
    if (documentInput.files[0]) clearError(documentInput);
  );
  
  departmentInput.addEventListener("change", () => 
    if (departmentInput.value !== "") clearError(departmentInput);
  );
  
  termsCheckbox.addEventListener("change", () => 
    if (termsCheckbox.checked) clearError(termsCheckbox);
  );

Jika input tidak lagi valid, fungsi akan menghapus kesalahan dengan mendengarkan input dan peristiwa perubahan, lalu memanggil fungsi untuk menghapus kesalahan. Pasta clearError() Fungsi berikut showError() satu:

function clearError(input) 
  const formControl = input.parentElement;
  const errorSpan = formControl.querySelector(".error-message");
  input.classList.remove("error");
  errorSpan.textContent = "";

Sekarang, ketika pengguna memasukkan nilai yang benar, kesalahannya hilang:

Formulir multi-langkah kini menangani kesalahan dengan baik. Jika Anda memutuskan untuk menyimpan kesalahan hingga akhir formulir, paling tidak, kembalikan pengguna ke kontrol formulir tempat kesalahan terjadi dan tunjukkan beberapa indikasi berapa banyak kesalahan yang perlu mereka perbaiki.

Menangani pengiriman formulir

Dalam format multi-langkah, penting untuk menampilkan ringkasan semua jawaban kepada pengguna sebelum mereka mengirimkannya dan memberi mereka opsi untuk mengedit jawaban jika perlu. Pengguna tidak dapat melihat langkah sebelumnya tanpa menavigasi mundur, jadi menampilkan ringkasan pada langkah terakhir memberikan kepastian dan peluang untuk memperbaiki kesalahan apa pun.

Mari tambahkan bagian keempat ke markup untuk menahan tampilan ringkasan ini dan memindahkan tombol kirim di dalamnya. Tempel ini di bawah bagian ketiga index.html:

<section class="group-four" id="four">
  <div class="summary-section">
    <p>Name: </p>
    <p id="name-val"></p>
    <button type="button" class="edit-btn" id="name-edit">
    <span>✎</span>
    <span>Edit</span>
    </button>
  </div>
  
  <div class="summary-section">
    <p>ID Number: </p>
    <p id="id-val"></p>
    <button type="button" class="edit-btn" id="id-edit">
    <span>✎</span>
    <span>Edit</span>
    </button>
  </div>
  
  <div class="summary-section">
    <p>Email: </p>
    <p id="email-val"></p>
    <button type="button" class="edit-btn" id="email-edit">
    <span>✎</span>
    <span>Edit</span>
    </button>
  </div>
  
  <div class="summary-section">
    <p>Date of Birth: </p>
    <p id="bd-val"></p>
    <button type="button" class="edit-btn" id="bd-edit">
    <span>✎</span>
    <span>Edit</span>
    </button>
  </div>
  
  <div class="summary-section">
    <p>CV/Resume: </p>
    <p id="cv-val"></p>
    <button type="button" class="edit-btn" id="cv-edit">
      <span>✎</span>
      <span>Edit</span>
    </button>
  </div>
    
  <div class="summary-section">
    <p>Department: </p>
    <p id="dept-val"></p>
    <button type="button" class="edit-btn" id="dept-edit">
      <span>✎</span>
      <span>Edit</span>
    </button>
  </div>
    
  <div class="summary-section">
    <p>Skills: </p>
    <p id="skills-val"></p>
    <button type="button" class="edit-btn" id="skills-edit">
      <span>✎</span>
      <span>Edit</span>
    </button>
  </div>
  
  <button id="btn" type="submit">Confirm and Submit</button>
</section>

lalu perbarui formStep Baca di Javascript Anda:

const formSteps = ["one", "two", "three", "four"];

Terakhir tambahkan kelas-kelas berikut styles.css:

.summary-section 
  display: flex;
  align-items: center;
  gap: 10px;


.summary-section p:first-child 
  width: 30%;
  flex-shrink: 0;
  border-right: 1px solid var(--secondary-color);


.summary-section p:nth-child(2) 
  width: 45%;
  flex-shrink: 0;
  padding-left: 10px;


.edit-btn 
  width: 25%;
  margin-left: auto;
  background-color: transparent;
  color: var(--primary-color);
  border: .7px solid var(--primary-color);
  border-radius: 5px;
  padding: 5px;


.edit-btn:hover 
  border: 2px solid var(--primary-color);
  font-weight: bolder;
  background-color: transparent;

Sekarang tambahkan yang berikut ini ke atas script.js Lokasi lain tempat file berada constYa:

const nameVal = document.getElementById("name-val");
const idVal = document.getElementById("id-val");
const emailVal = document.getElementById("email-val");
const bdVal = document.getElementById("bd-val")
const cvVal = document.getElementById("cv-val");
const deptVal = document.getElementById("dept-val");
const skillsVal = document.getElementById("skills-val");
const editButtons = 
  "name-edit": 0,
  "id-edit": 0,
  "email-edit": 0,
  "bd-edit": 0,
  "cv-edit": 1,
  "dept-edit": 1,
  "skills-edit": 2
;

Kemudian tambahkan fungsi ini scripts.js:

function updateSummaryValues() 
  nameVal.textContent = nameInput.value;
  idVal.textContent = idNumInput.value;
  emailVal.textContent = emailInput.value;
  bdVal.textContent = birthdateInput.value;

  const fileName = documentInput.files[0]?.name;
  if (fileName) 
  const extension = fileName.split(".").pop();
  const baseName = fileName.split(".")[0];
  const truncatedName = baseName.length > 10 ? baseName.substring(0, 10) + "..." : baseName;
  cvVal.textContent = `$truncatedName.$extension`;
   else 
    cvVal.textContent = "No file selected";
  

  deptVal.textContent = departmentInput.value;
  skillsVal.textContent = skillsInput.value || "No skills submitted";
}

Ini secara dinamis memasukkan nilai masukan ke bagian ringkasan formulir, memotong nama file, dan menyediakan teks cadangan untuk masukan yang tidak diinginkan.

lalu perbarui updateStepVisibility() Fungsi yang memanggil fungsi baru:

function updateStepVisibility() 
  formSteps.forEach((step) => 
    document.getElementById(step).style.display = "none";
  );

  document.getElementById(formSteps[currentStep]).style.display = "block";
  stepInfo.textContent = `Step $currentStep + 1 of $formSteps.length`;
  if (currentStep === 3) 
    updateSummaryValues();
  

  navLeft.style.display = currentStep === 0 ? "none" : "block";
  navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block";

Terakhir, tambahkan ke DOMContentLoaded Pendengar acara:

Object.keys(editButtons).forEach((buttonId) => 
  const button = document.getElementById(buttonId);
  button.addEventListener("click", (e) => 
    currentStep = editButtons[buttonId];
    updateStepVisibility();
  );
);

Jalankan formulir dan Anda akan melihat bagian ringkasan yang menunjukkan semua nilai yang dimasukkan dan memungkinkan pengguna untuk mengedit sebelum mengirimkan informasi:

Sekarang, kita dapat mengirimkan formulir:

form.addEventListener("submit", (e) => 
  e.preventDefault();

  if (validateStep(2)) 
    alert("Form submitted successfully!");
    form.reset();
    currentFormStep = 0;
    updateStepVisibility();

);

Formulir multi-langkah kami sekarang memungkinkan pengguna untuk mengedit dan meninjau semua informasi yang mereka berikan sebelum mengirimkannya.

Kiat Aksesibilitas

Membuat formulir multi-langkah dapat diakses dimulai dengan hal-hal dasar: Gunakan HTML semantik. Ini adalah setengah dari pertempuran. Berikutnya adalah menggunakan tag formulir yang sesuai.

Cara lain untuk membuat formulir Anda lebih mudah diakses termasuk menyediakan ruang yang cukup untuk elemen yang harus diklik di layar kecil, dan memberikan deskripsi bermakna untuk navigasi formulir dan indikator kemajuan.

Memberikan umpan balik kepada pengguna adalah bagian penting dari hal ini; secara otomatis mengabaikan umpan balik pengguna setelah jangka waktu tertentu tidaklah bagus, tetapi memungkinkan pengguna untuk mengabaikannya sendiri. Penting juga untuk memperhatikan kontras dan pemilihan font, karena keduanya memengaruhi keterbacaan formulir Anda.

Mari lakukan penyesuaian berikut pada markup untuk aksesibilitas yang lebih teknis:

1. Tambahkan ke aria-required="true" Semua input kecuali skill satu. Hal ini memungkinkan pembaca layar mengetahui bahwa bidang ini wajib diisi tanpa bergantung pada validasi asli.
2. Tambahkan ke role="alert" ke rentang kesalahan. Ini membantu pembaca layar mengetahui untuk menanggapi masukan dengan serius ketika keadaannya salah.
3. Tambahkan ke role="status" aria-live="polite" tiba .stepInfo. Hal ini akan membantu pembaca layar memahami bahwa informasi langkah mengawasi status, dan mengatur aria-live menjadi sopan berarti bahwa jika suatu nilai berubah, maka tidak perlu segera diumumkan.

Di file skrip, ganti showError() Dan clearError() Memiliki fungsi sebagai berikut:

function showError(input, message) 
  const formControl = input.parentElement;
  const errorSpan = formControl.querySelector(".error-message");
  input.classList.add("error");
  input.setAttribute("aria-invalid", "true");
  input.setAttribute("aria-describedby", errorSpan.id);
  errorSpan.textContent = message;
  

  function clearError(input) 
  const formControl = input.parentElement;
  const errorSpan = formControl.querySelector(".error-message");
  input.classList.remove("error");
  input.removeAttribute("aria-invalid");
  input.removeAttribute("aria-describedby");
  errorSpan.textContent = "";

Di sini kami secara terprogram menambah dan menghapus atribut yang secara eksplisit mengikat masukan ke cakupan kesalahannya dan menampilkannya dalam keadaan tidak valid.

Terakhir, mari tambahkan fokus pada masukan pertama setiap bagian; tambahkan kode berikut di akhir updateStepVisibility() Fungsi:

const currentStepElement = document.getElementById(formSteps[currentStep]);
const firstInput = currentStepElement.querySelector(
  "input, select, textarea"
);

if (firstInput) 
  firstInput.focus();

Dengan cara ini, formulir multi-langkah lebih mudah diakses.

sebagai kesimpulan

Ini adalah formulir lamaran pekerjaan yang terdiri dari empat bagian dan multi-langkah! Seperti yang saya katakan di bagian atas artikel ini, ada banyak hal yang harus ditangani, sehingga saya tidak akan menyalahkan Anda karena mencari solusi yang out-of-the-box.

Namun jika Anda harus menulis formulir multi-langkah dengan tangan, saya harap Anda sudah mengerti bahwa ini bukanlah hukuman mati. Ada jalan bahagia yang dapat membawa Anda ke sana, lengkap dengan navigasi dan validasi, tanpa meninggalkan praktik yang baik dan dapat diakses.

Inilah cara saya melakukannya! Sekali lagi, saya menganggap ini sebagai tantangan pribadi untuk melihat sejauh mana saya bisa melangkah, dan saya sangat senang dengan hal itu. Namun saya tertarik untuk mengetahui apakah Anda melihat peluang lain untuk lebih fokus pada pengalaman pengguna dan mempertimbangkan aksesibilitas.

lihat

Berikut beberapa tautan relevan yang saya referensikan saat menulis artikel ini:

1. Cara membuat formulir web (MDN)
2. Formulir multi-halaman (W3C.org)
3. Buat formulir yang dapat diakses (proyek A11y)

Cara membuat formulir multi-langkah menggunakan vanilla JavaScript dan CSS awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.