صفحة 193 - كتاب المهارات الرقمية - الصف 10 - الفصل 1 - المملكة العربية السعودية

ملخص الصفحة:

تتناول هذه الصفحة من كتاب الحاسب الآلي للصف الثاني عشر موضوع النماذج (Forms) في لغة HTML، مع التركيز على بعض الوسوم الخاصة المستخدمة لتحسين تنظيمها وعرضها.

محتوى النموذج الأساسي:

يبدأ المحتوى بعرض كود HTML لنموذج أساسي (`

`) يحتوي على حقلي إدخال: حقل نصي لاسم المستخدم (``) وحقل بريد إلكتروني (``). يحتوي النموذج أيضًا على زر أمر للإرسال (``). السمة `action` في وسم `` تحدد عنوان URL الذي سيتم إرسال بيانات النموذج إليه.

وسم `

` ووسم `

`:

يتم تقديم وسمين مهمين لتحسين تنظيم النماذج:

وسم `

`: يُستخدم لتجميع العناصر ذات الصلة داخل النموذج ضمن إطار مرئي.

وسم `

`

: يُستخدم داخل وسم `

` لتقديم تسمية أو عنوان للمجموعة من الحقول.

يتم عرض مثال تطبيقي يوضح كيفية استخدام هذين الوسمين معًا، حيث يتم وضع حقلي اسم المستخدم والبريد الإلكتروني داخل مجموعة يحمل عنوانها "اتصل بنا".

الوسم ``:

يتم توضيح أن السمة `value` داخل وسم `` هي التي تحدد النص الذي سيظهر على زر الأمر (مثل "إرسال").

الأمثلة المرئية (Visual Elements):

Form Example 1: لقطة شاشة لنموذج ويب بسيط يحتوي على حقول لاسم المستخدم والبريد الإلكتروني وزر إرسال. تظهر رسالة خطأ تشير إلى غياب رمز '@' في عنوان البريد الإلكتروني المدخل، مما يدل على خاصية التحقق من صحة الإدخال في حقل البريد الإلكتروني.

Form Example 2: لقطة شاشة لنموذج ويب مشابه، لكنه مغلف داخل مجموعة (`

`) تحمل عنوان "اتصل بنا" (`

`)، مما يظهر الفرق في الشكل والتنظيم بين النموذجين.

<form action="http://www.myhttpserver.eu/comments.php"> <label for="username">اسم المستخدم</label> <input type="text" name="username"> <label for="email">البريد الإلكتروني</label> <input type="email" name="email"> <input type="submit" value="إرسال"> </form>

تُستخدم سمة القيمة لتحديد النص الذي سيظهر على زر الأمر.

<input type="email">

يُستخدم وسم <fieldset> لتجميع العناصر ذات الصلة في النموذج.

<form action="http://www.myhttpserver.eu/comments.php"> <fieldset> <legend>اتصل بنا</legend> <label for="username">اسم المستخدم</label> <input type="text" name="username"> <label for="email">البريد الإلكتروني</label> <input type="email" name="email"> <input type="submit" value="إرسال"> </fieldset> </form>

يُستخدم وسم <legend> لتسمية مجموعة حقول الإدخال.

البريد الإلكتروني: اسم المستخدم: محمد إرسال

البريد الإلكتروني: إرسال ! Please include an '@' in the email address. 'mohammads.bl_outlook.com' is missing an '@'.

193

وزارة التعليم Ministry of Education 2025 - 1447

<form action="http://www.myhttpserver.eu/comments.php"> <label for="username">اسم المستخدم</label> <input type="text" name="username"> <label for="email">البريد الإلكتروني</label> <input type="email" name="email"> <input type="submit" value="إرسال"> </form> تُستخدم سمة القيمة لتحديد النص الذي سيظهر على زر الأمر. <input type="email"> يُستخدم وسم <fieldset> لتجميع العناصر ذات الصلة في النموذج. <form action="http://www.myhttpserver.eu/comments.php"> <fieldset> <legend>اتصل بنا</legend> <label for="username">اسم المستخدم</label> <input type="text" name="username"> <label for="email">البريد الإلكتروني</label> <input type="email" name="email"> <input type="submit" value="إرسال"> </fieldset> </form> يُستخدم وسم <legend> لتسمية مجموعة حقول الإدخال. البريد الإلكتروني: اسم المستخدم: محمد إرسال البريد الإلكتروني: إرسال ! Please include an '@' in the email address. 'mohammads.bl_outlook.com' is missing an '@'. 193 وزارة التعليم Ministry of Education 2025 - 1447