Cara Membuat Borang Pelbagai Langkah Dengan Vanila JavaScript dan CSS-tutorial css-php.cn

How to Create Multi-Step Forms With Vanilla JavaScript and CSS

Borang Multi-Langkah adalah pilihan yang baik apabila borang anda besar dan mempunyai banyak kawalan. Tiada siapa yang mahu menatal melalui bentuk yang sangat panjang pada peranti mudah alih. Dengan mengumpulkan kawalan berdasarkan skrin demi skrin, kita dapat meningkatkan pengalaman mengisi bentuk panjang dan kompleks.

Tetapi bilakah kali terakhir anda membangunkan borang pelbagai langkah? Adakah itu menyeronokkan untuk anda? Terdapat banyak perkara yang perlu difikirkan dan begitu banyak kepingan bergerak yang perlu diuruskan bahawa saya tidak akan menyalahkan anda untuk menggunakan perpustakaan bentuk atau bahkan beberapa jenis widget bentuk yang mengendalikan semuanya untuk anda.

tetapi melakukannya dengan tangan boleh menjadi latihan yang baik dan cara yang baik untuk menggilap asas -asas. Saya akan menunjukkan kepada anda bagaimana saya membina borang multi-langkah pertama saya, dan saya harap anda tidak hanya akan melihat bagaimana ia dapat didekati tetapi mungkin juga kawasan tempat untuk membuat kerja saya lebih baik.

Kami akan berjalan melalui struktur bersama -sama. Kami akan membina permohonan kerja, yang saya fikir ramai di antara kita boleh mengaitkan hari -hari ini. Saya akan perancah asas HTML, CSS, dan JavaScript terlebih dahulu, dan kemudian kita akan melihat pertimbangan untuk kebolehcapaian dan pengesahan.

Saya telah membuat repo github untuk kod akhir jika anda mahu merujuknya di sepanjang jalan.

Dapatkan kod contoh

struktur bentuk multi-langkah

Borang permohonan kerja kami mempunyai empat bahagian, yang terakhir adalah pandangan ringkasan, di mana kami menunjukkan pengguna semua jawapan mereka sebelum mereka menyerahkannya. Untuk mencapai matlamat ini, kami membahagikan HTML ke dalam empat bahagian, masing -masing dikenal pasti dengan ID, dan menambah navigasi di bahagian bawah halaman. Saya akan memberi anda HTML asas di bahagian seterusnya.

Menavigasi pengguna untuk bergerak melalui bahagian bermakna kita juga akan memasukkan penunjuk visual untuk langkah mereka dan berapa banyak langkah yang tersisa. Penunjuk ini boleh menjadi teks dinamik mudah yang dikemas kini mengikut langkah aktif atau penunjuk jenis bar kemajuan yang lebih menarik. Kami akan melakukan bekas untuk menjaga perkara-perkara yang mudah dan memberi tumpuan kepada sifat berbilang langkah bentuk.,

struktur dan gaya asas

Kami akan memberi tumpuan lebih kepada logik, tetapi saya akan memberikan coretan kod dan pautan ke kod lengkap pada akhir.

mari kita mulakan dengan membuat folder untuk memegang halaman kami. Kemudian, buat fail index.html dan tampal yang berikut ke dalamnya:

Buka html

<form >
  <section  >
    <div >
      <div >
        <label for="name">Name <span style="color: red;">*</span></label>
        <input type="text"  name="name" placeholder="Enter your name">
      </div>

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

    <div >
      <div >
        <label for="email">Email <span style="color: red;">*</span></label>
        <input type="email"  name="email" placeholder="Enter your email">
      </div>

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

  <section  >
    <div >
      <label for="document">Upload CV <span style="color: red;">*</span></label>
      <input type="file" name="document" >
    </div>

    <div >
      <label for="department">Department <span style="color: red;">*</span></label>
      <select  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  >
    <div >
      <label for="skills">Skills (Optional)</label>
      <textarea  name="skills" rows="4" placeholder="Enter your skills"></textarea>
    </div>

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

    <button  type="submit">Confirm and Submit</button>
  </section>
  
  <div >
    <button type="button" >Previous</button>
    <span ></span>
    <button type="button" >Next</button>
  </div>
</form>

<script src="script.js"></script>

Salin selepas log masuk

Melihat kod, anda dapat melihat tiga bahagian dan kumpulan navigasi. Bahagian ini mengandungi input bentuk dan tiada pengesahan bentuk asli. Ini adalah untuk memberi kita kawalan yang lebih baik untuk memaparkan mesej ralat kerana pengesahan bentuk asli hanya dicetuskan apabila anda mengklik butang hantar.

Seterusnya, buat fail styles.css dan tampal ini ke dalamnya:

Buka Gaya Pangkalan

<form >
  <section  >
    <div >
      <div >
        <label for="name">Name <span style="color: red;">*</span></label>
        <input type="text"  name="name" placeholder="Enter your name">
      </div>

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

    <div >
      <div >
        <label for="email">Email <span style="color: red;">*</span></label>
        <input type="email"  name="email" placeholder="Enter your email">
      </div>

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

  <section  >
    <div >
      <label for="document">Upload CV <span style="color: red;">*</span></label>
      <input type="file" name="document" >
    </div>

    <div >
      <label for="department">Department <span style="color: red;">*</span></label>
      <select  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  >
    <div >
      <label for="skills">Skills (Optional)</label>
      <textarea  name="skills" rows="4" placeholder="Enter your skills"></textarea>
    </div>

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

    <button  type="submit">Confirm and Submit</button>
  </section>
  
  <div >
    <button type="button" >Previous</button>
    <span ></span>
    <button type="button" >Next</button>
  </div>
</form>

<script src="script.js"></script>

Salin selepas log masuk

Buka fail HTML dalam penyemak imbas, dan anda harus mendapatkan sesuatu seperti susun atur dua lajur di tangkapan skrin berikut, lengkap dengan penunjuk halaman dan navigasi semasa.

Menambah fungsi dengan vanila JavaScript

Sekarang, buat fail script.js dalam direktori yang sama seperti fail HTML dan CSS dan tampal JavaScript berikut ke dalamnya:

Buka skrip asas

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

Salin selepas log masuk

Skrip ini mentakrifkan kaedah yang menunjukkan dan menyembunyikan bahagian bergantung kepada nilai FormStep yang sesuai dengan ID bahagian bentuk. Ia mengemas kini StepInfo dengan bahagian aktif semasa borang. Teks dinamik ini bertindak sebagai penunjuk kemajuan kepada pengguna.

Ia kemudian menambah logik yang menunggu halaman untuk memuatkan dan klik peristiwa ke butang navigasi untuk membolehkan berbasikal melalui bahagian bentuk yang berbeza. Jika anda menyegarkan halaman anda, anda akan melihat bahawa borang berbilang langkah berfungsi seperti yang diharapkan.

Navigasi Borang Multi-Langkah

mari kita menyelam lebih mendalam ke dalam apa yang dilakukan oleh kod JavaScript di atas. Dalam fungsi updateStepVisibility (), kita mula -mula menyembunyikan semua bahagian untuk mempunyai slate yang bersih:

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

Salin selepas log masuk

Kemudian, kami menunjukkan bahagian aktif yang sedang aktif:

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

Salin selepas log masuk

Seterusnya, kami mengemas kini teks yang menunjukkan kemajuan melalui bentuk:

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

Salin selepas log masuk

Akhirnya, kita menyembunyikan butang sebelumnya jika kita berada di langkah pertama dan menyembunyikan butang seterusnya jika kita berada di bahagian terakhir:

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

Salin selepas log masuk

Mari lihat apa yang berlaku apabila halaman dimuat. Kami mula -mula menyembunyikan butang sebelumnya sebagai borang yang dimuatkan pada bahagian pertama:

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

Salin selepas log masuk

Kemudian kami ambil butang seterusnya dan tambahkan acara klik yang menonjolkan kiraan langkah semasa dan kemudian memanggil fungsi updateStepVisibility (), yang kemudian mengemas kini bahagian baru yang akan dipaparkan:

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

Salin selepas log masuk

Akhirnya, kita ambil butang sebelumnya dan melakukan perkara yang sama tetapi sebaliknya. Di sini, kita secara kondusif menurunkan kiraan langkah dan memanggil updateStepVisibility ():

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

Salin selepas log masuk

mengendalikan ralat

Adakah anda pernah menghabiskan masa 10 minit yang baik untuk mengisi borang hanya untuk menyerahkannya dan mendapatkan kesilapan yang tidak jelas yang memberitahu anda untuk membetulkannya dan itu? Saya lebih suka apabila borang memberitahu saya dengan segera bahawa sesuatu yang tidak kena supaya saya dapat membetulkannya

sebelum saya pernah sampai ke butang hantar. Itulah yang akan kami lakukan dalam bentuk kami.

Prinsip kami adalah dengan jelas menunjukkan kawalan mana yang mempunyai kesilapan dan memberikan mesej ralat yang bermakna. Kesalahan yang jelas kerana pengguna mengambil tindakan yang diperlukan. Mari tambahkan beberapa pengesahan kepada borang kami. Pertama, mari kita ambil elemen input yang diperlukan dan tambahkan ini kepada yang sedia ada:

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

Salin selepas log masuk

Kemudian, tambahkan fungsi untuk mengesahkan langkah -langkah:

Buka skrip pengesahan

<form >
  <section  >
    <div >
      <div >
        <label for="name">Name <span style="color: red;">*</span></label>
        <input type="text"  name="name" placeholder="Enter your name">
      </div>

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

    <div >
      <div >
        <label for="email">Email <span style="color: red;">*</span></label>
        <input type="email"  name="email" placeholder="Enter your email">
      </div>

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

  <section  >
    <div >
      <label for="document">Upload CV <span style="color: red;">*</span></label>
      <input type="file" name="document" >
    </div>

    <div >
      <label for="department">Department <span style="color: red;">*</span></label>
      <select  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  >
    <div >
      <label for="skills">Skills (Optional)</label>
      <textarea  name="skills" rows="4" placeholder="Enter your skills"></textarea>
    </div>

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

    <button  type="submit">Confirm and Submit</button>
  </section>
  
  <div >
    <button type="button" >Previous</button>
    <span ></span>
    <button type="button" >Next</button>
  </div>
</form>

<script src="script.js"></script>

Salin selepas log masuk

di sini, kami periksa sama ada setiap input yang diperlukan mempunyai nilai dan jika input e -mel mempunyai input yang sah. Kemudian, kami menetapkan boolean isvalid dengan sewajarnya. Kami juga memanggil fungsi showerror (), yang belum ditakrifkan.

tampal kod ini di atas fungsi validateStep ():

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

Salin selepas log masuk

Sekarang, tambahkan gaya berikut ke lembaran gaya:

Buka Gaya Pengesahan

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

Salin selepas log masuk

Jika anda menyegarkan borang, anda akan melihat bahawa butang tidak membawa anda ke bahagian seterusnya sehingga input dianggap sah:

Akhirnya, kami ingin menambah pengendalian ralat masa nyata supaya kesilapan hilang apabila pengguna mula memasukkan maklumat yang betul. Tambahkan fungsi ini di bawah fungsi validateStep ():

Buka skrip pengesahan masa nyata

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

Salin selepas log masuk

Fungsi ini membersihkan kesilapan jika input tidak lagi tidak sah dengan mendengar input dan mengubah peristiwa kemudian memanggil fungsi untuk membersihkan kesilapan. Tampalkan fungsi ClearError () di bawah mandi () satu:

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

Salin selepas log masuk

dan sekarang kesilapan jelas apabila pengguna jenis dalam nilai yang betul:

Borang Multi-Langkah kini mengendalikan kesilapan dengan anggun. Sekiranya anda membuat keputusan untuk menyimpan kesilapan sehingga akhir borang, maka sekurang -kurangnya, lompat pengguna kembali ke kawalan borang ralat dan tunjukkan beberapa petunjuk tentang berapa banyak kesilapan yang perlu mereka selesaikan.

Penyerahan borang pengendalian

Dalam bentuk pelbagai langkah, adalah sangat berharga untuk menunjukkan pengguna ringkasan semua jawapan mereka pada akhir sebelum mereka menyerahkan dan menawarkan mereka pilihan untuk mengedit jawapan mereka jika perlu. Orang itu tidak dapat melihat langkah -langkah sebelumnya tanpa menavigasi ke belakang, jadi menunjukkan ringkasan pada langkah terakhir memberikan jaminan dan peluang untuk membetulkan sebarang kesilapan.

Mari tambahkan bahagian keempat ke markup untuk memegang pandangan ringkasan ini dan gerakkan butang hantar di dalamnya. Tampal ini di bawah bahagian ketiga di index.html:

Buka html

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

Salin selepas log masuk

kemudian kemas kini formstep dalam javascript anda untuk dibaca:

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

Salin selepas log masuk

Akhirnya, tambahkan kelas berikut ke styles.css:

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

Salin selepas log masuk

Sekarang, tambahkan yang berikut ke bahagian atas fail script.js di mana yang lain adalah:

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

Salin selepas log masuk

kemudian tambahkan fungsi ini dalam scripts.js:

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

Salin selepas log masuk

Ini secara dinamik memasukkan nilai input ke dalam bahagian ringkasan borang, memotong nama fail, dan menawarkan teks sandaran untuk input yang tidak diperlukan.

kemudian kemas kini fungsi updateStepVisibility () untuk memanggil fungsi baru:

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

Salin selepas log masuk

Akhirnya, tambahkan ini ke pendengar acara DomContentLoaded:

<form >
  <section  >
    <div >
      <div >
        <label for="name">Name <span style="color: red;">*</span></label>
        <input type="text"  name="name" placeholder="Enter your name">
      </div>

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

    <div >
      <div >
        <label for="email">Email <span style="color: red;">*</span></label>
        <input type="email"  name="email" placeholder="Enter your email">
      </div>

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

  <section  >
    <div >
      <label for="document">Upload CV <span style="color: red;">*</span></label>
      <input type="file" name="document" >
    </div>

    <div >
      <label for="department">Department <span style="color: red;">*</span></label>
      <select  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  >
    <div >
      <label for="skills">Skills (Optional)</label>
      <textarea  name="skills" rows="4" placeholder="Enter your skills"></textarea>
    </div>

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

    <button  type="submit">Confirm and Submit</button>
  </section>
  
  <div >
    <button type="button" >Previous</button>
    <span ></span>
    <button type="button" >Next</button>
  </div>
</form>

<script src="script.js"></script>

Salin selepas log masuk

menjalankan borang, anda harus melihat bahawa bahagian ringkasan menunjukkan semua nilai yang dimasukkan dan membolehkan pengguna mengedit apa -apa sebelum mengemukakan maklumat:

Dan sekarang, kita boleh mengemukakan borang kami:

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

Salin selepas log masuk

borang multi-langkah kami sekarang membolehkan pengguna mengedit dan melihat semua maklumat yang mereka sediakan sebelum menyerahkannya.

Tips Kebolehcapaian

Membuat bentuk multi-langkah boleh diakses bermula dengan asas-asas: Menggunakan HTML Semantik. Ini adalah separuh pertempuran. Ia diikuti dengan menggunakan label bentuk yang sesuai.

Cara lain untuk membuat borang lebih mudah diakses termasuk memberi ruang yang cukup kepada unsur -unsur yang mesti diklik pada skrin kecil dan memberikan deskripsi yang bermakna kepada penunjuk navigasi dan kemajuan.

Menawarkan maklum balas kepada pengguna adalah bahagian penting daripadanya; Ia tidak bagus untuk maklum balas pengguna auto-Dismiss selepas masa tertentu tetapi untuk membolehkan pengguna menolaknya sendiri. Memberi perhatian kepada kontras dan pilihan fon juga penting, kerana kedua -duanya mempengaruhi bagaimana bentuk anda boleh dibaca.

mari kita membuat pelarasan berikut untuk markup untuk lebih banyak akses teknikal:

Tambah aria-required = "true" kepada semua input kecuali kemahiran satu. Ini membolehkan pembaca skrin tahu medan diperlukan tanpa bergantung pada pengesahan asli.
Tambah role = "Alert" ke ralat ralat. Ini membantu pembaca skrin tahu untuk memberi kepentingan apabila input berada dalam keadaan ralat.
dalam fail skrip, ganti showerror () dan clearError () berfungsi dengan yang berikut:

Akhirnya, mari tambahkan fokus pada input pertama setiap bahagian; Tambahkan kod berikut hingga akhir fungsi updateStepVisibility ():

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

Salin selepas log masuk

Dan dengan itu, bentuk pelbagai langkah lebih mudah diakses.

Kesimpulan

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

Salin selepas log masuk

Di sana kita pergi, borang empat langkah empat bahagian untuk permohonan kerja! Seperti yang saya katakan di bahagian atas artikel ini, ada banyak untuk menyesuaikan diri-sehingga saya tidak menyalahkan anda kerana mencari penyelesaian yang luar biasa.

Tetapi jika anda perlu menggulung borang berbilang langkah, semoga sekarang anda melihat ia bukan hukuman mati. Terdapat jalan gembira yang membawa anda ke sana, lengkap dengan navigasi dan pengesahan, tanpa berpaling dari amalan yang baik dan boleh diakses.

Dan ini adalah cara saya mendekati! Sekali lagi, saya mengambil ini sebagai cabaran peribadi untuk melihat sejauh mana saya dapat, dan saya sangat gembira dengannya. Tetapi saya ingin tahu jika anda melihat peluang tambahan untuk membuat ini lebih menyedari pengalaman pengguna dan perhatian aksesibiliti.

Rujukan

Berikut adalah beberapa pautan yang relevan yang saya sebutkan ketika menulis artikel ini:

bagaimana untuk menyusun borang web (MDN)
Multi-Page Forms (w3c.org)
Buat borang yang boleh diakses (projek a11y)

Atas ialah kandungan terperinci Cara Membuat Borang Pelbagai Langkah Dengan Vanila JavaScript dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!