الجديد في HTML: عنصر search وخاصية dirname

عنصر <search> — معلم دلالي لمنطقة البحث

تذكّر درس HTML الدلالي: تعلّمنا أن <nav> و<aside> و<main> معالم (Landmarks) تفهمها قارئات الشاشة ومحركات البحث تلقائيًا. لكن حتى وقت قريب لم يكن هناك عنصر مخصّص لمنطقة البحث أو التصفية — كان المطوّرون يكتفون بـ <div> عادي، أو يضيفون role="search" يدويًا للحصول على نفس المعنى:

<!-- الطريقة القديمة -->
<div role="search">
  <form action="/search">
    <input type="search" name="q" />
    <button>بحث</button>
  </form>
</div>

<!-- الطريقة الجديدة -->
<search>
  <form action="/search">
    <input type="search" name="q" />
    <button>بحث</button>
  </form>
</search>

<search> يعطي نفس دور search تلقائيًا في شجرة إمكانية الوصول — بلا أي role إضافي، تمامًا كما يعطي <nav> دور navigation مجانًا.

لا يشترط أن يحيط بـ <form> فقط

أي منطقة تصفية أو فرز لنتائج معروضة تصلح أيضًا:

<search aria-label="تصفية المسارات">
  <label>الفئة:
    <select name="category">
      <option>الكل</option>
      <option>لغات البرمجة</option>
    </select>
  </label>
</search>

💡 قد يحتوي موقعك على أكثر من <search> واحد (بحث عام في الرأس + تصفية داخل الصفحة) — استخدم aria-label لتمييز كل واحدة، تمامًا كما تفعل مع أكثر من <nav>.

⚠️ لا تستخدمه كغلاف عام للصفحة أو لعناصر لا علاقة لها بالبحث والتصفية — سيفقد الوسم معناه الدلالي مثل أي إساءة استخدام لـ <nav> أو <main>.

خاصية dirname — إرسال اتجاه النص مع النموذج

موقعنا عربي RTL، لكن حقول الإدخال المفتوحة (تعليق، رسالة تواصل) قد يكتب فيها المستخدم عربيًا أو إنجليزيًا حسب الكلمة. حتى الآن، كان اتجاه ما كتبه المستخدم فعليًا (rtl أو ltr) يضيع عند الإرسال — يصل الخادم النص فقط، بلا معرفة اتجاهه الحقيقي وقت الكتابة.

خاصية dirname تحل هذا: أضفها على <textarea> أو حقل <input> نصّي، وسيرسل المتصفح حقلًا إضافيًا يحمل الاتجاه الفعلي مع بيانات النموذج:

<form action="/comments" method="post">
  <textarea name="comment" dir="auto" dirname="comment.dir"></textarea>
  <button type="submit">إرسال</button>
</form>

عند الإرسال، تصل بيانات مثل:

comment=مرحبا Habibi
comment.dir=rtl

قيمة dirname هنا (comment.dir) هي اسم حقل جديد ينشئه المتصفح تلقائيًا ليحمل الاتجاه — منفصل تمامًا عن name الأصلي للحقل.

أين تعمل؟

dirname مدعومة على <textarea>، وعلى <input> فقط بالأنواع: hidden وtext وsearch وtel وurl وemail وpassword وsubmit وreset وbutton.

🔑 زاوج dirname مع dir="auto" على نفس الحقل: dir="auto" يتكفّل بعرض النص بالاتجاه الصحيح فور الكتابة، وdirname يحفظ ذلك الاتجاه في قاعدة بياناتك لتعرضه بشكل سليم لاحقًا — مفيد جدًا لتعليقات مزدوجة اللغة.

جدول مقارنة سريع

الأخطاء الشائعة

• ❌ توقّع أن dirname يعمل مع كل أنواع input — لا يعمل مثلًا مع number أو date أو checkbox، فقط textarea والأنواع النصية المذكورة أعلاه.
• ❌ الخلط بين قيمة dirname واسم الحقل نفسه — dirname="comment.dir" تنشئ حقلًا إضافيًا باسم comment.dir، ولا تغيّر اسم حقل النص الأصلي المحدَّد في name.
• ❌ تغليف الصفحة كاملة أو عناصر عشوائية بـ <search> — خصّصه لمناطق البحث والتصفية الفعلية فقط، تمامًا كما لا تُغلّف الصفحة بـ <nav>.

خلاصة

<search> معلم دلالي جديد ينضم لعائلة <nav>/<aside>/<main> — يمنح أي منطقة بحث أو تصفية دور search تلقائيًا بلا role يدوي. وخاصية dirname على <textarea> وحقول النص تحل مشكلة قديمة على المواقع ثنائية الاتجاه مثل موقعنا: إرسال اتجاه ما كتبه المستخدم فعليًا مع بيانات النموذج، لا تخمينه لاحقًا.