الدرس الخامس عشر: النماذج

الدرس الخامس عشر: النماذج

(form | input | enctype | method | action )

Form

النماذج نستخدمها دائما وفي كل المواقع تقريبا وذلك لإرسال المعلومات الي الموقع

او ادارة الموقع بمعني ادق لكي يتم معالجتها والرد عليها يتم ذلك من خلال النماذج

الوسم الاساسي هو <form></form>   وطبعا يكتب داخل وسم body

Action

هذه الخاصيه تتدرج داخل وسم form لكي تحدد الجهه التي سيتم ارسال البيانات اليها وهذه تحتاج الي لغة برمجه مثل php,ajx,cj,asp  ليس هذا موضوعنا لكن للعلم هناك بعض البرامج التي يتم تركيبها علي سيرفر الموقع والتي من شأنها ان تقوم بمعالجة البيانات ايضا يمكنك ارسال النموذج الي البريد الالكتروني

<form action="mailto:yourmail@domin.com">……….</form>

<form action="form1.php>……….</form>

Method

هذه الخاصيه تحدد الطريقه التي سيتم بها التعامل مع البيانات في العنوان المحدد وتأخذ احي قيمتين

Get تستخدم عندما تتم عملية المعالجه علي السيرفر

Post  تستخدم عندما تكون عملية المعالجه خارجيه مثل بريد الكتروني

<form action="mailto:email@domain.com" method="post">…….</form>

<form action="form1.php"method="get">……….</form>

Enctype

تستخدم هذه الخاصيه لتحديد طريقة الترميز وتأخذ احد قيمتين

Application/x-www-form-urlencoded

Text/plain

بدون الخوص في الشرح لأن هذا يتعلق بلغات البرمجه يكفي ان تعرف كيف تستخدم كل منها

عند استخدامtext/plain ستصل البيانات بهذه الطريقه

Name=hamed

Address=mansoura

Email=hamed803@yahoo.com

اما عند استخدامapplication/x-www-form-urlencoded  تكون البيانات بهذا الشكل

Name=hamed&address=mansoura&email=hamed803@yahoo.com

هكذا يتم الامر اعتقد انك تعرف ايهما افضل الان

<form action="mailto:email@domain.com" method="post" enctype="text/plain">…….</form>

Input

نبدأ بهذه الخاصيه في عملية تعريف شكل البيانات في النموذج وسنستخدم الوسم<input> لنأخذ مثال علي ذلك

<form action="mailto:email@domain.com" method="post" enctype="text/plain">

<input type="text" name="txt" value="name">

</form>

أذا كان المستخدم سيقوم بكتابة العديد من الكلمات فنستخدم textarea مكانtext

Name   لتحديد اسم الخاصيه الذي سيظهر في عملية المعالجه

Value  لوضع كلمات في هذه الخانه لكي توضح شيئا للمستخدم

نموذج لإدخال كلمة السر

password<input type="password" name="pass" size="20" maxlength="30">

size لتحديد حجم المربع الذي سيراه المستخدم

Maxlength  لتحديد عدد الحروف المدخله

نموذج لتحديد اختيار واحد

mail<input type="radio" name="sexy">

femail<input type="radio" name="sexy">

لاحظ انهما لابد وان يكونوا نفس الاسم لكي يتم اختيار احدهما فقط

خاصية الاختيار من خلال وضع علامة صح

<input type="checkbox" name"ar" checked>Arabic

<input type="checkbox" name="en">English

Checked لتحديد الاختيار الافتراضي

لنري طريقة عمل قائمه منسدله ويمكن تحديد بها اكتر من اختيار وايضا تعرض اختيارين اما المستخدم

< select multiple size="2">

<option>Egypt

<option>Saudi Arabia

<option>Emirates

<option>Qatar

<option>Bahrain

</select>

Multiple  لتحديد اختر من اختيار وذلك بالضغط عليctrl وتحديد ماتريد

Size لتحديد عدد الاختيارات التي يراها المستخدم في المربع

أحذف الخاصيتين وستري النتيجه مختلفه

لنري طريقة عمل نموذج لشرح شئ في سطور بسيطه

<textarea name="comment" cols="60" rows="10">Enter your Query

</textarea>

Cols&rows  لتحديد حجم النموذج

الان مع زر ارسال النموذج

<input type="submit" value="Sent form">

زر إعادتة النموذج الي الحاله الافتراضيه

<input type="reset" value="del">

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