React experimental_useFormStatus Real-Time Engine: การติดตามฟอร์มแบบสด

เว็บยุคใหม่ต้องการอินเทอร์เฟซผู้ใช้ที่ตอบสนองและใช้งานง่าย ฟอร์มซึ่งเป็นองค์ประกอบพื้นฐานของเว็บแอปพลิเคชัน จำเป็นต้องได้รับความสนใจเป็นพิเศษในด้านประสบการณ์ผู้ใช้ (UX) Hook experimental_useFormStatus ของ React นำเสนอกลไกที่ทรงพลังสำหรับการให้ข้อเสนอแนะแบบเรียลไทม์ระหว่างการส่งฟอร์ม ซึ่งช่วยปรับปรุงประสบการณ์ผู้ใช้ได้อย่างมาก บทความนี้จะเจาะลึกความสามารถของ API ทดลองนี้ สำรวจกรณีการใช้งาน รายละเอียดการนำไปใช้ และแนวทางปฏิบัติที่ดีที่สุดสำหรับการสร้างฟอร์มที่น่าสนใจและให้ข้อมูลสำหรับผู้ชมทั่วโลก

experimental_useFormStatus คืออะไร?

experimental_useFormStatus คือ React Hook ที่ออกแบบมาเพื่อให้ข้อมูลเกี่ยวกับสถานะของการส่งฟอร์มที่เริ่มต้นโดย React Server Component เป็นส่วนหนึ่งของการสำรวจ Server Actions อย่างต่อเนื่องของ React ซึ่งช่วยให้นักพัฒนาสามารถเรียกใช้ตรรกะฝั่งเซิร์ฟเวอร์ได้โดยตรงจากคอมโพเนนต์ React Hook นี้ให้มุมมองฝั่งไคลเอ็นต์เกี่ยวกับสถานะการประมวลผลฟอร์มของเซิร์ฟเวอร์ ซึ่งช่วยให้นักพัฒนาสามารถสร้างประสบการณ์ฟอร์มที่มีการโต้ตอบและตอบสนองสูง

ก่อนหน้า experimental_useFormStatus การให้การอัปเดตแบบเรียลไทม์เกี่ยวกับการส่งฟอร์มมักจะเกี่ยวข้องกับการจัดการสถานะที่ซับซ้อน การดำเนินการแบบอะซิงโครนัส และการจัดการสถานะการโหลดและข้อผิดพลาดด้วยตนเอง Hook นี้ช่วยให้กระบวนการนี้ง่ายขึ้น โดยนำเสนอวิธีการประกาศและกระชับในการเข้าถึงสถานะการส่งฟอร์ม

ประโยชน์หลักของการใช้ experimental_useFormStatus

• ปรับปรุงประสบการณ์ผู้ใช้: ให้ข้อเสนอแนะแก่ผู้ใช้ทันทีเกี่ยวกับความคืบหน้าของการส่งฟอร์ม ลดความไม่แน่นอนและปรับปรุงความพึงพอใจโดยรวม
• การจัดการข้อผิดพลาดแบบเรียลไทม์: ช่วยให้นักพัฒนาสามารถแสดงข้อความข้อผิดพลาดเฉพาะที่ตรงกับฟิลด์ฟอร์ม ทำให้ผู้ใช้แก้ไขข้อมูลได้ง่ายขึ้น
• การจัดการสถานะที่ง่ายขึ้น: ลดความจำเป็นในการจัดการสถานะด้วยตนเองที่เกี่ยวข้องกับสถานะการส่งฟอร์ม ลดความซับซ้อนของโค้ด
• การเข้าถึงที่เพิ่มขึ้น: ช่วยให้นักพัฒนาสามารถให้เทคโนโลยีช่วยเหลือพร้อมการอัปเดตสถานะฟอร์มแบบเรียลไทม์ ปรับปรุงการเข้าถึงสำหรับผู้ใช้ที่มีความพิการ
• Progressive Enhancement: ฟอร์มยังคงทำงานได้แม้ว่า JavaScript จะถูกปิดใช้งานหรือโหลดไม่สำเร็จ ทำให้มั่นใจได้ถึงฟังก์ชันการทำงานพื้นฐาน

experimental_useFormStatus ทำงานอย่างไร

Hook จะคืนค่าออบเจ็กต์ที่มีคุณสมบัติดังต่อไปนี้:

• pending: ค่าบูลีนที่ระบุว่าการส่งฟอร์มกำลังดำเนินการอยู่หรือไม่
• data: ข้อมูลที่ส่งคืนโดย server action หลังจากส่งฟอร์มสำเร็จ ซึ่งอาจรวมถึงข้อความยืนยัน ข้อมูลที่อัปเดต หรือข้อมูลอื่น ๆ ที่เกี่ยวข้อง
• error: ออบเจ็กต์ข้อผิดพลาดที่มีรายละเอียดเกี่ยวกับข้อผิดพลาดใด ๆ ที่เกิดขึ้นระหว่างการส่งฟอร์ม
• action: ฟังก์ชัน server action ที่ถูกเรียกเมื่อมีการส่งฟอร์ม ซึ่งช่วยให้คุณสามารถเรนเดอร์องค์ประกอบ UI ที่แตกต่างกันตามการดำเนินการเฉพาะที่กำลังดำเนินการอยู่

ตัวอย่างการใช้งานจริงและการนำไปใช้

มาดูตัวอย่างง่าย ๆ ของแบบฟอร์มติดต่อที่ใช้ experimental_useFormStatus:

ตัวอย่าง 1: แบบฟอร์มติดต่อพื้นฐาน

ขั้นแรก กำหนด Server Action เพื่อจัดการการส่งฟอร์ม (วางในไฟล์แยกต่างหาก เช่น `actions.js`):

"use server";

import { revalidatePath } from 'next/cache';

export async function submitContactForm(prevState: any, formData: FormData) {
  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  if (!name || !email || !message) {
    return {
      message: 'กรุณากรอกข้อมูลให้ครบถ้วน',
    };
  }

  // จำลองการดำเนินการฐานข้อมูลหรือการเรียก API
  await new Promise((resolve) => setTimeout(resolve, 2000));

  try {
    // ในแอปพลิเคชันจริง คุณจะส่งข้อมูลไปยังแบ็คเอนด์ของคุณ
    console.log('ข้อมูลฟอร์มที่ส่ง:', { name, email, message });
    // จำลองความสำเร็จ
    revalidatePath('/'); // ตัวเลือก: รีโหลดเส้นทาง root หากจำเป็น
    return { message: 'ขอบคุณสำหรับข้อความของคุณ!' };

  } catch (error: any) {
    console.error('ข้อผิดพลาดในการส่งฟอร์ม:', error);
    return { message: 'ส่งฟอร์มไม่สำเร็จ กรุณาลองอีกครั้งในภายหลัง' };
  }
}

ตอนนี้ ให้ใช้งานคอมโพเนนต์ฟอร์มโดยใช้ experimental_useFormStatus:

'use client';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';
import { submitContactForm } from './actions';

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      

        ชื่อ:
        
      
      

        อีเมล:
        
      
      

        ข้อความ:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'กำลังส่ง...' : 'ส่ง'}
      </button>
      {error && <p className="error">ข้อผิดพลาด: {error.message}</p>}
      {data && data.message && <p className="success">{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
</pre>

<p>ในตัวอย่างนี้:</p>

<ul>
  <li>Hook <code>useFormStatus</code> ถูกเรียกเพื่อเรียกสถานะการส่งฟอร์ม</li>
  <li>คุณสมบัติ <code>pending</code> ใช้สำหรับปิดใช้งานช่องป้อนข้อมูลของฟอร์มและปุ่มส่งในขณะที่ฟอร์มกำลังถูกส่ง ซึ่งป้องกันไม่ให้ผู้ใช้ส่งฟอร์มหลายครั้ง</li>
  <li>คุณสมบัติ <code>error</code> ใช้สำหรับแสดงข้อความข้อผิดพลาดหากการส่งฟอร์มล้มเหลว</li>
  <li>คุณสมบัติ <code>data</code> (โดยเฉพาะ `data.message`) ใช้สำหรับแสดงข้อความความสำเร็จหลังจากที่ฟอร์มถูกส่งสำเร็จ</li>
</ul>

<h3>ตัวอย่าง 2: การแสดงตัวบ่งชี้การโหลด</h3>

<p>คุณสามารถปรับปรุงประสบการณ์ผู้ใช้ให้ดียิ่งขึ้นได้โดยการแสดงตัวบ่งชี้การโหลดระหว่างการส่งฟอร์ม ซึ่งสามารถทำได้โดยใช้ภาพเคลื่อนไหว CSS หรือไลบรารีของบุคคลที่สาม:</p>

<pre>
<code>
'use client';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';
import { submitContactForm } from './actions';

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    <form action={submitContactForm}>
      <div>
        <label htmlFor="name">ชื่อ:</label>
        <input type="text" id="name" name="name" disabled={pending} />
      </div>
      <div>
        <label htmlFor="email">อีเมล:</label>
        <input type="email" id="email" name="email" disabled={pending} />
      </div>
      <div>
        <label htmlFor="message">ข้อความ:</label>
        <textarea id="message" name="message" disabled={pending} />
      </div>
      <button type="submit" disabled={pending}>
        {pending ? (
          <span className="loading">กำลังส่ง...</span>
        ) : (
          'ส่ง'
        )}
      </button>
      {error && <p className="error">ข้อผิดพลาด: {error.message}</p>}
      {data && data.message && <p className="success">{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
</pre>

<p>CSS (เช่น ในไฟล์ CSS แยกต่างหากหรือคอมโพเนนต์ที่จัดรูปแบบ):</p>

<pre>
<code>
.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  border-top-color: #0070f3; /* ตัวอย่างสี */
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</code>
</pre>

<p>ตัวอย่างนี้เพิ่มภาพเคลื่อนไหว CSS อย่างง่ายให้กับปุ่มส่งเมื่อฟอร์มอยู่ในสถานะ <code>pending</code></p>

<h3>ตัวอย่าง 3: การตรวจสอบข้อผิดพลาดแบบอินไลน์</h3>

<p>การให้การตรวจสอบข้อผิดพลาดแบบอินไลน์ช่วยให้ผู้ใช้ระบุและแก้ไขข้อผิดพลาดในข้อมูลที่ป้อนได้ง่ายขึ้น คุณสามารถใช้คุณสมบัติ <code>error</code> เพื่อแสดงข้อความข้อผิดพลาดถัดจากฟิลด์ฟอร์มที่เกี่ยวข้อง</p>

<pre>
<code>
'use client';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';
import { submitContactForm } from './actions';

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  // ข้อผิดพลาดในการตรวจสอบจำลอง (แทนที่ด้วยตรรกะการตรวจสอบจริงของคุณ)
  const validationErrors = {
    name: error?.message?.includes('name') ? 'จำเป็นต้องระบุชื่อ' : null,
    email: error?.message?.includes('email') ? 'ที่อยู่อีเมลไม่ถูกต้อง' : null,
    message: error?.message?.includes('message') ? 'จำเป็นต้องระบุข้อความ' : null,
  };

  return (
    <form action={submitContactForm}>
      <div>
        <label htmlFor="name">ชื่อ:</label>
        <input type="text" id="name" name="name" disabled={pending} />
        {validationErrors.name && <p className="error">{validationErrors.name}</p>}
      </div>
      <div>
        <label htmlFor="email">อีเมล:</label>
        <input type="email" id="email" name="email" disabled={pending} />
        {validationErrors.email && <p className="error">{validationErrors.email}</p>}
      </div>
      <div>
        <label htmlFor="message">ข้อความ:</label>
        <textarea id="message" name="message" disabled={pending} />
        {validationErrors.message && <p className="error">{validationErrors.message}</p>}
      </div>
      <button type="submit" disabled={pending}>
        {pending ? 'กำลังส่ง...' : 'ส่ง'}
      </button>
      {data && data.message && <p className="success">{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
</pre>

<p>ในตัวอย่างนี้ เราจำลองข้อความข้อผิดพลาดที่แตกต่างกันตามข้อผิดพลาดที่ได้รับ การใช้งานจริงจะเกี่ยวข้องกับตรรกะการตรวจสอบที่ซับซ้อนมากขึ้น ซึ่งอาจอยู่ภายใน Server Action เอง ซึ่งจะส่งคืนข้อมูลข้อผิดพลาดที่มีโครงสร้างตามฟิลด์ฟอร์ม ข้อมูลที่มีโครงสร้างนี้ทำให้การจับคู่ข้อผิดพลาดกับช่องป้อนข้อมูลที่ถูกต้องในคอมโพเนนต์ไคลเอ็นต์ง่ายขึ้น</p>

<h2>แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ experimental_useFormStatus</h2>

<ul>
  <li><b>ให้ความสำคัญกับประสบการณ์ผู้ใช้:</b> เป้าหมายหลักของการใช้ <code>experimental_useFormStatus</code> คือการปรับปรุงประสบการณ์ผู้ใช้ มุ่งเน้นไปที่การให้ข้อเสนอแนะที่ชัดเจนและกระชับแก่ผู้ใช้เกี่ยวกับสถานะการส่งฟอร์มของพวกเขา</li>
  <li><b>จัดการข้อผิดพลาดอย่างสวยงาม:</b> ใช้การจัดการข้อผิดพลาดที่แข็งแกร่งเพื่อจัดการข้อผิดพลาดที่ไม่คาดคิดอย่างสวยงาม ให้ข้อความข้อผิดพลาดที่เป็นประโยชน์แก่ผู้ใช้เพื่อแนะนำพวกเขาในการแก้ไขปัญหา</li>
  <li><b>ใช้ตัวบ่งชี้การโหลดที่เหมาะสม:</b> ใช้ตัวบ่งชี้การโหลดเพื่อสื่อสารด้วยภาพว่าฟอร์มกำลังถูกส่ง เลือกตัวบ่งชี้การโหลดที่เหมาะสมกับบริบทและระยะเวลาของกระบวนการส่ง</li>
  <li><b>ปิดใช้งานช่องป้อนข้อมูลของฟอร์มระหว่างการส่ง:</b> ปิดใช้งานช่องป้อนข้อมูลของฟอร์มในขณะที่ฟอร์มกำลังถูกส่งเพื่อป้องกันไม่ให้ผู้ใช้ส่งฟอร์มหลายครั้ง</li>
  <li><b>พิจารณาการเข้าถึง:</b> ตรวจสอบให้แน่ใจว่าฟอร์มของคุณสามารถเข้าถึงได้โดยผู้พิการ จัดหาเทคโนโลยีช่วยเหลือด้วยการอัปเดตสถานะฟอร์มแบบเรียลไทม์โดยใช้คุณสมบัติ ARIA</li>
  <li><b>ใช้การตรวจสอบฝั่งเซิร์ฟเวอร์:</b> ตรวจสอบข้อมูลฟอร์มบนฝั่งเซิร์ฟเวอร์เสมอเพื่อให้มั่นใจในความสมบูรณ์ของข้อมูลและความปลอดภัย</li>
  <li><b>Progressive Enhancement:</b> ตรวจสอบให้แน่ใจว่าฟอร์มของคุณยังคงทำงานได้แม้ว่า JavaScript จะถูกปิดใช้งานหรือโหลดไม่สำเร็จ การส่งฟอร์มพื้นฐานควรทำงานโดยใช้การส่งฟอร์ม HTML มาตรฐานหาก JavaScript ไม่พร้อมใช้งาน</li>
  <li><b>ปรับปรุง Server Actions ให้เหมาะสม:</b> ปรับปรุง Server Actions ของคุณให้ทำงานได้อย่างมีประสิทธิภาพ หลีกเลี่ยงการดำเนินการที่ใช้เวลานานซึ่งอาจบล็อกเธรดหลักและส่งผลกระทบต่อประสิทธิภาพในทางลบ</li>
  <li><b>ใช้ด้วยความระมัดระวัง (Experimental API):</b> โปรดทราบว่า <code>experimental_useFormStatus</code> เป็น API ทดลองและอาจมีการเปลี่ยนแปลงในการเปิดตัว React ในอนาคต ใช้ด้วยความระมัดระวังในสภาพแวดล้อมการผลิต และเตรียมพร้อมที่จะปรับโค้ดของคุณหากจำเป็น</li>
  <li><b>การทำให้เป็นสากลและการแปล (i18n/l10n):</b> สำหรับแอปพลิเคชันทั่วโลก ตรวจสอบให้แน่ใจว่าข้อความทั้งหมด (ความสำเร็จ ข้อผิดพลาด การโหลด) ได้รับการทำให้เป็นสากลและแปลอย่างเหมาะสมเพื่อรองรับภาษาและภูมิภาคต่างๆ</li>
</ul>

<h2>ข้อพิจารณาทั่วโลกและการเข้าถึง</h2>

<p>เมื่อสร้างฟอร์มสำหรับผู้ชมทั่วโลก สิ่งสำคัญคือต้องพิจารณาสิ่งต่อไปนี้:</p>

<ul>
  <li><b>การทำให้เป็นสากล (i18n):</b> ข้อความทั้งหมด รวมถึงป้ายกำกับ ข้อความแสดงข้อผิดพลาด และข้อความแสดงความสำเร็จ ควรได้รับการทำให้เป็นสากลเพื่อรองรับหลายภาษา ใช้ไลบรารีเช่น <code>react-intl</code> หรือ <code>i18next</code> เพื่อจัดการการแปล</li>
  <li><b>การแปล (l10n):</b> รูปแบบสำหรับวันที่ ตัวเลข และสกุลเงินควรได้รับการแปลให้ตรงกับภาษาของผู้ใช้ ใช้ <code>Intl</code> object หรือไลบรารีเช่น <code>date-fns</code> เพื่อจัดรูปแบบข้อมูลอย่างเหมาะสม</li>
  <li><b>เค้าโครงจากขวาไปซ้าย (RTL):</b> ตรวจสอบให้แน่ใจว่าเค้าโครงฟอร์มของคุณจัดการภาษาจากขวาไปซ้ายได้อย่างถูกต้อง เช่น ภาษาอาหรับและฮิบรู ใช้คุณสมบัติเชิงตรรกะของ CSS และเทคนิคเค้าโครงเพื่อสร้างเค้าโครงที่ยืดหยุ่นซึ่งปรับให้เข้ากับทิศทางการเขียนที่แตกต่างกัน</li>
  <li><b>การเข้าถึง (a11y):</b> ปฏิบัติตามแนวทางการเข้าถึงเพื่อให้แน่ใจว่าฟอร์มของคุณใช้งานได้โดยผู้พิการ ใช้องค์ประกอบ HTML เชิงความหมาย จัดหาข้อความทางเลือกสำหรับรูปภาพ และตรวจสอบให้แน่ใจว่าฟอร์มของคุณสามารถเข้าถึงได้ด้วยแป้นพิมพ์ ใช้คุณสมบัติ ARIA เพื่อให้ข้อมูลเพิ่มเติมแก่เทคโนโลยีช่วยเหลือ</li>
  <li><b>การตรวจสอบสำหรับข้อมูลระหว่างประเทศ:</b> เมื่อตรวจสอบข้อมูล เช่น หมายเลขโทรศัพท์ ที่อยู่ และรหัสไปรษณีย์ ให้ใช้ไลบรารีการตรวจสอบที่รองรับรูปแบบระหว่างประเทศ</li>
  <li><b>เขตเวลา:</b> เมื่อรวบรวมวันที่และเวลา ให้คำนึงถึงเขตเวลาและให้ผู้ใช้มีตัวเลือกในการเลือกเขตเวลาที่ต้องการ</li>
</ul>

<h2>บทสรุป</h2>

<p>Hook <code>experimental_useFormStatus</code> ของ React นำเสนอความก้าวหน้าที่สำคัญในการสร้างฟอร์มแบบโต้ตอบและใช้งานง่าย ด้วยการให้ข้อเสนอแนะแบบเรียลไทม์เกี่ยวกับสถานะการส่งฟอร์ม นักพัฒนาสามารถสร้างประสบการณ์ที่น่าสนใจซึ่งช่วยเพิ่มความพึงพอใจของผู้ใช้และลดความคับข้องใจ แม้ว่าปัจจุบันจะเป็น API ทดลอง แต่ศักยภาพในการลดความซับซ้อนของการจัดการสถานะฟอร์มและปรับปรุง UX ทำให้เป็นเครื่องมือที่มีค่าในการสำรวจ อย่าลืมพิจารณาแนวทางปฏิบัติที่ดีที่สุดด้านการเข้าถึงทั่วโลกและการทำให้เป็นสากลเพื่อสร้างฟอร์มที่ครอบคลุมสำหรับผู้ใช้ทั่วโลก ในขณะที่ React ยังคงพัฒนาต่อไป เครื่องมืออย่าง <code>experimental_useFormStatus</code> จะมีความสำคัญเพิ่มขึ้นสำหรับการสร้างเว็บแอปพลิเคชันที่ทันสมัยและตอบสนอง</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">การติดตามฟอร์ม</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Server Components</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">server actions</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">การตรวจสอบฟอร์ม</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UX</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ข้อเสนอแนะแบบเรียลไทม์</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progressive enhancement</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">การพัฒนาเว็บ</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RC("B:1","S:1")</script></body></html>