عناصر صفحة الويب Body Tags
جزء 4 النماذج Forms
ماهي النماذج في صفحة الويب وبماذا تستخدم.…؟؟!! و كيف يتم بناء نموذج Form في صفحة الويب…؟؟!! و ماهي أوسمة الـ HTML الخاصة الخاصة بالنماذج و ما طريقة عملها...؟
تعد النماذج Forms من العناصر الأساسية في تفاعل المستخدم مع المواقع الإلكترونية، حيث يمكن للمستخدمين إدخال البيانات وإرسالها للخادم للمعالجة. وهنا يأتي دور وأهمية عناصر HTML الخاصة بالنماذج (Forms) في إمكانية تصميم وبناء نماذج فعالة وقوية. في هذا المقال سنتعرف على طريقة بناء النماذج على صفحات الويب من خلال أوسمة الـ HTML لنبدأ…
في هذا المقال نتعرف على:
- ما هي النماذج Forms ؟
- أهمية النماذج في تطوير البرامج.
- أوسمة الـ HTML المستخدمة في بناء النماذج Form.
- أنواع نماذج Forms Types.
ما هي النماذج Forms وفيما تستخدم؟
النموذج Form في صفحة الويب هو مجموعة حقول والايقونات التي تظهر للمستخدم و تتطلب إدخال البيانات ، في صفحة الويب تتعدد أنواع حقول الإدخال بحسب نوع البيانات المطلوبة من المستخدم سواء كانت نص أو رقم أو تاريخ او حتى ملف أو صورة .
وتستخدم النماذج Forms في صفحات الويب بشكل اعتيادي فهي موجودة كما ذكرنا في صفحات التسجيل وصفحات تسجيل الدخول وصفحات الاستبيان وحتى صفحات الاختبارات وحتى في عند الشراء نجد نموذج لإدخال البيانات بغرض إتمام عملية الشراء .
النموذج Form جزء اساسي في كل مشروع ويب فكل مشروع يحتوي على عدد من النماذج Form في عدد من صفحاته أي كان الغرض من هذه المشروع تعليمي، خدمي ، تجارة الكترونية وحتى الألعاب الالكترونية فأي جزء من المشروع يتطلب بيانات من المستخدم يحتاج بناء نموذج. وتُبنى النماذج Forms في صفحة الويب بواسطة عناصر الـ HTML والتي تعمل على استقبال البيانات من المستخدم وبالتالي إدخالها للنظام وفيما يلي سوف نتعرف على هذه العناصر وما وظيفة كل منها ...
أهمية النماذج في تطوير الويب
تعد النماذج (Forms) عناصر ضرورية في صفحات الويب، وتحمل أهمية كبيرة للأسباب التالية:
- جمع البيانات: تسمح النماذج بجمع البيانات من المستخدمين. يمكن للزوار إدخال المعلومات المطلوبة مثل الاسم، البريد الإلكتروني، رقم الهاتف، وغيرها. يمكن استخدام هذه البيانات لأغراض مختلفة مثل التواصل مع الزوار، توفير خدمات مخصصة، أو تحليل البيانات لغايات الأبحاث والتحليل.
- التحكم والتحقق: يمكن استخدام النماذج لفحص والتحقق من صحة البيانات المدخلة من قبل المستخدمين. يمكن تطبيق قواعد وشروط معينة للتحقق من صحة البيانات المدخلة، مثل التحقق من تنسيق البريد الإلكتروني الصحيح أو التحقق من الأرقام المدخلة. هذا يساعد في تجنب إرسال بيانات غير صحيحة أو غير مكتملة.
- التفاعل والتواصل: تعتبر النماذج وسيلة للتفاعل المباشر بين المستخدم وصاحب الموقع. يمكن للمستخدمين إدخال المعلومات واختيار الخيارات المناسبة وإرسالها للموقع. يتمكن الموقع من الاستجابة لهذه الإدخالات وتقديم الرد المناسب أو إجراء الإجراءات المطلوبة.
- تعزيز تجربة المستخدم: من خلال استخدام النماذج، يمكن تحسين تجربة المستخدم على صفحات الويب. يمكن توفير واجهات بسيطة وسهلة الاستخدام لملء النماذج، وتوفير تعليمات واضحة حول كيفية تعبئة الحقول وإرسال البيانات. هذا يساعد في جعل التفاعل مع الموقع أكثر سلاسة و مريحة للمستخدمين.
- التخصيص والتفاعل الديناميكي: يمكن استخدام النماذج لتوفير خيارات مختلفة للمستخدمين وتخصيص تجربتهم. يمكن إظهار أو إخفاء حقول النموذج بناءً على اختيارات المستخدم أو تفاصيل معينة. يمكن أيضًا تحديث النماذج أو إعادة رسمها بناءً على إجراءات المستخدم، مما يوفر تجربة تفاعلية ديناميكية.
تعتبر النماذج أداة أساسية في تصميم صفحات الويب حيث تمكن المستخدمين من تقديم البيانات والتفاعل مع المواقع بطريقة مرنة وفعالة. تساهم في جمع البيانات المهمة، تحسين تجربة المستخدم، وتوفير آليات للتحقق من صحة البيانات. استخدام النماذج بشكل صحيح يعزز التواصل والتفاعل بين المستخدم وصاحب الموقع، ويسهم في تحقيق أهداف الويب الخاصة بك سواء كانت تجارية أو غيره
أوسمة الـ HTML المستخدمة في بناء النماذج Form
<Form>
<form> هو الوسم الأساسي حيث يستخدم الوسم <form> للإعلان عن بناء النموذج وبداخل الوسم <form> يمكن استخدام أوسمة متعددة لعمل حقول إدخال وازار وايقونات هذه العناصر.
أولاً : الوسم <input>
يستخدم الوسم <input> لبناء حقل الادخال مع بعض سمات Attributes والخصائص Properties خاصة لكل حقل كما يتضح فيما يلي :
وهنا قائم ببعض السمات المستخدمة مع حقل الادخال input :
- type: تحدد نوع حقل الإدخال تبعاً لنوع البيانات المطلوبة.
- id : لإعطاء معرف لهذا الحقل (لابد ان يكون فريد لكل حقل ويساعد في الوصول للحقل بواسطة CSS JavaScript )
- name لتحديد اسم الحقل ( لابد من إعطاء اسم واضح وفريد لأنه سيستخدم لاحقاً في عملية البرمجة).
- value سمة Attribute تحدد القيمة الافتراضية للحقل الإدخال وفي الايقونات تسمي وظيفة الأيقونة.
- placeholder لكتابة النص الافتراضي للحقل مما يعطي للمستخدم تلميح عن نوع البيانات المطلوبة .
- size لتحديد حجم البيانات المدخلة للحقل .
- required خاصية Property تعني أن هذا الحقل مطلوب.
- readonly خاصية Property تعني أن هذا الحقل للقراءة فقط .
- maxlength سمة Attribute تحدد الحد الأقصى لطول البيانات المدخلة مثل أن يحدد رقم الهاتف بـ 10 ارقام .
و يأخذ الوسم <input> عدد من Type Attribute أنواع متعددة منها:
| Text | لإنشاء حقل يستقبل بيانات من نوع نص. |
| لإنشاء حقل يستقبل بيانات من نوع بريد إلكتروني. | |
| Phone | لإنشاء حقل يستقبل بيانات من نوع رقم الهاتف. |
| Date | لإنشاء حقل يستقبل بيانات من نوع تاريخ مثل تاريخ الميلاد. |
مثــال :
وهنا مثال على طريقة بناء نموذج Form بواسطة HTML tags ، في المثال التالي تم استخدم < fieldset> لربط مجمعة عناصر الـ form والوسم <legend> لإعطاء عنوان مجموعة filedset
<body>
<h2>This is a form example </h2>
<form>
<fieldset>
<legend>Form Example:</legend>
<label for="name">Username: </label>
<input type="text" id="name" placeholder = "your username" size="60px" required><br/><br/>
<label for="email">Email: </label>
<input type="email" name="email" placeholder="Enter you email" required> <br/><br/>
<label for = "phone"> phone </label>
<input type="tel" name ="phone" placeholder="Enter your phone" maxlength="10"> <br/><br/>
<label> Password </label>
<input type="password" name = "password" placeholder="Enter any chosen password"><br/><br/>
<label for = "brithday"> Brithday </label>
<input type="date" name="brithday" placeholder="Enter your Brithday"><br/><br/>
</fieldset>
</form>
</body>
لتكن النتيجة
ذكرنا أن Type ِAttribute تقوم بتحديد نوع حقل الإدخال تبعاً لنوع البيانات المطلوبة فما هي أنواع البيانات الأخرى غير الواردة في المثال السابق :
RadioType
عندما نريد من المستخدم أن يختار خيار واحد فقط من عدة خيارات تحدد نوع البيانات المدخلة بنوع radio ويستخدم Checked Property لتحديد الخيار الافتراضي لاحظ/ي المثال التالي جعلنا الخيارات تحمل نفس الاسم مع اختلاف id :
<p>Gender :</p>
<input type="radio" id="male" name="gender" checked>
<label for="male">Male </label>
<input type="radio" id="female" name="gender">
<label for="female">Female </label>لتكن النتيجة
Checkbox Type
عندما نريد من المستخدم أن يحدد أكثر من خيار واحد في نفس الوقت هنا نستخدم نوع الإدخال checkbox للبيانات المدخلة لاحظ/ي المثال التالي لابد أن يكون لكل خيار من الخيارات اسم مختلف:
<p> How did you Know about HTML course</p>
<input type="checkbox" id="friend" name="friend" checked>
<label for ="friend">Friends </label><br/>
<input type="checkbox" id="book" name="book">
<label for ="book">Books </label><br/>
<input type="checkbox" id="social media" name="social media">
<label for ="social media">Social medi</label>لتكن النتيجة
إدخال بيانات الوقت والتاريخ
بالنسبة لطريقة ادخال بيانات الوقت والتاريخ فتعدد أنواع المدخلات في <input /> ومنها ما يلي:
- time ويسمح للحقل بإدخال بيانات الوقت فقط ( الساعات والدقائق والثواني).
- date ويسمح للحقل بإدخال التاريخ فقط .( اليوم والشهر والسنة).
- datetime-loca ويسمح للحقل بإدخال بيانات الوقت والتاريخ معاً .
<label>Time - Input </label>
<input type ="time" ><br/><br/>
<label>Date - Input </label>
<input type ="date" ><br/><br/>
<label>Datetime-local - Input </label>
<input type ="datetime-local" >لتكن النتيجة
النطاق Range
مع حقل الإدخال <input> عندما نريد من المستخدم اختيار قيمة ضمن نطاق معين من القيم نحدد نوع البيانات المدخلة بـ range ستظهر للمستخدم على شكل أيقونة مزلاج هذا النوع غالبا يستخدم في صفحات الاستبيان ويتم كما يتضح معنا في المثال التالي :
<label>Range - Input </label>
<input type ="range" >لتكن النتيجة
رفع المستندات واختيار الالوان
.مع حقل الإدخال <input> ليتمكن المستخدم من رفع أي نوع من المستندات للموقع نقوم بتحديد نوع البيانات بـ file ، ونحدد نوع البيانات color عندما نريد من المستخدم اختيار لون كما يتضح معنا في المثال التالي :.
<label> File- Input </label>
<input type="file" name = "file" > <br/><br/>
<label>color - Input </label>
<input type="color" ><br/><br/>لتكن النتيجة
الأيقونات
و لعمل الأيقونات مع حقل الإدخال <input> نستخدم أنواع البيانات التالية reset - submit - button بحسب الحاجة ويكون استخدمها كما يتضح في المثال التالي نلاحظ Value Attribute تستخدم مع submit و button وتمثل النص الظاهر على الأيقونة.
<label>Reset - Input </label>
<input type ="reset" > <br/><br/>
<label>submit - Input </label>
<input type="submit" value="Send"><br/><br/>
<label>Button - Input </label>
<input type ="button" value = "Cancel">لتكن النتيجة
ثانياً: الأوسمة <select> & <option>
ولعمل قائمة منسدلة من الخيارات نستخدم الأوسمة <select> ويستخدم للإعلان عن بناء القائمة و الوسم <option> لإنشاء عناصر القائمة المنسدلة كما يتضح معنا في المثال التالي:
<label for ="city">Choose your city : </label>
<select name="city" id="city">
<option value="Mecca">Mecca </option>
<option value="Riyadh">Riyadh </option>
<option value="Tabuk">Tabuk </option>
</select>
لتكن النتيجة
ثالثاً : الأوسمة <teaxtarea> & <button>
رأينا كيف يتم عمل الايقونات بواسطة الوسم <input > وأيضاً يمكن بناء الايقونات بواسطة الوسم <button> لعمل أما الوسم <textarea> فيستخدم لإنشاء مساحة إدخال نص لاحظ/ي المثال :
<label>texarea - tag </label>
<textarea name="message" rows="5" cols="20"> Type summary here </textarea>
<br/><br/>
<button name = "button" value="Cancel">Save </button>لتكن النتيجة
أنواع نماذج Forms Types
في مجال تطوير الويب هناك عدة أنواع من النماذج Forms التي يمكن استخدامها في صفحات الويب، وتختلف حسب الغرض والاحتياجات المحددة للموقع. وفيما يلي بعض أنواع النماذج الشائعة في صفحات الويب:
- نماذج التقييم (Survey Forms): تستخدم لإجراء استطلاعات للرأي أو دراسات السوق للحصول على معلومات من المستخدمين. يمكن للمستخدمين تقييم منتجات أو خدمات محددة أو الإجابة على أسئلة متعددة الخيارات.
- نماذج الاتصال (Contact Forms): تستخدم للسماح للمستخدمين بالتواصل مع صاحب الموقع عن طريق ملء الحقول بمعلومات الاتصال مثل الاسم والبريد الإلكتروني ورسالة. تساعد هذه النماذج على تسهيل الاتصال وتلقي استفسارات المستخدمين أو ردود الفعل.
- نماذج التسجيل (Registration Forms): تستخدم للسماح للمستخدمين بإنشاء حسابات مستخدم جديدة على الموقع. يتم جمع معلومات مثل الاسم، عنوان البريد الإلكتروني، كلمة المرور، وغيرها لتمكين المستخدم من الوصول إلى المحتوى المحمي أو الميزات الخاصة.
- نماذج الطلب (Order Forms): تستخدم في المتاجر الإلكترونية للسماح للمستخدمين بتقديم طلبات لشراء منتجات أو خدمات. تحتوي على حقول لإدخال تفاصيل الطلب مثل الكمية المطلوبة، العنوان الشحن، طريقة الدفع، وغيرها.
- نماذج الاشتراك (Subscription Forms): تستخدم لجمع عناوين البريد الإلكتروني للمستخدمين الذين يرغبون في الاشتراك في النشرة الإخبارية أو تلقي محتوى محدد من الموقع. تساعد هذه النماذج في بناء قاعدة بيانات المستخدمين وتوفير وسيلة للتواصل المستمر معهم.
- نماذج التعليقات (Feedback Forms): تستخدم لجمع آراء وتعليقات المستخدمين حول الموقع أو المحتوى المقدم. يمكن للمستخدمين تقديم ردود فعل، اقتراحات، أو شكاوى من خلال هذه النماذج.
هذه مجرد بعض الأنواع الشائعة للنماذج في صفحات الويب. يمكن تخصيص النماذج وتعديلها وفقًا لاحتياجات الموقع والمستخدمين المستهدفين. يمكن استخدام النماذج لأغراض متعددة أخرى مثل التسجيل في الفعاليات، طلب الاقتباسات، تقديم طلبات الوظائف، إجراء الحجوزات، وغيرها.
من خلال هذا المقال، قمنا باستكشاف مختلف عناصر النماذج في HTML مثل <form>، <input>، <select>، <textarea>، مع نتناول بعض الأمثلة العملية لتوضيح كيفية استخدام وتنسيق هذه الوسوم في إنشاء نماذج ويب فعالة. بغض النظر عن طبيعة الموقع اللإلكتروني أو التطبيق، فإن فهم واستخدام عناصر HTML الخاصة بالنماذج يعزز تفاعل المستخدم وتجربته. ستكتسب المرونة في تصميم النماذج وتحسين تحويل البيانات والتفاعل مع الجمهور.