Cara membuat formulir multi-langkah menggunakan vanilla JavaScript dan CSS

Formulir multi-langkah adalah pilihan yang baik jika formulir berukuran besar dan berisi banyak kontrol. Tak seorang pun ingin menelusuri formulir yang sangat panjang di perangkat seluler. Dengan mengelompokkan kontrol berdasarkan layar demi layar, kami dapat meningkatkan pengalaman mengisi formulir yang panjang dan rumit.

Namun kapan terakhir kali Anda mengembangkan model multi-langkah? Apakah itu terdengar menyenangkan bagi Anda? Ada banyak hal yang harus dipikirkan dan banyak hal yang harus dikelola, jadi saya tidak akan menyalahkan Anda karena menggunakan perpustakaan template atau bahkan semacam widget UI yang menangani semuanya untuk Anda.

Namun melakukannya secara manual bisa menjadi latihan yang bagus dan cara yang bagus untuk memoles dasar-dasarnya. Saya akan menunjukkan kepada Anda bagaimana saya membuat model multi-langkah pertama saya, dan saya harap Anda tidak hanya melihat betapa mudahnya model tersebut diakses, tetapi mungkin Anda juga akan menemukan area yang membuat pekerjaan saya lebih baik.

-Advertisement-.

Kita akan berjalan melewati kuil bersama. Kami akan mempersiapkan lamaran pekerjaan, yang menurut saya banyak dari kita dapat memahaminya beberapa hari terakhir ini. Saya akan mendukung HTML dasar, CSS, dan JavaScript terlebih dahulu, lalu kita akan melihat pertimbangan aksesibilitas dan validasi.

Saya telah membuat repo GitHub dari kode akhir jika Anda ingin mereferensikannya selama proses.

Struktur model multi-langkah

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

Menavigasi pengguna untuk menavigasi melalui bagian berarti kami juga akan menyertakan indikator visual tentang langkah apa yang telah mereka capai dan berapa banyak langkah yang tersisa. Indikator ini dapat berupa teks dinamis sederhana yang diperbarui sesuai dengan langkah aktif atau jenis indikator bilah kemajuan yang lebih canggih. Kami akan melakukan yang pertama untuk menjaga semuanya tetap sederhana dan fokus pada sifat multi-langkah model.

Struktur dan metode dasar

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

Mari kita mulai dengan membuat folder untuk menampung halaman kita. Kemudian buat 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="script.js"></script>

Melihat kodenya, Anda dapat melihat tiga bagian dan grup navigasi. Bagian tersebut berisi masukan model dan tidak ada validasi model asli. Hal ini memberi kita kontrol yang lebih baik terhadap tampilan pesan kesalahan karena validasi formulir asli hanya dipicu ketika tombol kirim diklik.

Selanjutnya, buat styles.css file dan tempel 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 mendapatkan tampilan seperti tata letak dua kolom pada tangkapan layar berikut, lengkap dengan indikator halaman saat ini dan navigasi.

Tambahkan fungsionalitas menggunakan Vanilla JavaScript

Sekarang, buatlah 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 ini menentukan metode untuk menampilkan dan menyembunyikan bagian tersebut formStep Nilai yang sesuai dengan pengidentifikasi bagian formulir. Itu diperbarui stepInfo Dengan bagian formulir yang aktif saat ini. Teks dinamis ini bertindak sebagai indikator kemajuan bagi pengguna.

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

Navigasikan formulir multi-langkah

Mari selami lebih dalam fungsi kode Javascript di atas. di dalam updateStepVisibility() fungsinya, pertama-tama kita sembunyikan semua partisi untuk mendapatkan registri yang bersih:

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

Kemudian kita tampilkan partisi yang sedang aktif:

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

Selanjutnya, kami memperbarui teks di mana kemajuan indikator melalui bentuk:

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

Terakhir, kita sembunyikan tombol Sebelumnya jika kita berada di langkah pertama, dan kita sembunyikan tombol Berikutnya jika kita 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. Kami pertama-tama menyembunyikan tombol sebelumnya saat memuat formulir di bagian pertama:

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

Kemudian kita ambil tombol berikutnya dan menambahkan acara klik yang secara kondisional menambah jumlah langkah saat ini dan kemudian memanggil updateStepVisibility() fungsi, yang kemudian memperbarui bagian baru yang akan ditampilkan:

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

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

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

Berurusan dengan kesalahan

Pernahkah Anda menghabiskan lebih dari 10 menit untuk mengisi formulir dan kemudian mengirimkannya dan menerima kesalahan misterius yang meminta Anda untuk memperbaiki ini dan itu? Saya lebih suka jika formulir langsung memberi tahu saya ada sesuatu yang salah sehingga saya bisa memperbaikinya <>sebelum Anda telah mencapai tombol kirim. Inilah yang akan kami lakukan dalam bentuk kami.

Prinsip kami adalah dengan jelas menunjukkan kontrol mana yang mengandung kesalahan dan memberikan pesan kesalahan yang berarti. Hapus kesalahan saat pengguna mengambil tindakan. Mari tambahkan beberapa validasi ke model kita. 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-langkahnya:

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() === "" || !emailInput.validity.valid) {
    showError(emailInput, "A valid email is required");
    isValid = false;
  }

  if (birthdateInput.value === "") {
    showError(birthdateInput, "Date of birth is required");
    isValid = false;
  }
  
  else if (step === 1) {

    if (!documentInput.files[0]) {
      showError(documentInput, "CV is required");
      isValid = false;
    }

    if (departmentInput.value === "") {
      showError(departmentInput, "Department selection is required");
      isValid = false;
    }
  } else if (step === 2) {

    if (!termsCheckbox.checked) {
      showError(termsCheckbox, "You must accept the terms and conditions");
      isValid = false;
    }
  }

  return isValid;
}

Di sini, kami memeriksa apakah setiap entri yang diperlukan memiliki nilai tertentu dan apakah entri email berisi entri yang valid. Selanjutnya, kita menetapkan nilai boolean isValid yang sesuai. Kami juga memanggil A showError() Fungsinya belum kami definisikan.

Rekatkan kode ini di atas validateStep() pekerjaan:

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 style sheet:

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 memperbarui formulir, Anda akan melihat bahwa tombol tersebut tidak membawa Anda ke bagian berikutnya hingga masukan dianggap valid:

Terakhir, kami ingin menambahkan penanganan error real-time sehingga error hilang saat pengguna mulai memasukkan informasi yang benar. Tambahkan posting ini di bawah validateStep() pekerjaan:

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);
  });
}

Fungsi ini menghapus kesalahan jika input tidak lagi valid dengan mendengarkan kejadian input, mengubahnya, dan kemudian memanggil fungsi untuk menghapus kesalahan. lengket clearError() berfungsi di bawah showError() satu:

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

Sekarang kesalahan menjadi jelas ketika pengguna mengetikkan nilai yang benar:

Model multi-langkah sekarang menangani kesalahan dengan baik. Jika Anda memutuskan untuk menyimpan kesalahan hingga akhir formulir, paling tidak, pindahkan pengguna kembali ke kontrol formulir kesalahan dan tampilkan beberapa indikasi berapa banyak kesalahan yang perlu diperbaiki.

Menangani penyerahan formulir

Dalam model multi-langkah, akan berguna untuk menampilkan ringkasan semua jawaban kepada pengguna di bagian akhir sebelum mengirimkannya dan memberi mereka opsi untuk mengedit jawaban jika diperlukan. Seseorang tidak dapat melihat langkah sebelumnya tanpa kembali ke belakang, jadi menampilkan ringkasan pada langkah terakhir memberikan jaminan dan kesempatan untuk memperbaiki kesalahan apa pun.

Mari tambahkan bagian keempat ke markup untuk menahan tampilan ringkasan ini dan pindahkan tombol kirim ke dalamnya. Tempel ini tepat 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>

Kemudian perbarui formStep Dalam javascript Anda untuk membaca:

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

Terakhir, tambahkan kategori berikut ke 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 file di mana yang lain constdia:

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.

Kemudian perbarui updateStepVisibility() Fungsi untuk 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 ini ke DOMContentLoaded Pendengar acara:

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

Saat Anda menjalankan formulir, Anda akan melihat bahwa bagian Ringkasan menampilkan semua nilai yang dimasukkan dan memungkinkan pengguna untuk mengedit salah satu nilai tersebut sebelum mengirimkan informasi:

Sekarang kita dapat menyajikan model kita:

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: Menggunakan HTML semantik. Ini adalah setengah dari pertempuran. Hal ini diikuti dengan penunjukan model yang sesuai.

Cara lain untuk membuat formulir lebih mudah diakses termasuk menyediakan ruang yang cukup bagi item untuk diklik di layar kecil dan memberikan deskripsi berguna tentang navigasi formulir dan indikator kemajuan.

Memberikan umpan balik kepada pengguna adalah bagian penting; Tidaklah bagus untuk menolak komentar pengguna secara otomatis setelah jangka waktu tertentu, tetapi membiarkan pengguna menolaknya sendiri. Penting juga untuk memperhatikan kontras dan pilihan font, karena keduanya memengaruhi seberapa mudah formulir Anda dibaca.

Mari lakukan modifikasi pengkodean berikut untuk aksesibilitas yang lebih teknis:

1. Dia menambahkan aria-required="true" Untuk semua masukan kecuali satu keterampilan. Hal ini memungkinkan pembaca layar mengetahui bidang mana yang wajib diisi tanpa bergantung pada verifikasi asli.
2. Dia menambahkan role="alert" Salah sekali. Ini membantu pembaca layar mengetahui apa yang penting ketika input salah.
3. Dia menambahkan role="status" aria-live="polite" ke .stepInfo. Hal ini akan membantu pembaca layar memahami bahwa informasi langkah mengawasi status, dan menyetel aria-live ke sopan menunjukkan bahwa jika nilainya berubah, maka tidak perlu segera diumumkan.

Di file skrip, ganti showError() Dan clearError() Berfungsi 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 menambahkan dan menghapus atribut yang secara eksplisit menghubungkan entri ke rentang kesalahannya dan menunjukkan bahwa entri tersebut berada dalam status tidak valid.

Terakhir, mari fokus pada entri pertama setiap bagian; Tambahkan kode berikut sampai akhir updateStepVisibility() pekerjaan:

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

if (firstInput) {
  firstInput.focus();
}

Namun, model multi-langkah menjadi lebih mudah diakses.

kesimpulan

Ini dia, 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 diselesaikan – sedemikian rupa sehingga saya tidak akan menyalahkan Anda karena mencari solusi yang unik.

Namun jika Anda harus melalui formulir multi-langkah secara manual, semoga Anda sudah tahu bahwa ini bukanlah hukuman mati. Ada jalan bahagia yang membawa Anda ke sana, lengkap dengan navigasi dan validasi, tanpa menyimpang dari praktik baik yang dapat diakses.

Dan inilah cara saya menghadapinya! Sekali lagi, saya menganggap ini sebagai tantangan pribadi untuk melihat sejauh mana saya bisa melangkah, dan saya sangat senang dengan hal itu. Namun saya ingin tahu apakah Anda melihat peluang tambahan untuk menjadikan pengalaman pengguna ini lebih sadar dan mudah diakses.

Referensi

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

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

Cara Membuat Formulir Multi-Langkah Menggunakan Vanilla JavaScript dan CSS awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.

Sumber

-Advertisement-.