دورة Html الدرس 10 - النماذج forms

السلام عليكم ورحمة الله وبركاته
سنتحدث في درسنا اليوم عن مايسمى النماذج forms في لغة برمجة الويب HTML 
حيث أنك أيها الزائر أو العضو في الصفحة الأكثر شمولاً عن النماذج في الانترنت كله
النماذج كتعريف : هي طرق تسمح للمستخدم أو لزائر الموقع بإدخال بيانات لهذا الموقع
وكمثال عندما تكتب مشاركة في المنتدى فإنك تدخل بيانات و عندما تكتب رسالة بريد الكتروني 
فإنك تدخل بيانات و عندما تسجل في موقع و تختار بلدك وعمرك و اسمك و ما إلى ذلك فإنك تدخل بيانات لهذا الموقع
وطرق إدخال البيانات هذه تتم عن طريق النماذج forms

ملاحظة قبل بداية الدرس :
في درس اليوم سنتعرف إلى أشكال النماذج و أساسياتها وطرق كتابة الوسوم وخصائصها
ولكن الفائدة الحقيقية للنماذج تكون مع php و javascript وهما لغتنان سندرسهما لاحقاً
حيث يمكن من خلالها معالجة البيانات التي يتم إدخالها
مثلاً : تسجيل دخول مستخدم عند إدخال اسمه


طريقة كتابة النماذج:
نستعمل عادة الوسم form لعمل نموذج ويكون كالتالي:

كود HTML:

<form>
محتوى النموذج هنا
</form>

حيث نضع بين وسمتي الـ form محتوى النموذج
وسندرج طرق الإدخال في الفقرات التالية من درسنا :


إدخال النصوص input text
بشكل عام لعمل المدخلات نستعمل الوسم input
ويكتب داخل الفورم form ( النموذج ) كما يلي:

كود HTML:

<form>
<input type="النوع"/>
</form>

وبدلاً من كلمة النوع في الكود السابق سنضع نوع المدخل
وستتضح لك الأمور بشكل تدريجي ...
نوع مدخل النصوص يسمى text كالتالي:

ويستخدم لإدخال نص من قبل المستخدم 
يكتب الكود الذي يؤدي هذا الغرض كما يلي:

كود HTML:

<form>
<input type="text"/>
</form>

وللنماذج ومحتوياتها عدة خصائص تمكننا من التحكم 
من هذه الخصائص خاصة value مع الوسم input
مثال للفهم :

كود HTML:

<form>
<input type="text" value="shabsug"/>
</form>

لاحظ أن الخاصة value تستخدم لوضع قيمة ابتدائية للوسم input حيث ستكون النتيجة كالتالي:

الخاصتان name , id
تستخدمان لتسمية الجزء الذي وضعناه داخل النموذج form لتمييزه عن غيره
مثال :

كود HTML:

<form dir="rtl">
الاسم
<input type="text" value="أدخل اسمك هنا" title="fname" id="fname"/>
<br/>
اسم العائلة
<input type="text" value="اسم العائلة هنا" title="lname" id="lname"/>
</form>

في المثال السابق لدينا نموذج form وضعنا له الخاصة dir للتحكم بجهته من اليمين إلى اليسار
من أجل اللغة العربية 
وداخل هذا الفورم form وضعنا حقل نصي أول كتبنا بجانبه الاسم
ووضعنا له قيمة ابتدائية باستخدام الخاصة value
وسميناه fname
و أعطيناه عنوان fname
و يوجد حقل نصي ثاني كتبنا بجانبه اسم العائلة
وأعطيناه قيمة ابتدائية : اسم العائلة هنا
وسميناه و أعطيناه العنوان lname

ملاحظة :
يمكن التحكم بمساحة حقل الإدخال باستعمال الخاصة size كما يلي:

كود HTML:

<form>
<input type="text" size="40" />
</form>

أو باستخدام css لاحقاً

ملاحظات على ماسبق :
بالنسبة للاسم والعنوان يفيدنا جداً في برمجة php , JavaScript 
وذلك لمعالجة البيانات المدخلة في الحقول النصية
فمثلاً نريد أن نأخذ اسم الشخص و نظهر له عبارة مرحباً يا .....
فلتمييز الحقول عن بعضها نضع لها أسماء وعناوين
وغالباً نضع اسم الحقل والعنوان نفسه 
إذا كان هذا غير واضح فلا تقلق حالياً ليس مهم يهمنا لاحقاً


حقول الإدخال لكلمة السر password
مشابهة جداً لما سبق ولكن النوع password
أي أنها أحد أنواع حقول الإدخال input
بلا طولة سيرة عليكم يكتب كما يلي:

كود HTML:

<form>
<input type="password" />
</form>

ويكون الناتج كما يلي:

وتستخدم هذه الطريقة بدلاً من السابقة في حقول كلمة السر
لكي لا يرى الشخص المجاور لك ما تكتب أو للحماية من بعض برامج التجسس
و الصيغة الكاملة و الأفضل تكون بإضافة الصفتين name , id لحقل الإدخال


الأزرار buttons
الأزرار في النماذج تعتبر أحد أنواع الادخالات input 
ولإنشاء زر نكتب ما يلي:

كود HTML:

<form>
<input type="button" />
</form>

ولكن يظهر بدون اسم ولإظهار اسم الزر نستعمل الخاصة value
إذاً بشكل عام الصيغة الكاملة لإنشاء زر تصبح كما يلي:

كود HTML:

<form>
<input type="button" value="shabsug"/>
</form>

ويكون الشكل الناتج للزر:

أيضاً يفضل وضع اسم وعنوان name , id للزر


خانات الاختيار الوحيد Radio Buttons
يبدو أنه لايوجد اسم محدد باللغة العربية لهذا النوع فمنهم من يسميه أزرار الراديو
ومنهم من يسميه حقول الاختيار أو خانات الاختيار الوحيد أو ...

المهم الآن طريقة العمل و الهدف منها:
الهدف هو اختيار قيمة من بين قيم متعددة
طريقة كتابة الكود ( أو الوسم أو التاغ أو tag أو الأمر البرمجي سمه كما تشاء  )

كود HTML:

<form>
<input type="radio" />
</form>

ولكن من المهم جداً أن نعرف أنه في حالة وجود هذا النوع من خانات الاختيار فإنه
غالباً يكون لدينا عدة خيارات و يجب أن نضع اسم مشترك لهذه الخانات و قيم متعددة
مثال توضيحي:

كود HTML:

<form dir="rtl">
أحمر<input type="radio" name="color" value="red"/><br/>
أصفر<input type="radio" name="color" value="yellow"/><br/>
أزرق<input type="radio" name="color" value="blue"/><br/>
</form>

نتيجة التنفيذ :

لاحظ أنه في داخل النموذج السابق وضعنا الحقول input من نواع الراديو radio
ووضعنا اسم مشترك لهذه الحقول وهو color ولكن وضعنا لكل حقل قيمة value مختلفة
عن الآخر
و الآن عندما تختار مثلاً اللون الأصفر سيتم تحديد الخيار
وعند اختيار لون آخر مثل الأصفر سيزول التحديد الأول و يتم تحديد الأصفر
وهذا الفرق الجوهري بين النوع radio و النوع checkbox في الفقرة التالية:


خانات الاختيار المتعدد checkbox
في النوع السابق لاحظنا أنه يمكننا اختيار نوع واحد فقط من الخيارات
ولكن ماذا لو كان هناك أكثر من نوع يمكن اختيارهم معاً
في هذا الحالة نلجأ إلى checkbox 
الأمر يكتب كمايلي:

كود HTML:

<form>
<input type="checkbox"/>
</form>

وفي هذا النوع كثيراً ما يكون لدينا عدة خيارات
وعندئذٍ نسمي الحقول باسم واحد ونضع قيم متعددة كما فعلنا في المثال السابق
سأعيد المثال السابق مع تغيير النوع

كود HTML:

<form dir="rtl">
أحمر<input type="checkbox" name="color" value="red"/><br/>
أصفر<input type="checkbox" name="color" value="yellow"/><br/>
أزرق<input type="checkbox" name="color" value="blue"/><br/>
</form>

النتيجة ستكون

ومن الواجب ذكره أنه في الحالتين السابقتين يمكننا أن نجعل أحد الخيارات قد تم اختياره بشكل
افتراضي
وذلك باستخدام الخاصة checked
مثال :

كود HTML:

<form dir="rtl">
أحمر<input type="radio" name="color" value="red"/><br/>
أصفر<input type="radio" name="color" value="yellow"/><br/>
أزرق<input type="radio" name="color" value="blue" checked="checked"/><br/>

عربي<input type="checkbox" name="language" value="ar" checked="checked"/><br/>
انكليزي<input type="checkbox" name="language" value="en" /><br/>
فرنسي<input type="checkbox" name="language" value="fr" checked="checked"/><br/>

</form>

لاحظ كيف وضعنا الخاصية checked ووضعنا لها القيمة checked أيضاً
وهذا أحد الفروقات بين لغتي html و xhtml حيث أنه في html ليس من الضروري وضع القيمة
أي يكفي أن نكتب اسم الخاصة checked لجعل القيمة يتم اختيارها بشكل افتراضي
مثال:

كود HTML:

<form dir="rtl">
أحمر<input type="radio" name="color" value="red"/><br/>
أزرق<input type="radio" name="color" value="blue" checked/><br/>
</form>

الزر من نوع submit
يشبه في الشكل الزر button
و لكنه يستعمل في php لإرسال كافة البيانات التي تم ملؤها في النموذج لصفحة أخرى تقوم بمعالجة البيانات أو نفس الصفحة 
صيغة الكتابة:

كود HTML:

<form>
<input type="submit"/>
</form>

حيث يأخذ الاسم Submit Query ( يعني تسليم الاستعلام )
بشكل افتراضي ويمكن أن نضع له اسم آخر باستخدام الخاصة value

كود HTML:

<form>
<input type="submit" value="إرسال"/>
</form>

الآن قد يتساءل السائل أيهما أفضل
أن نستخدم الزر button أم الزر submit
و أنا بحسب معلوماتي المتواضعة و تجاربي أرى أن النوع button يستخدم مع الجافا سكريبت java script و النوع submit يستعمل مع php


الزر من نوع Reset
يستخدم لإعادة البيانات الافتراضية في كامل النموذج
الصيغة العامة لكتابته

كود HTML:

<form>
<input type="reset" value="مسح">
</form>

مثال يوضح الفكرة:

كود HTML:

<html>
<body>

<h3>راسلنا</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
اسمك<br />
<input type="text" name="name" value="your name" /><br />
بريدك الالكتروني<br />
<input type="text" name="mail" value="your email" /><br />
التعليقات<br />
<input type="text" name="comment" value="your comment" size="50" />
<br /><br />
<input type="submit" value="إرسال">
<input type="reset" value="مسح البيانات">

</form>
</body>
</html>

النتيجة:

لاحظ أنه إذا ملأت الحقول بشيء ما ثم ضغطت على زر مسح البيانات سيتم إعادة الوضع الافتراضي
للحقول و إذا كانت فارغة ستعود فارغة


خصائص النماذج
ملاحظة : هذه الفقرة من الدرس يمكنك تجاهلها و الانتقال للتالية ( لأنها ستدرس بالتفصيل لاحقاً في Php ) أي اعتبرها للاطلاع
هناك خاصتين مهمتين من الخواص تستعملان داخل النموذج هما
action و method
تستعمل الخاصة action لتحديد المكان الذي سترسل له البيانات بعد ملئ النموذج
حيث يوضع مسار الصفحة التي ستعالج البيانات أو تترك فارغة لتعالج البيانات في نفس الصفحة
والخاصة action لتحديد طريقة إرسال البيانات إما بشكل مخفي post أو علني get
مثال:

كود PHP:

<form action="" method="get">
<input type="text" name="shabsug"/>
<input type="submit" value="أرسل"/>
</form>  

عند كتابة معلومات في حقل الإدخال و الضغط على زر أرسل سيتم إرسال ما تم كتابته
إلى نفس الصفحة للمعالجة
طبعاً الكود لا يعمل شيء حالياً ولكن من باب الشمولية في درس النماذج تم ذكره


مساحة النص الطويل textarea
يستخدم هذا الوسم في النماذج لإدخال النصوص الطويلة
مثلاً عندما تكتب موضوع أو رد في المنتدى أو تكتب رسالة في نموذج إرسال رسائل
فإنك عملياً تكتبه في textarea
مثال:

كود HTML:

<textarea >اكتب رسالتك هنا </textarea>

ويمكن التحكم في أبعاد الحقل باستخدام الخاصتين 
rows للارتفاع ( أو عدد الأعمدة )
cols للعرض ( أو عدد الصفوف )
مثال:

كود HTML:

example@example.com

وهذا الوسم يحوي جزئين فتح و إغلاق يكتب بينهما ما نريده أن يظهر بشكل افتراضي
المثال السابق ينتج عنه :




قوائم الاختيار select , option
وتستخدم لعمل قائمة تحوي عدة قيم بحيث نختار قيمة منها
وهذه تختلف قليلاً عما ورد في الاعلى فركزوا قليلاً :
نستخدم وسم select ونسميه name
و نضع بداخله عدة وسوم option هي عناصر القائمة
ولكل عنصر نضع قيمته value
( تشبه الجداول حيث يوجد في الجدول وسم خارجي tr و وسوم داخلية td )
ولعل المثال التالي يوضح ما ذكرت

كود HTML:

<html>
<body>

<form>
<select name="cars">
<option value="volvo">فولفو</option>
<option value="saab">ساب</option>
<option value="fiat" selected="selected">فيات</option>
<option value="audi">أودي</option>
</select>
</form>

</body>
</html>

النتيجة :


ولعلك لاحظت أنه يمكن استخدام الخاصة selected لوضع القيمة الافتراضية لقائمة الاختيار
حيث تم استخدامها في الكود السابق

وضع الخيارات في مجموعات
يمكن تجيمع كل عدة خيارات في مجموعة من أجل التوضيح على الزائر للموقع
باستخدام الوسم optgroup داخل الوسم select 
حيث توضع الوسوم option داخل optgroup
مثال:

كود HTML:

<form>
<select dir="rtl">
  <optgroup label="اختر القارئ">
    <option value="abdbaset">عبد الباسط عبد الصمد</option>
    <option value="afasi">مشاري العفاسي</option>
  </optgroup>
  <optgroup label="اختر المنشد">
    <option value="aboabdmalek">أبو عبد الملك</option>
    <option value="aradeh">مشاري العرادة</option>
  </optgroup>
</select>
 </form>

النتيجة:


كما يمكن إضافة الخاصة size لجعل القائمة السابقة بشكل عريض
والخاصة multiple لإتاحة إمكانية اختيار أكثر من قيمة معاً ( يمكن ذلك بالضغط على زر ctrl و الضغط على عدة قيم )
مثال :

كود HTML:

<form>
<select multiple  size="3" dir="rtl">
    <option value="abdbaset">عبد الباسط عبد الصمد</option>
    <option value="afasi">مشاري العفاسي</option>
    <option value="aboabdmalek">أبو عبد الملك</option>
    <option value="aradeh">مشاري العرادة</option>
<option value="aradeh">أحمد بوخاطر</option>

</select>
 </form>

النتيجة :



نموذج رفع الملفات:
يستخدم لتحديد صورة أو ملف من جهاز الكمبيوتر لرفعها إلى الانترنت
المثال:

كود PHP:

<input type="hidden" name="MAX_FILE_SIZE" value="100" />  

تجميع عدة عناصر داخل النموذج في مجموعة
fieldset و legend
يستعمل الوسم fieldset كوسم خارجي و داخله الوسم legend لوضع عنوان للمجموعة
ثم بقية عناصر النموذج
بالمثال تتضح الأمور:

كود HTML:

<form action="">
<fieldset dir="rtl">
<legend>المعلومات الشخصية</legend>
اسمك <input type="text" size="30" /><br />
بريدك الالكتروني <input type="text" size="30" /><br />
تاريخ الميلاد <input type="text" size="10" />
</fieldset>
</form>

النتيجة :

لاحظ كيف تم وضع إطار حول المعلومات 


وبهذا نكون باذن الله تكلمنا على كل شيء في مجال النماذج وضمن حدود xhtml
و أرجو الله تعالى أن أكون قد وفقت في الشرح 

الوظيفة :
عمل صفحة انترنت لإظهار ما يشبه نموذج التسجيل في المنتدى 
و أريد أن يضع كل من يرغب المشاركة الكود الخاص به
بحيث إذا تم وضعه في صفحة محرر الأكواد يظهر ما يلي:










وختاماً : أظن أني أثقلت عليكم في هذا الدرس
فإن رغبتم أجعل الدروس أقصر أي أجزئ الدروس الطويلة على عدة أجزاء
يمكنكم إبداء رأيكم في المشاركات أو الرسائل الخاصة هو عرض الدروس