📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
نوع: محتوى تعليمي
<body>
<form action="http://www.myhttpserver.eu/comments.php">
<p>
اسم المستخدم
<input type="text" name="username">
</p>
<p>
كلمة المرور
<input type="password" name="password">
</p>
</form>
</body>
نوع: محتوى تعليمي
This is an example of a form with text and password input fields. The code snippet shows the HTML structure for creating these input elements within a form. The browser renders these as input boxes where users can type their username and password.
نوع: محتوى تعليمي
<form action="http://www.myhttpserver.eu/comments.php">
<label for="username">اسم المستخدم:</label><br>
<input type="text" name="username"><br>
<label for="email">البريد الإلكتروني:</label><br>
<input type="email" name="email"><br>
<label for="gender">الجنس:</label><br>
<input type="radio" name="male">
<label for="male">ذكر</label><br>
<input type="radio" name="female">
<label for="female">أنثى</label><br>
<input type="submit" value="إرسال">
</form>
نوع: محتوى تعليمي
This example demonstrates a more complex form including labels, text input, email input, radio buttons for gender selection, and a submit button. The use of `<label>` tags improves accessibility by associating text with form controls. Radio buttons allow for a single selection from a group.
نوع: METADATA
Ministry of Education
2025 - 1447
🔍 عناصر مرئية
Examples
A browser window showing a form with fields for 'اسم المستخدم' (username) and 'كلمة المرور' (password). The password field is masked with dots. The input type for password is shown in an orange box above.
Examples
A browser window displaying a form with fields for 'اسم المستخدم' (username), 'البريد الإلكتروني' (email), 'الجنس' (gender) with radio buttons for 'ذكر' (male) and 'أنثى' (female), and an 'إرسال' (submit) button. The input type for radio is shown in an orange box above.
📄 النص الكامل للصفحة
<body>
<form action="http://www.myhttpserver.eu/comments.php">
<p>
اسم المستخدم
<input type="text" name="username">
</p>
<p>
كلمة المرور
<input type="password" name="password">
</p>
</form>
</body>
This is an example of a form with text and password input fields. The code snippet shows the HTML structure for creating these input elements within a form. The browser renders these as input boxes where users can type their username and password.
<form action="http://www.myhttpserver.eu/comments.php">
<label for="username">اسم المستخدم:</label><br>
<input type="text" name="username"><br>
<label for="email">البريد الإلكتروني:</label><br>
<input type="email" name="email"><br>
<label for="gender">الجنس:</label><br>
<input type="radio" name="male">
<label for="male">ذكر</label><br>
<input type="radio" name="female">
<label for="female">أنثى</label><br>
<input type="submit" value="إرسال">
</form>
This example demonstrates a more complex form including labels, text input, email input, radio buttons for gender selection, and a submit button. The use of `<label>` tags improves accessibility by associating text with form controls. Radio buttons allow for a single selection from a group.
Ministry of Education
2025 - 1447
--- VISUAL CONTEXT ---
**FIGURE**: Examples
Description: A browser window showing a form with fields for 'اسم المستخدم' (username) and 'كلمة المرور' (password). The password field is masked with dots. The input type for password is shown in an orange box above.
Context: Illustrates the visual output of HTML code for text and password input fields.
**FIGURE**: Examples
Description: A browser window displaying a form with fields for 'اسم المستخدم' (username), 'البريد الإلكتروني' (email), 'الجنس' (gender) with radio buttons for 'ذكر' (male) and 'أنثى' (female), and an 'إرسال' (submit) button. The input type for radio is shown in an orange box above.
Context: Demonstrates the visual representation of various HTML input types including text, email, radio buttons, and submit buttons.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 4 بطاقة لهذه الصفحة
أي من أنواع حقول الإدخال (input types) التالية يُستخدم للسماح للمستخدم باختيار خيار واحد فقط من مجموعة خيارات؟
- أ) checkbox
- ب) text
- ج) radio
- د) select
الإجابة الصحيحة: c
الإجابة: radio
الشرح: 1. في HTML، يُستخدم نوع الإدخال `radio` لعناصر الاختيار من متعدد حيث يمكن تحديد خيار واحد فقط. 2. يجب أن تحمل جميع أزرار الراديو في المجموعة نفس القيمة لخاصية `name` لضمان أن تحديد أحدها يلغي تحديد الآخر. 3. هذا النوع مثالي لاختيارات مثل الجنس (ذكر/أنثى) أو التصنيف حيث يكون الاختيار حصرياً.
تلميح: يظهر هذا النوع عادة كدوائر صغيرة يمكن تحديد إحداها.
التصنيف: مفهوم جوهري | المستوى: متوسط
ما هي الخاصية في الوسم `<form>` التي تحدد عنوان URL الذي سيتم إرسال بيانات النموذج إليه؟
- أ) method
- ب) target
- ج) href
- د) action
الإجابة الصحيحة: d
الإجابة: action
الشرح: 1. الوسم `<form>` في HTML يُستخدم لإنشاء نموذج لجمع بيانات المستخدم. 2. الخاصية `action` هي خاصية إلزامية تقريباً تحدد عنوان URL (مثل صفحة PHP أو ملف معالجة) الذي سيتلقى بيانات النموذج عند إرساله. 3. مثال: `<form action="http://www.example.com/process.php">` يعني أن البيانات ستُرسل إلى الملف `process.php` على الخادم المحدد.
تلميح: هذه الخاصية تحدد وجهة البيانات بعد ضغط زر الإرسال.
التصنيف: تعريف | المستوى: سهل
ما هو نوع حقل الإدخال (input type) المستخدم في HTML لجعل النص المدخل يظهر كنقاط أو نجوم لإخفاء كلمة المرور؟
- أ) text
- ب) hidden
- ج) password
- د) secret
الإجابة الصحيحة: c
الإجابة: password
الشرح: 1. في HTML، تُحدد خاصية `type` داخل الوسم `<input>` نوع حقل الإدخال. 2. القيمة `password` تجعل المتصفح يعرض النص المدخل على شكل رموز (مثل النقاط أو النجوم) لإخفاء المحتوى. 3. هذا يزيد من الأمان عند إدخال معلومات حساسة مثل كلمات المرور.
تلميح: يستخدم هذا النوع للحقول الحساسة التي يجب إخفاء محتواها أثناء الكتابة.
التصنيف: تعريف | المستوى: سهل
ما هي وظيفة الوسم `<label>` في نماذج HTML؟
- أ) تغيير لون وخلفية حقل الإدخال.
- ب) ربط النص التوضيحي بعنصر تحكم في النموذج لتحسين إمكانية الوصول.
- ج) إضافة صورة رمزية بجانب حقل الإدخال.
- د) تحديد القيمة الافتراضية التي تظهر داخل حقل الإدخال.
الإجابة الصحيحة: b
الإجابة: ربط النص التوضيحي بعنصر تحكم في النموذج لتحسين إمكانية الوصول.
الشرح: 1. الوسم `<label>` في HTML يُستخدم لتقديم تسمية نصية لعنصر تحكم في النموذج مثل `<input>`. 2. تربط الخاصية `for` في الوسم `<label>` بالخاصية `id` في الوسم `<input>`. 3. هذا الربط يحسن إمكانية الوصول (Accessibility) حيث يمكن للنقر على النص تحديد حقل الإدخال، ويساعد قارئات الشاشة على وصف الحقل للمستخدم.
تلميح: يساعد هذا الوسم المستخدمين الذين يعتمدون على قارئات الشاشة.
التصنيف: مفهوم جوهري | المستوى: متوسط