10: XHTML (الاستمارات).

الاستمارات

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

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



صورة لاستمارة

و ها هو كود الأساس للاستمارة.
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<!—Here we have the elements of a form -->
</form>

كما هو مبين في المثال الوسمين المستعملان من أجل إنشاء استمارة هما <form> و </form>.
و هناك ثلاث خاصيات تكتب دائما داخلها و هي :
action : و نعطيها كقيمة الصفحة التي نريد الذهاب إليها عند إرسال الاستمارة.
method : و تأخذ كقيمة post أو get و لا يهم معرفتهما الآن لأننا سنراهما في درس ال PHP إن شاء الله.
enctype : و سنراها لاحقا إن شاء الله، لا نحتاج لشرحها الآن.
ملاحظة : يتم وضع جميع العناصر بين الوسمين <form> و </form>.

ملاحظة : في هذا الدرس سنتعلم كيفية إنشاء استمارات و ليس كيف تعمل الاستمارات.
كيف يمكنني إنشاء مثل هذه الاستمارة؟
هذا ما سنراه بعد قليل.

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

Textbox

من أجل إنشاء textbox نستعمل الخاصية type التي تكتب داخل الوسم input و في الحقيقة الخاصية type هي المسئولة عن تحديد الشكل الذي نريده يكفي أن تغيير قيمتها و سنرى جميع القيم التي يمكن أن تأخذها هذه الخاصية.
نعود ل textbox، القيمة التي يجب أن نعطيها ل type من أجل أن نحصل على textbox هي text.
و إليكم مثال يوضح ذلك.
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<p>First Name : <input type="text" name="first" /></p>
</form>

شاهد المثال
نستعمل الخاصية name من أجل إعطاء اسم للعنصر بحيث يسهل علينا استعماله في لغات أخرى مثال javascript أو php.
هناك خاصية أخرى و هي value، تمكننا هذه الخاصية من تحديد نص مسبق للtextbox.
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<p>First Name : <input type="text" name="first" value="Enter your name please" size="30" /></p>
</form>

شاهد المثال


النتيجة
انتظر، ما هو دور الخاصية size في هذا الكود؟
تقوم الخاصية size بتحديد طول ال textbox، قم بتغيير قيمتها لتتأكد من ذلك لنفسك.
نمر الآن إلى ال textbox الخاصة بكلمات المرور مثل.


صورة ل textbox كلمة المرور

و هنا نعطي القيمة password للخاصية type بحيث يصبح الكود على الشكل التالي.
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<p>Password : <input type="password" name="pass" size="30" /></p>
</form>

شاهد المثال
Textarea
في بعض الأحيان نحتاج لكتابة نصوص كبيرة لا نستطيع كتابتها في textbox عادي، هنا يأتي دور الوسم <textarea> و يمكن اعتباره textbox ضخم و ها هي صورة للبطل .


Textarea

من أجل تحديد عرض و ارتفاع ال textarea نستعمل الخاصيتين cols و rows.
و لتحديد نص مسبق لل textarea نضع الوسم <textarea> ثم نكتب النص ثم نضع الوسم </textarea>.
نخلط الجميع مع بعض لنحصل على الكود التالي :
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<p>
Description:<br />
<textarea name="desc" cols="30" row="15">
Write your text here.
</textarea>
</p>
</form>

شاهد المثال
Checkbox
صورة قبل أي كلمة.

صورة تذكارية مع checkbox
تمكنك هذه ال checkbox من تحديد اختيار أو أكثر، و للحصول عليها نستعمل الخاصية type و نعطيها كقيمة checkbox.
و أيضا يجب إضافة الخاصية name إليها و كذلك الخاصية value (و كما قلت لن نحتاجها حاليا و لكن سنحتاجها في المستقبل).
و يمكن تحديد اختيار أولي بإضافة الخاصية checked.
نجمع كل ما قلناه في كود واحد لنحصل على :
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<p>
<input type="checkbox" name="sport" value="sport"/>Sport.<br />
<input type="checkbox" name="computer" value="computer" checked/>Computer.<br />
<input type="checkbox" name="reading" value="reading"/>Reading.<br />
</p>
</form>

شاهد المثال
Radio button.
تمكننا من تحديد اختيارا من بين العديد من الاختيارات (اختيار واحد لا أكثر).
و إليكم صورة لما أعنيه.

صورة ل radio buttons
للحصول على قائمة اختيارات من نوع radio button نستعمل الخاصية type و نعطيها كقيمة radio.
ثم نستعمل الخاصية name و نعطيها نفس القيمة في جميع الاختيارات.
بالإضافة للخاصية value التي تأخذ قيم مختلفة دائما.
و يمكن تحديد اختيار أولي بإضافة الخاصية checked.
النتيجة على شكل كود.
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<p>
<input type="radio" name="choice" value="sport" checked />Sport.<br />
<input type="radio" name="choice" value="computer" />Computer.<br />
<input type="radio" name="choice" value="reading"/>Reading.<br />
</p>
</form>

شاهد المثال
File
إذا أردت أن تقوم برفع ملفات إلى موقعك مستعملا الاستمارات فيمكنك استعمال الخاصية type بحيث تعطيها كقيمة file.


صورة لرافع الملفات

و لا تنسى الخاصية name ضرورية.
وإليكم الكود الخاص بما ذكرناه للتو.
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<p>
Picture : <input type="file" name="yourfile"/>
</p>
</form>

شاهد المثال
الأمر سهل، أليس كذلك؟
Listbox.
عبارة عن قائمة على هذا الشكل :


listbox
و لإنشائها تحتاج إلى وسمين الأول <select> و هو الذي يضم باقي العناصر و التي تكتب بواسطة الوسم <option> و يأخذ الوسم الأول <select> الخاصية name أما الوسم الثاني الذي هو <option> فيأخذ الخاصية value.
و يمكن تحديد قيمة أولية للقائمة باستعمال الخاصية selected في أحد العناصر.
لنحصل على الكود النهائي.
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<p>
<select name="country">Country :<br>
<option value="Palastine">Palastine</option>
<option value="Morocco">Morocco</option>
<option value="Free_Palastine" selected>Free Palastine</option>
<option value="Free_Morocco">Free Morocco</option>
</select>
</p>
</form>

شاهد المثال
يمكن تحديد قوائم فرعية و ذلك باستعمال الوسم <optgroup> و الخاصية label و إعطائها كقيمة اسم القائمة الفرعية.
مثال لقائمة فرعية.
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<p>
<label for="first">First Name : </label>
<input type="text" name="first" id="first" />
</p>
<p>
<label for="country" id="country">Country : </label>
<select name="country">
<optgroup label="Simple One">
<option value="Palastine">Palastine</option>
<option value="Morocco">Morocco</option>
</optgroup>
<optgroup label="Free One">
<option value="Free_Palastine" selected>Free Palastine</option>
<option value="Free_Morocco">Free Morocco</option>
</optgroup>
</select>
</p>
</form>

شاهد المثال
لتحصل على قائمة بهذا الشكل :

صورة لقائمة فرعية

Label.
هذا النوع من الوسوم لا يستعمل كثيرا و هو يساعد على تحديد نص بالنسبة لكل عنصر من عناصر الاستمارة و هو يكتب على الشكل <label> و له خاصية و هي التي يتم فيها تحديد العنصر الذي نود أن نربطه بها و تكتب for و تأخذ قيمة الخاصية id للعنصر الذي نريد ربطه بها.
ملاحظة : يمكن إضافة الخاصية id إلى أي وسم يوجد في لغة ال XHTML.
و هي تكتب على الشكل.
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<p>
<label for="first">First Name : </label>
<input type="text" name="first" id="first" />
</p>
<p>
<label for="country">Country : </label>
<select name="country" id="country">
<option value="Palastine">Palastine</option>
<option value="Morocco">Morocco</option>
<option value="Free_Palastine" selected>Free Palastine</option>
<option value="Free_Morocco">Free Morocco</option>
</select>
</p>
</form>

شاهد المثال
Buttons.
هناك ثلاثة أنواع من الأزرار:
الأول : لا يصلح لشيء تقريبا و يتم إنشائه بواسطة الوسم input بإضافة الخاصية type و إعطائه كقيمة button.
الثاني : و هو الأهم بحيث يمكننا من إرسال الاستمارة إلى السرفر ليتم معالجتها و يتم إنشائه بواسطة الوسم input بإضافة الخاصية type و إعطائه كقيمة submit.
الثالث : يساعدنا هذا النوع على إفراغ الاستمارة من محتواها و يتم إنشائه بواسطة الوسم input بإضافة الخاصية type و إعطائه كقيمة reset.
تحذير : يجب إضافة الخاصية name لجميع عناصر الاستمارة.
و لا تنسوا الخاصية value فهي أيضا مهمة.
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<p><label for="email">Email : </label><input type="text" name="email" id="email" size="30" /></p>
<p>
<label for="comment">Comment : </label><br />
<textarea name="comment" id="comment" cols="30" rows="6">
</textarea>
</p>
<p>
<input type="button" name="button" value="a Simple Button" />
<input type="submit" name="submit" value="a Submit Button" />
<input type="reset" name="reset" value="a Reset Button" />
</p>
</form>

شاهد المثال
Hidden.
هناك عنصر أخر يمكن إضافته إلى الاستمارة، المشكلة أنه لا يظهر، حاليا ليست له أهمية كما هو الحال بالنسبة لباقي عناصر الاستمارة، و ستتجلى أهميتها لنا عندما نصل إلى درس PHP إن شاء الله.
و يمكن إنشاءها باستخدام الوسم <input> و الخاصية type و إعطائها القيمة hidden.
مثال :
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" />
</form>

شاهد المثال
بعد رؤية جميع عناصر الاستمارة سنرى الآن كيف يمكننا تنظيمها.

أكثر تنظيما
هناك طرق متعددة لتنظيم الاستمارات و من بينها نجد الجداول و ما يسمى ال fieldset.
أولا سنرى كيف يمكننا استعمال ال fieldset.
Fieldset.
نستعمل هذا الوسم من أجل تقسيم الاستمارة إلى أجزاء بحيث تسهل علينا التعامل معها بالإضافة لكونها تعطيها شكلا أجمل.
الوسم <fieldset> يكتب داخل الوسم <form> و يمكن إضافة عنوان للوسم <fieldset> باستعمال الوسم <legend>.
نأخذ مثال التسجيل في موقع :
نقسم معلومات التسجيل إلى معلومات متعلقة بتأمين عملية الولوج للموقع و أخرى شخصية.
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<fieldset><legend><b>Login Info.</b></legend>
<p>Username : <input type="text" name="user" /></p>
<p>Password : <input type="password" name="pass" /></p>
<p>Email : <input type="text" name="email" size="30"/></p>
</fieldset>
<fieldset><legend><b>Personal Info.</b></legend>
<p>First name : <input type="text" name="first" /></p>
<p>Last name : <input type="text" name="last" /></p>
<p>Address : <input type="text" name="address" size="50" /></p>
<p>Mobile : <input type="text" name="phone" /></p>
<p>Country :
<select name="country">
<option value="1">Palastine</option>
<option value="1">Morocco</option>
<option value="1">Egypt</option>
</select>
</p>
</fieldset>
<p align="center">
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</p>
</form>

شاهد المثال
استعمال الجداول
تعتبر الجداول من أهم الوسائل التي تستعمل في تنظيم عناصر الاستمارات.
و إليكم مثال يشرح ذلك.
كود:XHTML

<form action="index.html" method="post" enctype="multipart/form-data">
<table>
<tr>
<td width="150">Username </td>
<td>: <input type="text" name="user" /></td>
</tr>
<tr>
<td>Password </td>
<td>: <input type="password" name="pass" /></td>
</tr>
<tr>
<td>Email </td>
<td>: <input type="text" name="email" size="30"/></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</td>
</tr>
</table>
</form>

شاهد المثال
انتهى الدرس و لكن هذه ليست النهاية فمازال هناك ما يقال و لنا عودة في الجزء القادم مع تطبيق لجميع ما رأيناه في الدرس.
و في الختام أستودعكم الله الذي لا تضيع ودائعه، و السلام عليكم و رحمة الله.