أقسام الوصول السريع (مربع البحث)

برمجة8 تطبيقات8 شرح12 html8
📁 آخر الأخبار
0

مثال : كيفية تصميم موقع يحتوي على مربع لإدخال النص وزر إدخال HTML الدرس#4

kroom87 kroom87

 تصميم موقع يحتوي على عناصر تفاعلية مثل مربع إدخال النص وزر إدخال يمكن أن يكون بسيطًا جدًا باستخدام لغة HTML فقط. في هذا المقال، سنتعلم كيفية إنشاء صفحة ويب بسيطة تحتوي على مربع نص وزر إدخال، دون استخدام أي تنسيقات CSS.



المتطلبات الأساسية

للبدء، ستحتاج إلى:

  • محرر نصوص (مثل Notepad أو Visual Studio Code).
  • متصفح ويب (مثل Google Chrome أو Firefox).

إنشاء هيكل صفحة HTML

أول خطوة هي إنشاء هيكل أساسي لصفحة HTML. هذا الهيكل سيحتوي على العناصر الأساسية التي سنحتاجها.

كود
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة تحتوي على مربع نص وزر إدخال</title>
</head>
<body>
    <h1>إدخال نص أو رموز</h1>
    <form action="#" method="post">
        <label for="inputBox">أدخل نصًا أو رموزًا:</label>
        <input type="text" id="inputBox" name="inputBox">
        <input type="submit" value="إرسال">
    </form>
</body>
</html>.

شرح الكود

الهيكل الأساسي

كود
<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة تحتوي على مربع نص وزر إدخال</title>
</head>
<body>.
  • <!DOCTYPE html>: يحدد نوع المستند كـ HTML5.
  • <html lang="ar">: يحدد لغة المستند كالعربية.
  • <head>: يحتوي على بيانات تعريفية مثل الترميز، العنوان، وإعدادات العرض.
  • <meta charset="UTF-8">: يحدد مجموعة الأحرف المستخدمة كـ UTF-8 لضمان عرض النصوص بشكل صحيح.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: يضمن أن عرض الصفحة يتناسب مع عرض الجهاز المستخدم لعرضها.
  • <title>: يحدد عنوان الصفحة الذي يظهر في شريط العنوان للمتصفح.

الجسم (Body)

كود
<body>
    <h1>إدخال نص أو رموز</h1>
    <form action="#" method="post">
        <label for="inputBox">أدخل نصًا أو رموزًا:</label>
        <input type="text" id="inputBox" name="inputBox">
        <input type="submit" value="إرسال">
    </form>
</body>
</html>
  • <body>: يحتوي على المحتوى الفعلي للصفحة الذي يظهر للمستخدمين.
  • <h1>: يحدد عنوانًا رئيسيًا.
  • <form>: يحدد نموذجًا لجمع بيانات المستخدم. السمة action تحدد وجهة إرسال البيانات (في هذا المثال، لا يتم إرسال البيانات إلى أي مكان محدد، لذا نستخدم # كعنصر نائب). السمة method="post" تحدد طريقة الإرسال.
  • <label>: يربط تسمية بمربع النص باستخدام السمة for ومعرف id لمربع النص.
  • <input type="text" id="inputBox" name="inputBox">: يحدد مربع نص لإدخال النص أو الرموز. السمة type="text" تحدد نوع الإدخال كنص. السمة id تربط مربع النص بالتسمية، والسمة name تحدد اسم العنصر لإرساله مع النموذج.
  • <input type="submit" value="إرسال">: يحدد زر إدخال لتقديم النموذج. السمة type="submit" تحدد نوع العنصر كزر تقديم، والسمة value تحدد النص الظاهر على الزر.
هذه شكل الصفحة بعد تطبيق الكود 



خاتمة

بإنشاء هذا الهيكل البسيط، يمكنك الآن تصميم صفحة تحتوي على مربع نص وزر إدخال باستخدام HTML فقط. هذا هو الأساس لإنشاء نماذج على الويب، ويمكنك توسيع هذا المثال لإضافة المزيد من عناصر الإدخال والتفاعلات.

إذا كنت ترغب في تنسيق الصفحة بشكل أفضل، يمكنك فيما بعد إضافة CSS لتنسيق العناصر وجعل الصفحة أكثر جاذبية. لكن الآن، أنت تعرف الأساسيات لكيفية إنشاء عناصر إدخال تفاعلية باستخدام HTML فقط.

kroom87
kroom87

مقالات قد تهمك

تعليقات