X

نماذج وجداول اتش.تي.إم.إل

٢. إنشاء نموذج تقييم الفندق

ورشة عمل

في هذه الورشة، ستتدرب على العمل مع "نماذج اتش.تي.إم.إل" HTML forms من خلال إنشاء "نموذج تقييم الفندق" Hotel Feedback Form.

نموذج "اتش.تي.إم.إل" The HTML boilerplate.


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>نموذج تقييم الفندق</title>
 </head>
 <body>
 <!-- هنا تضع اكواد التطبيق -->
 </body>
</html>

الخطوة 1 :

بالنسبة للنص التمهيدي، ستحتاج إلى عرض "العنوان الرئيسي" the main title متبوعًا بملاحظة قصيرة حول ترك "التعليقات" feedback.

  • داخل عنصر body الخاص بك، أضف عنصر header.

  • داخل عنصر header، أضف عنصر h1. يجب أن يكون نص عنصر h1 هو نموذج تقييم الفندق.

  • أسفل عنصر h1، أضف عنصر p. يجب أن يكون نص عنصر p كالتالي: شكرًا لإقامتكم معنا. نرجو تزويدنا بتعليقاتكم حول إقامتكم الأخيرة.

<body>
 
 <header>
  <h1>نموذج تقييم الفندق</h1>
  <p>.شكرًا لإقامتكم معنا. نرجو تزويدنا بتعليقاتكم حول إقامتكم الأخيرة</p>
 </header>
 
</body>

الخطوة 2 :

والآن، حان الوقت لإضافة العنصر الرئيسي main الذي يمثل المحتوى الرئيسي للصفحة.


<body>

 <header>
  <h1>نموذج تقييم الفندق</h1>
  <p>.شكرًا لإقامتكم معنا. نرجو تزويدنا بتعليقاتكم حول إقامتكم الأخيرة</p>
 </header>

 <main>

 </main>

</body>

الخطوة 3 :

في الدروس السابقة، تعلمت كيفية التعامل مع عنصر "النموذج" form على النحو التالي:

مثال :


<form method="القيمة-توضع-هنا" action="الرابط-يوضع-هنا">
 <!-- عناصر الإدخال توضع هنا -->
</form>

تُستخدم سمة "الإجراء" action لتحديد المكان الذي يجب إرسال "بيانات النموذج" the form data إليه عند إرسال "النموذج" the form.

تُستخدم خاصية method لتحديد طريقة HTTP المستخدمة عند إرسال "بيانات النموذج" the form data. وأكثر الطرق شيوعًا هي GET و POST.

ملاحظة: ستتعرف على كيفية عمل طرق HTTP في الوحدات اللاحقة.
  • داخل العنصر الرئيسي main الخاص بك، أضف عنصر "نموذج" form مع سمة "إجراء" action مضبوطة على "https://hotel-feedback.freecodecamp.org" وسمة "طريقة" method مضبوطة على "POST".

<main>

 <form method="POST" action="https://hotel-feedback.freecodecamp.org">
  
 </form>
 
</main>

الخطوة 4 :

تتكون "النماذج" Forms من "حقول إدخال" inputs حيث يمكن للمستخدمين إدخال بياناتهم. يمكنك تجميع "حقول الإدخال ذات الصلة" related inputs معًا باستخدام عنصر "مجموعة الحقول" fieldset.

فيما يلي مثال على استخدام عنصر "مجموعة الحقول" fieldset :


<form action="/example-url">
 <fieldset>
  <!-- عناصر الإدخال توضع هنا -->
 </fieldset>
</form>
  • داخل عنصر "النموذج" form الخاص بك، أضف عنصر "مجموعة الحقول" fieldset.

<form method="POST" action="https://hotel-feedback.freecodecamp.org">

 <fieldset>

 </fieldset>

</form>

الخطوة 5 :

عند العمل مع عناصر "مجموعة الحقول" fieldset، من الشائع استخدام "تسمية توضيحية" caption لوصف "مجموعة المدخلات" the group of inputs. يمكنك استخدام عنصر "الأسطورة" legend لهذا الغرض.

فيما يلي مثال على استخدام عنصر "الأسطورة" legend :


<form action="/example-url">
 <fieldset>
  <legend>معلومات شخصية</legend>
  <!-- عناصر الإدخال توضع هنا -->
 </fieldset>
</form>
  • داخل عنصر "مجموعة الحقول" fieldset، أضف عنصر "الأسطورة" legend يحتوي على النص معلومات الشخصية.

<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 <fieldset>
  <legend>معلومات شخصية</legend>
 </fieldset>
</form>

الخطوة 6 :

في الدروس السابقة، تعلمت كيفية ربط عنصر "التسمية" label بعنصر "الإدخال" input على النحو التالي:

المثال :


<label for="name">:الإسم</label>
<input type="text" id="name"name="name">

يجب أن تتطابق السمة for في عنصر label مع السمة id في عنصر input. يُعرف هذا بـ"الارتباط الصريح" an explicit association.

  • أسفل عنصر "الأسطورة" legend، أضف عنصر "التسمية" label بنص الاسم (مطلوب):. اضبط سمة for الخاصة به على قيمة "full-name".

  • ثم أسفل عنصر "التسمية" label، أضف عنصر "إدخال" input بدون سمات. في الخطوات التالية، ستضيف السمات اللازمة.

<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 <fieldset>
  <legend>معلومات شخصية</legend>
  <label for="full-name">:الاسم (مطلوب)</label>
  <input >
 </fieldset>
</form>

الخطوة 7 :

عندما يُدخل "المستخدم" a user اسمه الكامل، سيقبل "حقل الإدخال" input "النص العادي" plaintext.

في الدروس السابقة، تعلمت كيفية التعامل مع سمة "النوع" type على النحو التالي:

المثال :


<input type="text">

  • بالنسبة لعنصر الإدخال الحالي input، أضف سمة "النوع" type واضبطها على "text".

  • قم أيضًا بمنح عنصر "الإدخال" input سمة "معرف" id بقيمة "full-name".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 <fieldset>
  <legend>معلومات شخصية</legend>
  <label for="full-name">:الاسم (مطلوب)</label>
  <input type="text" id="full-name">
 </fieldset>
</form>

الخطوة 8 :

تُستخدم سمة "الاسم" name لتحديد "بيانات النموذج" form data بعد إرسالها إلى "الخادم" the server.

إليك مثال على كيفية استخدام سمة "الاسم" name :


<input type="email" name="email">

  • أضف سمة "الاسم" name إلى عنصر "الإدخال" input بقيمة "name".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 <fieldset>
  <legend>معلومات شخصية</legend>
  <label for="full-name">:الاسم (مطلوب)</label>
  <input type="text" id="full-name" name="name">
 </fieldset>
</form>

الخطوة 9 :

في الدروس السابقة، تعلمت كيفية التعامل مع العنصر "النائب" placeholder والسمات "المطلوبة" required على النحو التالي:

المثال :


<input type="text" placeholder="على سبيل المثال، فلان بن فلان" required>

  • بالنسبة لعنصر الإدخال الحالي input، أضف سمة "النائب" placeholder بقيمة "فلان بن فلان".

  • أضف أيضًا السمة "مطلوب" required إلى عنصر "الإدخال" input.


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 <fieldset>
  <legend>معلومات شخصية</legend>
  <label for="full-name">:الاسم (مطلوب)</label>
  <input type="text" id="full-name" name="name" placeholder="فلان بن فلان" required>
 </fieldset>
</form>

الخطوة 10 :

يجب أن يتضمن نموذج تقييم الفندق الخاص بك أيضًا عنوان البريد الإلكتروني للمستخدم.

  • ابدأ بإضافة عنصر "تسمية جديد" label إلى "النموذج" form، مع النص عنوان البريد الإلكتروني (مطلوب):. يجب أن يحتوي عنصر "التسمية" label على سمة for مضبوطة على القيمة "email".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 <fieldset>
  <legend>معلومات شخصية</legend>
  <label for="full-name">:الاسم (مطلوب)</label>
  <input type="text" id="full-name" name="name" placeholder="فلان بن فلان" required>
  <label for="email">:عنوان البريد الإلكتروني (مطلوب)</label>
 </fieldset>
</form>

الخطوة 11 :

  • بعد ذلك، أضف "حقل إدخال" input من نوع "email" أسفل عنصر label "عنوان البريد الإلكتروني". يجب أن يحتوي هذا الحقل input على سمة "معرف" id بقيمة "email". كذلك، عيّن سمة name بقيمة "email".

  • هذا "الإدخال" input مطلوب أيضًا، لذا تأكد من إضافة السمة required.

  • وأخيرًا، أضف سمة "العنصر النائب" placeholder وتعيينها إلى "example@email.com".

<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 <fieldset>
  <legend>معلومات شخصية</legend>
  <label for="full-name">:الاسم (مطلوب)</label>
  <input type="text" id="full-name" name="name" placeholder="فلان بن فلان" required>
  <label for="email">:عنوان البريد الإلكتروني (مطلوب)</label>
  <input type="email" id="email" name="email" placeholder="example@email.com" required>
 </fieldset>
</form>

الخطوة 12 :

يمكن أن تحتوي "عناصر الإدخال" input elements على خاصية "الحجم" size. تحدد هذه الخاصية عدد الأحرف التي يجب أن تظهر أثناء كتابة المستخدم في "حقل الإدخال" the input. يجب أن تكون قيمة "الحجم" size عددًا صحيحًا غير سالب أكبر من الصفر. إذا لم يتم تحديد "الحجم" size، أو تم تحديده بقيمة غير صالحة، فسيكون عرض "حقل الإدخال" the input هو العرض الافتراضي الذي يحدده المتصفح.

مثال :


<label for="lastName">: اللقب</label>
<input id="lastName" name="lastName" type="text" size="10">
  • قم بمنح حقلي الإدخال "الاسم" و"البريد الإلكتروني" سمة "الحجم" size بقيمة "20".

<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 <fieldset>
  <legend>معلومات شخصية</legend>
  <label for="full-name">:الاسم (مطلوب)</label>
  <input type="text" id="full-name" name="name" placeholder="فلان بن فلان" size="20" required>
  <label for="email">:عنوان البريد الإلكتروني (مطلوب)</label>
  <input type="email" id="email" name="email" placeholder="example@email.com" size="20" required>
 </fieldset>
</form>

الخطوة 13 :

يجب أن يتضمن نموذج تقييم الفندق "خيارًا" an option للمستخدمين لإضافة أعمارهم.

  • ابدأ بإضافة عنصر "تسمية" label يحتوي على النص العمر (اختياري): إلى النموذج.

  • يجب ضبط السمة for على "age".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 <fieldset>
  <legend>معلومات شخصية</legend>
  <label for="full-name">:الاسم (مطلوب)</label>
  <input type="text" id="full-name" name="name" placeholder="فلان بن فلان" size="20" required>
  <label for="email">:عنوان البريد الإلكتروني (مطلوب)</label>
  <input type="email" id="email" name="email" placeholder="example@email.com" size="20" required>
  <label for="age">:العمر (اختياري)</label>
 </fieldset>
</form>

الخطوة 14 :

يُستخدم "حقل إدخال" الأرقام The number input لإنشاء "حقل إدخال رقمي" a numeric input field .

إليك مثال على حقل إدخال رقمي:


<input type="number" id="age" name="age" min="18" max="100" >

تُستخدم سمات min و max لتعيين القيم الدنيا والقصوى التي يمكن إدخالها في "حقل الإدخال" input.

  • أسفل عنصر "التسمية" label الخاص بك، أضف "حقل إدخال" input مع تعيين سمة "النوع" type إلى "number" ومعرف id إلى "age".

  • يجب تعيين سمة "الاسم" name إلى "age"، ويجب تعيين سمة "الحد الأدنى" min إلى "3"، ويجب تعيين سمة "الحد الأقصى" max إلى "100".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 <fieldset>
  <legend>معلومات شخصية</legend>
  <label for="full-name">:الاسم (مطلوب)</label>
  <input type="text" id="full-name" name="name" placeholder="فلان بن فلان" size="20" required>
  <label for="email">:عنوان البريد الإلكتروني (مطلوب)</label>
  <input type="email" id="email" name="email" placeholder="example@email.com" size="20" required>
  <label for="age">:العمر (اختياري)</label>
  <input type="number" id="age" name="age" min="3" max="100" >
 </fieldset>
</form>

الخطوة 15 :

سيتولى القسم التالي The next section في النموذج in the form مسؤولية سؤال المستخدمين عما إذا كانوا قد أقاموا في الفندق من قبل.

  • ابدأ بإضافة عنصر "مجموعة الحقول" fieldset.

  • داخل عنصر "مجموعة الحقول" fieldset، أضف عنصر "الأسطورة" legend بنص: هل كانت هذه زيارتك الأولى لفندقنا؟.


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 <fieldset>
  <legend>معلومات شخصية</legend>
  <label for="full-name">:الاسم (مطلوب)</label>
  <input type="text" id="full-name" name="name" placeholder="فلان بن فلان" size="20" required>
  <label for="email">:عنوان البريد الإلكتروني (مطلوب)</label>
  <input type="email" id="email" name="email" placeholder="example@email.com" size="20" required>
  <label for="age">:العمر (اختياري)</label>
  <input type="number" id="age" name="age" min="3" max="100" >
 </fieldset>

 <fieldset>
  <legend>هل كانت هذه زيارتك الأولى لفندقنا؟</legend>
 </fieldset>
</form>

الخطوة 16 :

إذا كنت تريد من المستخدمين اختيار خيار واحد من "قائمة الخيارات" a list of options، فيمكنك استخدام "مجموعة من أزرار الاختيار" a set of radio buttons.

إليك مثال على "زرين اختياريين" two radio buttons :


<input type="radio" id="yes" name="first-time">
<label for="yes">نعم</label>  
<input type="radio" id="no" name="first-time">
<label for="no">لا</label>

في هذا المثال، يتم تجميع "أزرار الاختيار" the radio buttons معًا باستخدام نفس قيمة سمة "الاسم" name. هذا يعني أنه لا يمكن تحديد سوى زر اختيار واحد في كل مرة.

  • أسفل عنصر "الأسطورة" legend، أضف "زر اختيار" radio button مع تعيين "المعرف" id إلى "yes-option"، وتعيين سمة "الاسم" name إلى "hotel-stay".

  • أسفل "زر الاختيار" radio button، أضف عنصر "تسمية" label بالنص نعم وسمة for مضبوطة على "yes-option".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 <fieldset>
  <legend>هل كانت هذه زيارتك الأولى لفندقنا؟</legend>
  <input type="radio" id="yes-option" name="hotel-stay">
  <label for="yes-option">نعم</label>  
 </fieldset>
</form>

الخطوة 17 :

  • أسفل عنصر "التسمية" label، أضف "زر اختيار" radio button مع تعيين "المعرف" id إلى "no-option"، وتعيين سمة "الاسم" name إلى "hotel-stay".

  • أسفل "زر الاختيار الجديد" new radio button، أضف عنصر "تسمية" label آخر مع ضبط سمة for على "no-option". يجب أن يكون نص عنصر "التسمية" label هو لا.

عند الانتهاء، يمكنك الآن تجربة "أزرار الاختيار" the radio buttons عن طريق تحديد خيار واحد في كل مرة.


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 <fieldset>
  <legend>هل كانت هذه زيارتك الأولى لفندقنا؟</legend>
  <input type="radio" id="yes-option" name="hotel-stay">
  <label for="yes-option">نعم</label>  
  <input type="radio" id="no-option" name="hotel-stay">
  <label for="no-option">لا</label>  
 </fieldset>
</form>

الخطوة 18 :

سيطلب "القسم التالي" The next section من "النموذج" the form من المستخدمين توضيح سبب اختيارهم لهذا الفندق تحديداً. وسيكون بإمكان المستخدمين اختيار "عدة خيارات" multiple options.

  • ابدأ بإضافة عنصر "مجموعة حقول" fieldset آخر.

  • داخل عنصر "مجموعة الحقول" fieldset، أضف عنصر"الاسطورة" legend مع النص التالي: لماذا اخترت الإقامة في فندقنا؟ (اختر جميع ما ينطبق).


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 <fieldset>
  <legend>هل كانت هذه زيارتك الأولى لفندقنا؟</legend>
  <input type="radio" id="yes-option" name="hotel-stay">
  <label for="yes-option">نعم</label>  
  <input type="radio" id="no-option" name="hotel-stay">
  <label for="no-option">لا</label>  
 </fieldset>

 <fieldset>
  <legend>لماذا اخترت الإقامة في فندقنا؟ (اختر جميع ما ينطبق)</legend>
 </fieldset>
</form>

الخطوة 19 :

عندما تريد من المستخدم تحديد خيارات متعددة من قائمة، يمكنك استخدام "مربعات الاختيار" checkboxes.

إليك مثال على كيفية التعامل مع "مربعات الاختيار" checkboxes المتعلقة بخيارات الطعام:


<fieldset>
 <legend>خيارات الطعام</legend>
 <input type="checkbox" id="pizza" name="food" value="pizza">
 <label for="pizza">بيتزا</label>  
 <input type="checkbox" id="burger" name="food" value="burger">
 <label for="burger">برجر</label>  
</fieldset>

تُستخدم سمة "القيمة" The value لتحديد القيمة التي سيتم إرسالها إلى "الخادم" the server عند إرسال "النموذج" the form.

  • أسفل عنصر "الأسطورة" legend، أضف "مربع اختيار" a checkbox input مع تعيين سمات "المعرف" id و"القيمة" value إلى "ads"، وسمة "الاسم" name إلى "choice".

  • أسفل "خانة الاختيار" checkbox input، أضف عنصر "تسمية" label بنص إعلانات وسائل التواصل الاجتماعي. يجب ضبط خاصية for على "ads".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 <fieldset>
  <legend>لماذا اخترت الإقامة في فندقنا؟ (اختر جميع ما ينطبق)</legend>
  <input type="checkbox" id="ads" name="choice" value="ads">
  <label for="ads">إعلانات وسائل التواصل الاجتماعي</label>  
  </fieldset>
</form>

الخطوة 20 :

  • أضف "خانة اختيار" checkbox input أخرى مع تعيين سمات id و value إلى "recommendation"، وسمة name إلى "choice".

  • أسفل "خانة الاختيار" checkbox input ، أضف عنصر "تسمية" label آخر بنص توصية شخصية. يجب ضبط خاصية for على "recommendation".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 <fieldset>
  <legend>لماذا اخترت الإقامة في فندقنا؟ (اختر جميع ما ينطبق)</legend>
  <input type="checkbox" id="ads" name="choice" value="ads">
  <label for="ads">إعلانات وسائل التواصل الاجتماعي</label>  
  <input type="checkbox" id="recommendation" name="choice" value="recommendation">
  <label for="recommendation">توصية شخصية</label>  
 </fieldset>
</form>

الخطوة 21 :

  • بعد ذلك، أضف "خانة اختيار" checkbox input أخرى مع تعيين سمات "المعرف" id و"القيمة" value إلى "location"، وسمة "الاسم" name إلى "choice".

  • بالنسبة لعنصر "التسمية" label ، يجب تعيين نص الموقع وسمة for إلى "location".

  • أسفل عنصر "التسمية" هذا label ، أضف "خانة اختيار" checkbox input أخرى مع تعيين سمات "المعرف" id و "القيمة" value إلى "reputation"، وسمة "الاسم" name إلى "choice".

  • بالنسبة لعنصر "التسمية" label، يجب تعيين نص السمعة وسمة for إلى "reputation".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 <fieldset>
  <legend>لماذا اخترت الإقامة في فندقنا؟ (اختر جميع ما ينطبق)</legend>
  <input type="checkbox" id="ads" name="choice" value="ads">
  <label for="ads">إعلانات وسائل التواصل الاجتماعي</label>  
  <input type="checkbox" id="recommendation" name="choice" value="recommendation">
  <label for="recommendation">توصية شخصية</label>
  <input type="checkbox" id="location" name="choice" value="location">
  <label for="location">الموقع</label>
  <input type="checkbox" id="reputation" name="choice" value="reputation">
  <label for="reputation">السمعة</label>  
 </fieldset>
</form>

الخطوة 22 :

لجعل "خانة الاختيار" a checkbox input محددة افتراضياً checked by default، يمكنك إضافة السمة checked.

فيما يلي مثال على استخدام السمة checked :


<input checked type="checkbox" id="checked" name="checked">

  • أضف السمة checked إلى "حقل إدخال الاختيار" checkbox input الذي يحمل id المعرف "reputation" لجعله محددًا افتراضيًا.


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 <fieldset>
  <legend>لماذا اخترت الإقامة في فندقنا؟ (اختر جميع ما ينطبق)</legend>
  <input type="checkbox" id="ads" name="choice" value="ads">
  <label for="ads">إعلانات وسائل التواصل الاجتماعي</label>  
  <input type="checkbox" id="recommendation" name="choice" value="recommendation">
  <label for="recommendation">توصية شخصية</label>
  <input type="checkbox" id="location" name="choice" value="location">
  <label for="location">الموقع</label>
  <input checked type="checkbox" id="reputation" name="choice" value="reputation">
  <label for="reputation">السمعة</label>  
 </fieldset>
</form>

الخطوة 23 :

  • بالنسبة للإدخال input النهائي والتسمية label داخل "مجموعة الحقول" fieldset هذه، ستضيف "مربع اختيار" a checkbox input مع سمات "المعرف" id و"القيمة" value التي تم تعيينها إلى "price"، وسمة "الاسم" name التي تم تعيينها إلى "choice".

  • ثم، عنصر "تسمية" label يحتوي على النص السعر وتعيين السمة for إلى "choice".

يمكنك الآن اختبار "النموذج" form الخاص بك عن طريق تحديد "مربعات الاختيار" checkboxes المختلفة.


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 <fieldset>
  <legend>لماذا اخترت الإقامة في فندقنا؟ (اختر جميع ما ينطبق)</legend>
  <input type="checkbox" id="ads" name="choice" value="ads">
  <label for="ads">إعلانات وسائل التواصل الاجتماعي</label>  
  <input type="checkbox" id="recommendation" name="choice" value="recommendation">
  <label for="recommendation">توصية شخصية</label>
  <input type="checkbox" id="location" name="choice" value="location">
  <label for="location">الموقع</label>
  <input checked type="checkbox" id="reputation" name="choice" value="reputation">
  <label for="reputation">السمعة</label>
  <input type="checkbox" id="price" name="choice" value="price">
  <label for="price">السعر</label>  
 </fieldset>
</form>

الخطوة 24 :

سيوفر "القسم التالي" The next section من "النموذج" the form للمستخدمين إمكانية ترك تقييم للفندق.

  • ابدأ بإضافة عنصر "مجموعة حقول" fieldset جديد مع عنصر وسيلة إيضاح "الأسطورة" legend متداخل بداخله. يجب أن تحتوي "وسيلة الإيضاح" legend على النص التقييمات.

  • أسفل عنصر "الأسطورة" legend، أضف عنصر "تسمية" label بالنص كيف كانت الخدمة؟. يجب تعيين السمة for إلى "service".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 <fieldset>
  <legend>لماذا اخترت الإقامة في فندقنا؟ (اختر جميع ما ينطبق)</legend>
  <input type="checkbox" id="ads" name="choice" value="ads">
  <label for="ads">إعلانات وسائل التواصل الاجتماعي</label>  
  <input type="checkbox" id="recommendation" name="choice" value="recommendation">
  <label for="recommendation">توصية شخصية</label>
  <input type="checkbox" id="location" name="choice" value="location">
  <label for="location">الموقع</label>
  <input checked type="checkbox" id="reputation" name="choice" value="reputation">
  <label for="reputation">السمعة</label>
  <input type="checkbox" id="price" name="choice" value="price">
  <label for="price">السعر</label>  
 </fieldset>

 <fieldset>
  <legend>التقييمات</legend>
  <label for="service">كيف كانت الخدمة؟</label>  
 </fieldset>

</form>

الخطوة 25 :

عندما تريد من المستخدمين اختيار عناصر من "قائمة منسدلة" a dropdown menu، يمكنك استخدام عنصري select و option.

فيما يلي مثال على استخدام عنصري select و option لإنشاء "قائمة منسدلة" a dropdown لمدن مختلفة:


<label for="city">اختر مدينة: </label>
<select id="city" name="city">
 <option value="new-york">نيويورك</option>
 <option value="los-angeles">لوس أنجلوس</option>
 <option value="chicago">شيكاغو</option>
 <option value="miami">ميامي</option>
</select>

  • ابدأ بإضافة عنصر "تحديد" select مع تعيين سمات "الاسم" name و"المعرف" id إلى "service".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 ...

 <fieldset>
  <legend>التقييمات</legend>
  <label for="service">كيف كانت الخدمة؟</label>
  <select id="service" name="service">
  </select>  
 </fieldset>

</form>

الخطوة 26 :

داخل عنصر "القائمة المنسدلة" select، أضف عناصر "الخيارات" option الخمسة التالية مع القيم المقابلة لخاصيتي "نص الخيار" option text و"قيمته" value :

سمات القيمة Value Attributes :

  • poor

  • satisfactory

  • good

  • very-good

  • excellent

نص عنصر الخيار Option Element Text :

  • ضعيف

  • مقبول

  • جيد

  • جيد جداً

  • ممتاز


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 ...

 <fieldset>
  <legend>التقييمات</legend>
  <label for="service">كيف كانت الخدمة؟</label>
  <select id="service" name="service">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option value="excellent">ممتاز</option>
  </select>  
 </fieldset>

</form>

الخطوة 27 :

لجعل "خيار" option ما "محددًا افتراضيًا" selected by default، يمكنك إضافة السمة "المحددة" selected إلى عنصر "الخيار" option الذي تريد تحديده.

إليك مثال باستخدام السمة "المحددة" selected :


<option selected value="amazing">مدهش</option>

  • داخل عنصر "التحديد" select الخاص بك، أضف السمة "المحددة" selected إلى عنصر "الخيار" option بقيمة "excellent".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 ...

 <fieldset>
  <legend>التقييمات</legend>
  <label for="service">كيف كانت الخدمة؟</label>
  <select id="service" name="service">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option selected value="excellent">ممتاز</option>
  </select>  
 </fieldset>

</form>

الخطوة 28 :

يجب أن يتيح "نموذج تقييم الفندق" hotel feedback form للمستخدمين أيضاً إمكانية تقييم الطعام.

  • ابدأ بإضافة عنصر "تسمية" label بنص كيف كان الطعام؟. يجب أن يحتوي عنصر "التسمية" label هذا على سمة for مضبوطة على "food".

  • أسفل عنصر "التسمية" label الخاص بك، أضف عنصر "تحديد" select مع تعيين "المعرف" id و"الاسم" name إلى "food".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 ...

 <fieldset>
  <legend>التقييمات</legend>
  <label for="service">كيف كانت الخدمة؟</label>
  <select id="service" name="service">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option selected value="excellent">ممتاز</option>
  </select>
  <label for="food">كيف كان الطعام؟</label>
  <select id="food" name="food">
  </select>  
 </fieldset>

</form>

الخطوة 29 :

داخل عنصر "القائمة المنسدلة" select ، أضف عناصر "الخيارات" option الخمسة التالية مع القيم المقابلة لخاصيتي "نص الخيار" option text و"قيمته" value :

سمات القيمة Value Attribute :

  • poor

  • satisfactory

  • good

  • very-good

  • excellent

نص عنصر الخيار Option Text :

  • ضعيف

  • مقبول

  • جيد

  • جيد جداً

  • ممتاز

لا تنس إضافة السمة "المحددة" selected إلى عنصر "الخيار" option بقيمة "excellent".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 ...

 <fieldset>
  <legend>التقييمات</legend>
  <label for="service">كيف كانت الخدمة؟</label>
  <select id="service" name="service">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option selected value="excellent">ممتاز</option>
  </select>
  <label for="food">كيف كان الطعام؟</label>
  <select id="food" name="food">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option selected value="excellent">ممتاز</option>
  </select>  
 </fieldset>

</form>

الخطوة 30 :

سيسمح "القسم الأخير" The last section من "النموذج" the form للمستخدمين بتقديم أي ملاحظات إضافية يرغبون بها حول الفندق.

  • ابدأ بإضافة عنصر "تسمية" label بنص تعليقات أخرى؟ وتعيين سمة for إلى "comments".


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 ...

 <fieldset>
  <legend>التقييمات</legend>
  <label for="service">كيف كانت الخدمة؟</label>
  <select id="service" name="service">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option selected value="excellent">ممتاز</option>
  </select>
  <label for="food">كيف كان الطعام؟</label>
  <select id="food" name="food">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option selected value="excellent">ممتاز</option>
  </select>
  <label for="comments">تعليقات أخرى؟</label>  
 </fieldset>

</form>

الخطوة 31 :

إذا كنت تريد أن يحصل المستخدمون على مساحة أكبر لكتابة تعليقاتهم، يمكنك استخدام عنصر textarea.

عنصر "منطقة النص" textarea هو عنصر تحكم لإدخال النصوص متعددة الأسطر، يسمح للمستخدمين بإدخال نصوص أطول من سطر واحد. يمكن استخدامه لإنشاء "مربع تعليق" a comment box، أو "حقل إدخال رسالة" a message input، أو أي "حقل إدخال نص" text input آخر يتطلب عدة أسطر.

إليك مثال على عنصر textarea :


<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

تُستخدم سمة "الصفوف" rows لتحديد الارتفاع المرئي لـ"منطقة النص" textarea، وتُستخدم سمة "الأعمدة" cols لتحديد العرض المرئي لـ"منطقة النص" textarea.

  • أسفل عنصر "التسمية" label، أضف عنصر "منطقة نصية" textarea. في الخطوة التالية، ستضيف السمات اللازمة.


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 ...

 <fieldset>
  <legend>التقييمات</legend>
  <label for="service">كيف كانت الخدمة؟</label>
  <select id="service" name="service">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option selected value="excellent">ممتاز</option>
  </select>
  <label for="food">كيف كان الطعام؟</label>
  <select id="food" name="food">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option selected value="excellent">ممتاز</option>
  </select>
 </fieldset>

 <label for="comments">تعليقات أخرى؟</label>
 <textarea></textarea>  

</form>

الخطوة 32 :

  • بالنسبة لعنصر textarea الخاص بك، أضف سمة id وسمة name بقيمة "comments".

  • بالنسبة لخاصية cols، اضبط القيمة على 30، وبالنسبة لخاصية rows، اضبط القيمة على 10.


<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 ...

 <fieldset>
  <legend>التقييمات</legend>
  <label for="service">كيف كانت الخدمة؟</label>
  <select id="service" name="service">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option selected value="excellent">ممتاز</option>
  </select>
  <label for="food">كيف كان الطعام؟</label>
  <select id="food" name="food">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option selected value="excellent">ممتاز</option>
  </select>
 </fieldset>
  
 <label for="comments">تعليقات أخرى؟</label>
 <textarea id="comments" name="comments" cols="30" rows="10"></textarea>   

</form>

الخطوة 33 :

في الخطوة الأخيرة من "ورشة عمل نموذج ملاحظات الفندق" the hotel feedback form workshop، ستحتاج إلى إضافة "زر إرسال" a submit button إلى "النموذج" the form.

تذكر أنك تعلمت كيفية استخدام "أزرار الإرسال" submit buttons في الدروس السابقة.

  • أضف عنصر "زر" button مع تعيين سمة "النوع" type إلى "إرسال" "submit" وتعيين محتوى النص إلى إرسال.

<form method="POST" action="https://hotel-feedback.freecodecamp.org">
 ...
 ...
 ...

 <fieldset>
  <legend>التقييمات</legend>
  <label for="service">كيف كانت الخدمة؟</label>
  <select id="service" name="service">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option selected value="excellent">ممتاز</option>
  </select>
  <label for="food">كيف كان الطعام؟</label>
  <select id="food" name="food">
   <option value="poor">ضعيف</option>
   <option value="satisfactory">مقبول</option>
   <option value="good">جيد</option>
   <option value="very-good">جيد جداً</option>
   <option selected value="excellent">ممتاز</option>
  </select>
 </fieldset>

 <label for="comments">تعليقات أخرى؟</label>
 <textarea id="comments" name="comments" cols="30" rows="10"></textarea>  
 
 <button type="submit">إرسال</button>

</form>

وبهذا، يكون نموذج تقييم الفندق الخاص بك قد اكتمل!

حل التطبيق :


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>نموذج تقييم الفندق</title>
 </head>
 <body>

  <header>
     <h1>نموذج تقييم الفندق</h1>
     <p>.شكرًا لإقامتكم معنا. نرجو تزويدنا بتعليقاتكم حول إقامتكم الأخيرة</p>
  </header>
 
  <main>
   <form method="POST" action="https://hotel-feedback.freecodecamp.org">
    
   <fieldset>
     <legend>معلومات شخصية</legend>
     <label for="full-name">:الاسم (مطلوب)</label>
     <input type="text" id="full-name" name="name" placeholder="فلان بن فلان" size="20" required>
     <label for="email">:عنوان البريد الإلكتروني (مطلوب)</label>
     <input type="email" id="email" name="email" placeholder="example@email.com" size="20" required>
     <label for="age">:العمر (اختياري)</label>
     <input type="number" id="age" name="age" min="3" max="100" >
    </fieldset>
    
    <fieldset>
     <legend>هل كانت هذه زيارتك الأولى لفندقنا؟</legend>
     <input type="radio" id="yes-option" name="hotel-stay">
     <label for="yes-option">نعم</label>
     <input type="radio" id="no-option" name="hotel-stay">
     <label for="no-option">لا</label>  
    </fieldset>

    <fieldset>
     <legend>لماذا اخترت الإقامة في فندقنا؟ (اختر جميع ما ينطبق)</legend>
     <input type="checkbox" id="ads" name="choice" value="ads">
     <label for="ads">إعلانات وسائل التواصل الاجتماعي</label>
     <input type="checkbox" id="recommendation" name="choice" value="recommendation">
     <label for="recommendation">توصية شخصية</label>
     <input type="checkbox" id="location" name="choice" value="location">
     <label for="location">الموقع</label>
     <input checked type="checkbox" id="reputation" name="choice" value="reputation">
     <label for="reputation">السمعة</label>
     <input type="checkbox" id="price" name="choice" value="price">
     <label for="price">السعر</label>    
    </fieldset>

    <fieldset>
     <legend>التقييمات</legend>
     <label for="service">كيف كانت الخدمة؟</label>
     <select id="service" name="service">
      <option value="poor">ضعيف</option>
      <option value="satisfactory">مقبول</option>
      <option value="good">جيد</option>
      <option value="very-good">جيد جداً</option>
      <option selected value="excellent">ممتاز</option>
     </select>
     <label for="food">كيف كان الطعام؟</label>
     <select id="food" name="food">
      <option value="poor">ضعيف</option>
      <option value="satisfactory">مقبول</option>
      <option value="good">جيد</option>
      <option value="very-good">جيد جداً</option>
      <option selected value="excellent">ممتاز</option>
     </select>
    </fieldset>
     
    <label for="comments">تعليقات أخرى؟</label>
    <textarea id="comments" name="comments" cols="30" rows="10"></textarea>      
    
    <button type="submit">إرسال</button>

   </form>
  </main>

 </body>
</html>

معاينة التطبيق :