🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

แถบนำทางขั้นตอน (ตัวบ่งชี้)

แนะนำผู้ใช้อย่างเข้าใจง่ายผ่าน UI แบบหลายขั้นตอน

👀 การสาธิตสด (แบบลูกศร)

① ป้อนข้อมูล
② ยืนยัน
③ เสร็จสิ้น

🧩 การสาธิตขั้นสูง (ฟอร์มเชื่อมต่อกับขั้นตอน)

แบบฟอร์มติดต่อ

1
2
3
4

📋 โค้ดที่เกี่ยวข้อง

HTML สำหรับแถบนำทางขั้นตอน (ลูกศร)

<div class="step-nav">
  <div class="step completed">① ป้อนข้อมูล</div>
  <div class="step current">② ยืนยัน</div>
  <div class="step">③ เสร็จสิ้น</div>
</div>

HTML สำหรับตัวบ่งชี้ขั้นตอน (จุด)

<div class="step-indicator-dots">
  <div class="step-circle completed">1</div>
  <div class="step-circle active">2</div>
  <div class="step-circle">3</div>
</div>

📌 การแสดงตำแหน่งปัจจุบันด้วยลูกศรในแถบนำทางขั้นตอน

ในการสาธิตนี้ จะแสดงให้เห็นอย่างชัดเจนว่าผู้ใช้อยู่ในขั้นตอนใดด้วย "↑↑↑↑↑↑" และข้อความภาษาอังกฤษ ซึ่งมีประโยชน์สำหรับ UI แบบหลายขั้นตอน เช่น การป้อนฟอร์มจนถึงการส่งข้อมูลเสร็จสิ้น

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .step-nav {
      display: flex;
      justify-content: space-around;
      font-weight: bold;
      margin: 2rem 0;
      position: relative;
    }
    .step {
      color: gray;
      position: relative;
    }
    .step.current {
      color: #007bff;
    }
    .step.current::after {
  content: "　↑↑↑↑↑↑\A　 　ตอนนี้อยู่ที่นี่";
  white-space: pre;
  position: absolute;
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #007bff;
  pointer-events: none;
}
    .step.completed {
      color: green;
    }
    .step.completed::before {
      content: "✔ ";
      color: green;
    }
  </style>
</head>
<body>
  <div class="step-nav">
    <div class="step current">① ป้อนข้อมูล</div>
    <div class="step">② ยืนยัน</div>
    <div class="step">③ เสร็จสิ้น</div>
  </div>
  <br><br>
  <div style="text-align: center;">
    <button onclick="nextStep()">ถัดไป ▶</button>
  </div>
  <script>
    function nextStep() {
      const steps = document.querySelectorAll(".step-nav .step");
      const current = document.querySelector(".step.current");
      if (!current) return;
      current.classList.remove("current");
      current.classList.add("completed");
      const next = current.nextElementSibling;
      if (next) {
        next.classList.add("current");
      }
    }
  </script>
</body>
</html>

📘 การใช้งานและข้อดีของเทมเพลตนี้

  • เห็นความคืบหน้าได้ชัดเจนใน UI แบบขั้นตอน
  • ผู้ใช้สามารถเข้าใจได้ง่ายว่า "ตอนนี้อยู่ที่ไหน"
  • เหมาะสำหรับฟอร์ม, ขั้นตอนการซื้อ, และแบบสอบถาม
  • ปรับปรุง UX ด้วยลูกศรและการเปลี่ยนสี
  • สามารถควบคุมขั้นตอนด้วย JavaScript (ขยายได้)

🧩 การพัฒนา UI ขั้นตอน: การเชื่อมต่อกับการจัดการสถานะและการควบคุมบล็อก

ในเทมเพลตนี้ การแสดงความคืบหน้าของขั้นตอนอย่างชัดเจนช่วยป้องกันไม่ให้ผู้ใช้สับสนและมีผลในการลดการออกจากกลางคันในฟอร์มหรือขั้นตอนการซื้อ

สำหรับการใช้งานขั้นสูงขึ้นไป สามารถใช้รูปแบบการสลับการแสดง/ซ่อนเนื้อหาของแต่ละขั้นตอนได้ โดยการใช้ `display: none` ของ JavaScript ร่วมด้วย ทำให้สามารถสร้าง UX ที่แสดงเฉพาะฟอร์มของขั้นตอนปัจจุบัน และเนื้อหาจะเปลี่ยนไปเมื่อไปยังขั้นตอนถัดไป

ตัวอย่างเช่น,

  • ขั้นตอนการป้อนข้อมูล: แสดงช่องป้อนข้อมูล
  • ขั้นตอนการยืนยัน: แสดงหน้าจอยืนยันข้อมูลที่ป้อน
  • ขั้นตอนการเสร็จสิ้น: แสดงข้อความเสร็จสิ้น

การซิงโครไนซ์ขั้นตอนกับเนื้อหาเช่นนี้ จะช่วยให้สามารถพัฒนา UI ที่ไดนามิกและเข้าใจง่ายยิ่งขึ้น

นอกจากนี้ หากพิจารณาการทำงานร่วมกับเฟรมเวิร์กอย่าง Vue หรือ React จะทำให้การควบคุมการตรวจสอบความถูกต้องของข้อมูลในแต่ละขั้นตอนและการย้อนกลับทำได้ง่ายขึ้น และยังสามารถนำไปประยุกต์ใช้ในการสร้างSPA (Single Page Application) ที่ใช้งานได้จริงได้อีกด้วย

คุณยังสามารถสร้างแบบฟอร์มติดต่อด้านล่างได้

แบบฟอร์มติดต่อ

1
2
3

ข้อมูลพื้นฐาน



  <div class="unique-step-form-container" style="font-family: Arial, sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; background: #fafafa;">
    <h2 style="text-align: center; color: #333; margin-bottom: 25px;">แบบฟอร์มติดต่อสอบถาม</h2>
    
    <div class="unique-step-indicator" style="display: flex; justify-content: center; margin-bottom: 25px;">
        <div class="unique-step-circle active" data-unique-step="1" style="width: 30px; height: 30px; border-radius: 50%; background-color: #4CAF50; color: white; display: flex; align-items: center; justify-content: center; margin: 0 10px;">1</div>
        <div class="unique-step-circle" data-unique-step="2" style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center; margin: 0 10px;">2</div>
        <div class="unique-step-circle" data-unique-step="3" style="width: 30px; height: 30px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center; margin: 0 10px;">3</div>
    </div>
    
    <div class="unique-step-container" style="position: relative; min-height: 300px;">
        <!-- ขั้นตอนที่ 1: ข้อมูลพื้นฐาน -->
        <div class="unique-step active" id="unique-step1" style="display: block; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; animation: uniqueFadeIn 0.5s;">
            <h3 style="margin-top: 0; color: #444;">ข้อมูลพื้นฐาน</h3>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-name" style="display: block; margin-bottom: 5px; font-weight: bold;">ชื่อ</label>
                <input type="text" id="unique-name" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-email" style="display: block; margin-bottom: 5px; font-weight: bold;">อีเมล</label>
                <input type="email" id="unique-email" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div class="unique-btn-group" style="margin-top: 20px; display: flex; justify-content: space-between;">
                <button disabled class="unique-btn-prev" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #f0f0f0; color: #999;">ย้อนกลับ</button>
                <button class="unique-btn-next" onclick="uniqueNextStep(1)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #4CAF50; color: white;">ถัดไป</button>
            </div>
        </div>
        
        <!-- ขั้นตอนที่ 2: ข้อมูลรายละเอียด -->
        <div class="unique-step" id="unique-step2" style="display: none; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
            <h3 style="margin-top: 0; color: #444;">ข้อมูลรายละเอียด</h3>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-subject" style="display: block; margin-bottom: 5px; font-weight: bold;">หัวข้อ</label>
                <input type="text" id="unique-subject" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <div class="unique-form-group" style="margin-bottom: 15px;">
                <label for="unique-message" style="display: block; margin-bottom: 5px; font-weight: bold;">ข้อความ</label>
                <textarea id="unique-message" rows="5" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"></textarea>
            </div>
            <div class="unique-btn-group" style="margin-top: 20px; display: flex; justify-content: space-between;">
                <button class="unique-btn-prev" onclick="uniquePrevStep(2)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #f0f0f0;">ย้อนกลับ</button>
                <button class="unique-btn-next" onclick="uniqueNextStep(2)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #4CAF50; color: white;">ถัดไป</button>
            </div>
        </div>
        
        <!-- ขั้นตอนที่ 3: ตรวจสอบ -->
        <div class="unique-step" id="unique-step3" style="display: none; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9;">
            <h3 style="margin-top: 0; color: #444;">ตรวจสอบ</h3>
            <div id="unique-confirmation-content" style="margin-bottom: 20px;">
                <!-- เนื้อหาการตรวจสอบจะแสดงที่นี่โดยไดนามิก -->
            </div>
            <div class="unique-btn-group" style="margin-top: 20px; display: flex; justify-content: space-between;">
                <button class="unique-btn-prev" onclick="uniquePrevStep(3)" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #f0f0f0;">ย้อนกลับ</button>
                <button class="unique-btn-next" onclick="uniqueSubmitForm()" style="padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; background-color: #4CAF50; color: white;">ส่ง</button>
            </div>
        </div>
        
        <!-- ขั้นตอนที่ 4: เสร็จสิ้น -->
        <div class="unique-step" id="unique-step4" style="display: none; padding: 20px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; text-align: center;">
            <h3 style="margin-top: 0; color: #444;">ส่งเรียบร้อยแล้ว</h3>
            <p style="color: #4CAF50; font-weight: bold;">ขอบคุณสำหรับการติดต่อสอบถาม</p>
            <p>เราจะตอบกลับภายใน 3 วันทำการ</p>
        </div>
    </div>
</div>>

<script>
// จำกัดขอบเขตด้วย Immediately Invoked Function Expression
(function() {
  let uniqueCurrentStep = 1;
  const uniqueTotalSteps = 4;

  window.uniqueNextStep = function(step) {
    if (step === 1) {
      const name = document.getElementById('unique-name').value;
      const email = document.getElementById('unique-email').value;
      if (!name || !email) {
        alert('กรุณากรอกข้อมูลที่จำเป็น');
        return;
      }
    } else if (step === 2) {
      const subject = document.getElementById('unique-subject').value;
      const message = document.getElementById('unique-message').value;
      if (!subject || !message) {
        alert('กรุณากรอกข้อมูลที่จำเป็น');
        return;
      }
    }

    if (step === 2) {
      uniqueUpdateConfirmation();
    }

    document.getElementById(`unique-step${step}`).style.display = 'none';
    document.getElementById(`unique-step${step+1}`).style.display = 'block';
    document.getElementById(`unique-step${step+1}`).style.animation = 'uniqueFadeIn 0.5s';

    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.backgroundColor = '#ddd';
    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.color = '#333';
    document.querySelector(`.unique-step-circle[data-unique-step="${step+1}"]`).style.backgroundColor = '#4CAF50';
    document.querySelector(`.unique-step-circle[data-unique-step="${step+1}"]`).style.color = 'white';

    uniqueCurrentStep = step + 1;
  };

  window.uniquePrevStep = function(step) {
    document.getElementById(`unique-step${step}`).style.display = 'none';
    document.getElementById(`unique-step${step-1}`).style.display = 'block';
    document.getElementById(`unique-step${step-1}`).style.animation = 'uniqueFadeIn 0.5s';

    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.backgroundColor = '#ddd';
    document.querySelector(`.unique-step-circle[data-unique-step="${step}"]`).style.color = '#333';
    document.querySelector(`.unique-step-circle[data-unique-step="${step-1}"]`).style.backgroundColor = '#4CAF50';
    document.querySelector(`.unique-step-circle[data-unique-step="${step-1}"]`).style.color = 'white';

    uniqueCurrentStep = step - 1;
  };

  function uniqueUpdateConfirmation() {
    const name = document.getElementById('unique-name').value;
    const email = document.getElementById('unique-email').value;
    const subject = document.getElementById('unique-subject').value;
    const message = document.getElementById('unique-message').value;

    const content = `
      <div style="margin-bottom: 15px;">
        <h4 style="margin-bottom: 10px; color: #555;">ข้อมูลพื้นฐาน</h4>
        <p style="margin: 5px 0;"><strong>ชื่อ:</strong> ${name}</p>
        <p style="margin: 5px 0;"><strong>อีเมล:</strong> ${email}</p>
      </div>
      <div style="margin-bottom: 15px;">
        <h4 style="margin-bottom: 10px; color: #555;">ข้อมูลรายละเอียด</h4>
        <p style="margin: 5px 0;"><strong>หัวข้อ:</strong> ${subject}</p>
        <p style="margin: 5px 0 10px;"><strong>ข้อความ:</strong></p>
        <div style="background:#fff; padding:10px; border:1px solid #eee; border-radius:4px; margin-bottom: 15px;">${message.replace(/\n/g, '<br>')}</div>
      </div>
      <p style="margin-top:20px; color:#666; font-size: 0.9em;">โปรดตรวจสอบข้อมูลก่อนกดส่ง</p>
    `;

    document.getElementById('unique-confirmation-content').innerHTML = content;
  }

  window.uniqueSubmitForm = function() {
    document.getElementById('unique-step3').style.display = 'none';
    document.getElementById('unique-step4').style.display = 'block';
    document.getElementById('unique-step4').style.animation = 'uniqueFadeIn 0.5s';

    document.querySelector(`.unique-step-circle[data-unique-step="3"]`).style.backgroundColor = '#ddd';
    document.querySelector(`.unique-step-circle[data-unique-step="4"]`).style.backgroundColor = '#4CAF50';
    document.querySelector(`.unique-step-circle[data-unique-step="4"]`).style.color = 'white';

    uniqueCurrentStep = 4;
  }

  const style = document.createElement('style');
  style.textContent = '@keyframes uniqueFadeIn {from { opacity: 0; } to { opacity: 1; }}';
  document.head.appendChild(style);
})();
</script>
</section>