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

ملخص المحتوى:

تتضمن هذه الصفحة تمريناً برمجياً يتطلب كتابة مقطع برمجي باستخدام وسم `` لإنشاء حقل نصي متعدد الأسطر، ثم عرض النتيجة.</p><p><strong>المقطع البرمجي المطلوب كتابته:</strong></p><p>```html</p> <p><form action="http://www.myhttpserver.eu/comments.php"></p> <p><fieldset></p> <legend>أرسل لنا رسالة </legend> <label for="name">الاسم:</label><br> <p><input type="text" name="name"><br></p> <label for="email">البريد الإلكتروني :</label><br> <p><input type="email" name="email"><br></p> <label for="message">رسالتك</label><br> <p><textarea placeholder=" اكتب رسالتك ...">

```

الشرح:

يبدأ النموذج (`

`) بإرسال البيانات إلى عنوان URL المحدد (`http://www.myhttpserver.eu/comments.php`).

يتم تجميع حقول النموذج داخل مجموعة (`

`) بعنوان (`

`) يقول "أرسل لنا رسالة".

يحتوي النموذج على الحقول التالية:

* حقل نصي (``) لإدخال الاسم.

* حقل بريد إلكتروني (``) لإدخال العنوان الإلكتروني.

* حقل نصي متعدد الأسطر (``) لإدخال نص الرسالة، مع وجود نص تلميحي (`placeholder`) داخل الحقل.</p> <li> ينتهي النموذج بزر إرسال (`<input type="submit">`).</li> <li> تم استخدام الوسم `<textarea>` لإنشاء الحقل النصي متعدد الأسطر كما هو مطلوب في التمرين.</li></div> </section> <section><h2>📋 المحتوى المنظم</h2><h3>📖 محتوى تعليمي مفصّل</h3> <p><em>نوع: محتوى تعليمي</em></p> <div style="white-space:pre-wrap;">لكتب المقطع البرمجي التالي بإضافة وسم <textarea> لإنشاء حقل نصي متعدد الأسطر. شاهد النتيجة.</div> <p><em>نوع: محتوى تعليمي</em></p> <div style="white-space:pre-wrap;"><form action="http://www.myhttpserver.eu/comments.php"> <fieldset> <legend>أرسل لنا رسالة</legend> <label for="name">الاسم:</label><br> <input type="text" name="name"><br> <label for="email">البريد الإلكتروني:</label><br> <input type="email" name="email"><br> <label for="message">رسالتك:</label><br> <textarea placeholder="اكتب رسالتك..."></textarea><br> <input type="submit" value="إرسال"> </fieldset> </form></div> <h4>جرب بنفسك</h4> <p><em>نوع: محتوى تعليمي</em></p> <div style="white-space:pre-wrap;">جرب بنفسك</div></section> <section> <h2>📄 النص الكامل للصفحة</h2> <div style="white-space:pre-wrap;direction:rtl;unicode-bidi:plaintext;">لكتب المقطع البرمجي التالي بإضافة وسم <textarea> لإنشاء حقل نصي متعدد الأسطر. شاهد النتيجة. <form action="http://www.myhttpserver.eu/comments.php"> <fieldset> <legend>أرسل لنا رسالة</legend> <label for="name">الاسم:</label><br> <input type="text" name="name"><br> <label for="email">البريد الإلكتروني:</label><br> <input type="email" name="email"><br> <label for="message">رسالتك:</label><br> <textarea placeholder="اكتب رسالتك..."></textarea><br> <input type="submit" value="إرسال"> </fieldset> </form> --- SECTION: جرب بنفسك --- جرب بنفسك</div> </section> <section> <h2>🎴 بطاقات تعليمية للمراجعة</h2> <p>عدد البطاقات: 3 بطاقة لهذه الصفحة</p> <article><h3>ما هو الغرض الأساسي من استخدام وسم <textarea> في نماذج HTML؟</h3><ul><li>أ) إنشاء حقل لإدخال عنوان البريد الإلكتروني.</li><li>ب) إنشاء حقل نصي متعدد الأسطر يسمح للمستخدم بإدخال نصوص طويلة.</li><li>ج) إنشاء زر لإرسال النموذج.</li><li>د) تحديد عنوان النموذج أو عنوان القسم.</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> إنشاء حقل نصي متعدد الأسطر يسمح للمستخدم بإدخال نصوص طويلة.</p><p><strong>الشرح:</strong> 1. وسم <textarea> هو عنصر HTML يستخدم داخل النماذج (forms). 2. وظيفته الأساسية هي توفير مساحة نصية متعددة الأسطر. 3. يختلف عن <input type="text"> الذي يكون لسطر واحد فقط. 4. يستخدم عادةً لحقول مثل التعليقات، الرسائل، أو الوصف. 5. يمكن تحديد حجمه باستخدام سمة rows و cols أو CSS.</p><p><strong>تلميح:</strong> فكر في نوع المحتوى الذي يحتاج مساحة أكبر من سطر واحد لإدخاله.</p><p><em>التصنيف: مفهوم جوهري | المستوى: سهل</em></p></article> <article><h3>أي من الخصائص التالية يمكن استخدامها مع وسم <textarea> لتوفير نص تلميح (placeholder) يظهر داخل الحقل؟</h3><ul><li>أ) الخاصية title</li><li>ب) الخاصية value</li><li>ج) الخاصية placeholder</li><li>د) الخاصية hint</li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> الخاصية placeholder</p><p><strong>الشرح:</strong> 1. الخاصية placeholder هي سمة HTML تُستخدم مع عناصر الإدخال مثل <input> و <textarea>. 2. وظيفتها هي عرض نص تلميح داخل الحقل يصف النوع المطلوب من البيانات. 3. يختفي هذا النص تلقائياً عندما يبدأ المستخدم بالكتابة في الحقل. 4. في المثال المذكور، تم استخدامها كالتالي: placeholder="اكتب رسالتك...". 5. تساعد هذه الخاصية في تحسين تجربة المستخدم وتوجيهه.</p><p><strong>تلميح:</strong> هذه الخاصية توفر نصاً يختفي عند بدء المستخدم بالكتابة.</p><p><em>التصنيف: صيغة/خطوات | المستوى: متوسط</em></p></article> <article><h3>في سياق بناء نموذج HTML، ما هو الفرق الرئيسي بين عنصر <input type="text"> وعنصر <textarea>؟</h3><ul><li>أ) <input type="text"> للمعلومات السرية، بينما <textarea> للمعلومات العامة.</li><li>ب) <input type="text"> لحقل نصي من سطر واحد، بينما <textarea> لحقل نصي متعدد الأسطر.</li><li>ج) <input type="text"> يدعم الأرقام فقط، بينما <textarea> يدعم النصوص فقط.</li><li>د) <input type="text"> لا يحتاج إلى اسم (name)، بينما <textarea> يحتاج.</li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> <input type="text"> لحقل نصي من سطر واحد، بينما <textarea> لحقل نصي متعدد الأسطر.</p><p><strong>الشرح:</strong> 1. عنصر <input type="text">: - يُستخدم لإدخال بيانات نصية قصيرة في سطر واحد. - أمثلة: الاسم، كلمة المرور، البحث. - حجمه ثابت ولا يمكن للمستخدم تغيير عدد الأسطر. 2. عنصر <textarea>: - يُستخدم لإدخال بيانات نصية طويلة عبر عدة أسطر. - أمثلة: الرسائل، التعليقات، الوصف. - يمكن للمستخدم توسيع منطقة الكتابة رأسيًا. 3. الاختلاف الأساسي هو في عدد الأسطر المدعومة.</p><p><strong>تلميح:</strong> ركز على قدرة كل عنصر على استيعاب عدد الأسطر.</p><p><em>التصنيف: فرق بين مفهومين | المستوى: متوسط</em></p></article> </section> </main> <nav aria-label="صفحات الكتاب"> <a href="https://www.idros.ai/reader/digitalskills10-1?page=193">الصفحة السابقة</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=195">الصفحة التالية</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=191">صفحة 191</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=192">صفحة 192</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=193">صفحة 193</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=195">صفحة 195</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=196">صفحة 196</a> | <a href="https://www.idros.ai/reader/digitalskills10-1?page=197">صفحة 197</a> <a href="https://www.idros.ai/reader/library">العودة إلى المكتبة</a> </nav> <footer> <p>إدرس AI - مدرس ذكاء اصطناعي مجاني للمناهج السعودية | وزارة التعليم</p> </footer> </body> </html><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9f74de604992a0d6',t:'MTc3ODAzNzgzMQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>