٥. تصحيح أخطاء Debug نموذج التبرع Donation Form
مختبرأنشأت مؤسسة خيرية محلية "موقعاً إلكترونياً" Website يتضمن "نموذجاً للتبرع" a Donation Form ، ولكن هناك عدة مشكلات تتطلب المعالجة، فالنموذج يفتقر إلى "إمكانية الوصول" Accessibility ويحتوي على بعض الأخطاء في صياغة "كود اتش.تي.ام.ال" HTML syntax .
تتمثل مهمتك في "إصلاح" fix جميع "الأخطاء" errors لضمان عمل "النموذج" the form بشكل صحيح و"إتاحته لجميع المستخدمين" is accessible to all users . أكمل المهام الموضحة في "قصص المستخدم" User Stories أدناه.
كود الموقع
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نموذج التبرع Donation Form</title>
</head>
<body>
<h1>نموذج التبرع</h1>
<form>
الاسم الكامل:
<input type="text" name="name"></input>
عنوان البريد الإلكتروني:
<input type="text" name="email"></input>
مبلغ التبرع ($):
<input type="number" name="amount"></input>
<input type="checkbox" name="newsletter"></input>
إشتراك
<input type="submit" name="Send"></input>
</form>
</body>
</html>
قصص المستخدم User Stories :
١. تُعد عناصر
input"عناصر فارغة" void elements ولا ينبغي أن تحتوي على وسوم إغلاق، لذا قم بإزالة جميع وسوم الإغلاق</input>من النموذج.٢. أضف عناصر تسمية
labelلكل حقل إدخال في النموذج ليعرف المستخدمون الغرض من كل حقل. يجب أن يطابق "نص التسمية" The label text النص الموجود حالياً بجوار كل "حقل إدخال" Input .٣.
عنوان البريد الإلكتروني:يجب أن يكون نوع حقل الإدخالemailبدلاً منtext.٤. يجب عليك ربط كل عنصر
labelبعنصرinputالمقابل له باستخدام السمةforفي عنصرlabelوالسمةidالمطابقة لها في عنصرinput.٥. أضف السمة
requiredإلى حقول إدخال "النصوص" text و"البريد الإلكتروني" email و"الأرقام" number (وليس إلى خانة الاختيار أو زر الإرسال) لضمان قيام المستخدمين بتعبئة 'المعلومات المطلوبة" The required information .
الحل The Solution
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نموذج التبرع Donation Form</title>
</head>
<body>
<h1>نموذج التبرع</h1>
<form>
<label for="name">الاسم الكامل:</label>
<input id="name" type="text" name="name" required >
<label for="email">عنوان البريد الإلكتروني:</label>
<input id="email" type="email" name="email" required >
<label for="amount">مبلغ التبرع ($):</label>
<input id="amount" type="number" name="amount" required >
<input id="newsletter" type="checkbox" name="newsletter" >
<label for="newsletter">إشتراك</label>
<input type="submit" name="Send" >
</form>
</body>
</html>