HTML

كيفية عمل شريط بحث في Html

جدول المحتويات

استخدام Html و CSS

إذا أردنا إنشاء شريط البحث باستخدام Html و CSS الداخلي ، فعلينا اتباع الخطوات الموضحة أدناه. باستخدام هذه الخطوات ، يمكننا بسهولة عرض شريط البحث على صفحة الويب في المتصفح:
الخطوة 1: أولاً ، يتعين علينا كتابة كود Html في أي محرر نصوص أو فتح ملف Html الحالي في محرر النصوص الذي نريد استخدام كود CSS و Html فيه لإنشاء شريط بحث

  1. <!Doctype Html>
  2. <Html>
  3. <Head>
  4. <Title>
  5. Make a Search Bar using Html and CSS
  6. <Title/>
  7. <Head/>
  8. <Body>
  9. <Hello User!….   <br
  10. <Html Tutorial   <br
  11. <This page helps us to understand how to make a search bar .  <br
  12. <Body/>
  13. <Html/>

الخطوة 2: الآن ، يتعين علينا وضع المؤشر في تلك المرحلة في علامة body حيث نريد إنشاء شريط بحث. و، ثم اكتب <form> العلامة عند تلك النقطة.

الخطوة 3: الآن، لدينا لاستخدام<input> مع نوع السمة. ثم ضع قيمة النص في سمة النوع. و، ثم اكتب نائب و اسم السمات في <input> العلامة.

  1. <form>
  2. <input type=“text” placeholder=” Search….” name=“search”>

الخطوة 4: الآن ، يتعين علينا استخدام علامة الزر مع سمة النوع . ثم ضع قيمة الإرسال في سمة النوع. ثم يتعين علينا إغلاق العلامة <button/> . وفي النهاية علينا إغلاق علامة <form/> .

  1. <form>
  2. <input type=“text” placeholder=” Search….” name=“search”>
  3. <button type=“submit”>Submit</button>
  4. <form/> 

    الخطوة 5: وبعد ذلك ، يتعين علينا استخدام الكود التالي لـ CSS بين بدء وإغلاق علامة <head>. 

  5. <style>
  6. .searchbox {
  7. float: left;
  8. }
  9. input[type=text] {
  10. padding: 6px;
  11. margin-top: 8px;
  12. font-size: 17px;
  13. border: none;
  14. }
  15. .searchbox button {
  16.  
  17. padding: 8px;
  18. margin-top: 10px;
  19. margin-left: 10px;
  20. background: orange;
  21. font-size: 20px;
  22. border: none;
  23. cursor: pointer;
  24. }
  25. .searchbox button:hover {
  26. background: blue;
  27. }
  28. </style> الخطوة 6: أخيرًا ، يتعين علينا حفظ ملف Html ثم تشغيل الملف في المتصفح.
 
 
<!Doctype Html> <Html> <Head> <Title> Make a Search Bar using Html and CSS </Title> <style> .searchbox { float: left; } input[type=text] { padding: 6px; margin-top: 8px; font-size: 17px; border: none; } .searchbox button { padding: 8px; margin-top: 10px; margin-left: 10px; background: orange; font-size: 20px; border: none; cursor: pointer; } .searchbox button:hover { background: blue; } </style> </Head> <Body> Hello User!.... <br> Html Tutorial <br> This page helps us to understand how to make a search bar . <br> <div class="searchbox"> <form> <input type="text" placeholder=" Search...." name="search"> <button type="submit">Submit</button> </form> </div> </Body> </Html>
Code language: HTML, XML (xml)

اظهر المزيد
زر الذهاب إلى الأعلى

أنت تستخدم إضافة Adblock

الاعلانات هي مصدرنا الوحيد لدفع التكلفة التشغيلية لهذا المشروع الريادي يرجى الغاء تفعيل حاجب الأعلانات