لماذا لا يعمل هذا الزر في HTML رغم إرفاق حدث له عن طريق الجافاسكربت ؟

لن يعمل هذا الزر لأن الحدث الإفتراضي المسند إليه هو تقديم النموذج form submission ، أي إرسال البيانات المدخلة في الحقول ما بين وسم فتح form ووسم إغلاقه إلى نقطة الوصول الموضحة في الخاصية action الخاصة بالعنصر form . وفي حالة عدم تعريف هاته الخاصية سيتم إسناد القيمة "" لها مما يشير إلى نفس الصفحة . 

وبالتالي فإن أي إسناد لأي حدث اخر لن يتم إعتباره , وببساطة : لن يعمل الزر وسيكون الضغط عليه إرسالا للبيانات في نفس الصفحة . 

أفهم من طريقتك في كتابة الشيفرة أنك تحاول الذهاب إلى صفحة البحث search.html عند ضغطك للزر الكائن داخل النموذج . 

المكان الصحيح لتعريف هاته العلاقة هو بإستعمال الخاصية action لوسم النموذج form ، أين يتم إرفاق رابط الصفحة المستهدفة: 

<form action="search.html" class="d-flex my-2">
     <input class="form-control me-sm-2" type="search" placeholder="Search">
     <button class="btn btn-success" type="submit">click</button>
</form>

تعرف أكثر على العنصر form > الخاصيات .

يمكنك استخدام input type button وسيعمل معك دون مشاكل وسيلبي حاجتك في هذه الحالة 

   <form>
      <input type="search" placeholder="Search" />

      <input type="button" onclick="location.href='search.html';" value="Go to Search" />
    </form>

كما اذا أردت زر لاطلاق ال form يمكنك اضافة button type submit  لذلك

  <form >
      <input  type="search" placeholder="Search" />

      <input type="button" onclick="location.href='search.html';" value="Go to Search" />

      <button class="btn btn-success" type="submit">submit</button>
    </form>

في هذه الحالة سيكون لديك زر التوجيه للصفحة search.html وزر اطلاق لل form