المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : لغة Html الدرس السابع مع عسوووله


عسوووووووووووله
24-04-2006, 02:19 AM
بسم الله الرحمن الرحيم

الدرس السابع

النماذج FORMS

لاعطاء صفحتك التفاعل يمكنك استخدام النماذج وهي الـFORMS للتفاعل بين الموقع وصاحبه والزوار

مثل معرفه الآراء او للاستبيان او للاشتراك او ارسال بريد او استفسار وتكون المعلومات محدده بذاتها ومعرفه ماعلى المتصفح الا الاختيار منها

اما بصفحتك فمن السهوله ادراجها اما التداخل بينها وبين اللغات الاخري فيتم بـ JavaScript او asp

وسم النماذج

<FORM> ... <‎/FORM>

اما الخصائص للـفورم

اول شي ACTION

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


ثاني شي هو الــ METHOD

وهي الطريقه اللى راح نحدد فيها التعامل ولها قيمتين داخليه GET وخارجيه Post

فعند البحث عن كلمه او عباره بالموقع تكون الطريقه او العمليه المطلوب تنفيذها داخليه في الموقع وهنا نستخدم GET

<FORM ACTION="someone@alraidiah.com" METHOD="post">
<‎/FORM>


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

<FORM ACTION="name and address" METHOD="get">
<‎/FORM>


مثال

تعريف النوذج بــ FORM اما طبيعه العمل بـACTION وكانت للايميل و العمليه METHOD هي ارسال معالجه خارجيه POST
<HTML>
<BODY>
< FORM ACTION="alraidiah@hotmail.com" METHOD=POST>
</FORM>
</BODY>
</HTML>


http://3e6r.net/data/media/20/bouq_line.gif


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

INPUT وهي عباره عن مستطيل يتم الكتابه بداخله وراح نستخدم كلمه TYPE لتعريف خصائص هذه البيانات وهناك عدد انواع



االنوع الاول TEXT واضيف معاه PASSWORD

اما بالنسبه لفورم او نموذج الايميل والباسورد بيكون نوعهم ادخال بيانات INPUT TYPE

للايميل TEXT

والباسووورد PASSWORD حتى يشفر المدخلات ****

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

اما الكتابه او العباره التوضيحيه اللى تظهر داخل النموذج يمكن اضافتها بـVALUE اويمكن حذفها

ولتحديد حجم الحقل SIZE اللى اقصده هنا حجم الصندوق للبيانات اي المستطيل

اما لعدد الاحرف داخل الحقل او المستطيل نحددها بـMAXLENGTH

<HTML>
<BODY>
<FORM>
قم بادخال بريدك ::
<INPUT TYPE="TEXT" NAME="e_mail3SoOola"
SIZE=30 VALUE=YOUR@ALRAIDIAH.COM MAXLENGTH=50>
الرقم السري ::
<INPUT TYPE="PASSWORD" NAME="PASS"
SIZE=15 MAXLENGTH=10>
</FORM>
</BODY>
</HTML>


http://3e6r.net/data/media/20/bouq_line.gif

النوع الثاني للنماذج هو RADIO

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

اكيد راح نعرف البيانات بـNAME نكتب اي اسم وماراح يظهر لنا لانه متغير داخلي

ونستخدم الـVALUE ونكتب اي شي فقط لاعطاء قيمه وهنا المعالجه بتكون داخليه يعني راح يعتبرها كمتغيرات او اسماء للحقول

وحتى تكون احد اللاختيارات مفعله نكتب كلمه CHECKED فتظهر النقطه داخل الدائره


<HTML>
<BODY>
<FORM>
<INPUT TYPE="RADIO" NAME="3SoOoLA" VALUE="M"CHECKED>مشترك بالمنتدي
<BR>
<INPUT TYPE="RADIO" NAME="3SoOoLA" VALUE="CH"CHECKED>مشترك بالشات
<BR>
<INPUT TYPE="RADIO" NAME="3SoOoLA" VALUE="M&CH"CHECKED>منتدي الشات
</BODY>
</HTML>

فا اذا اخترنا الثالث راح يصل النموذج بهذا الشكل

3SoOoLA=M&CH

وهنا مهم انك تعرف ان المتغير NAME وهو اسم الحقل يكون موحد

اما المتغير VALUE وهو القيمه لازم تكون متغيره


http://3e6r.net/data/media/20/bouq_line.gif


النوع الثالث هو CHECKBOX

ويستخدم لاختيار اكثر من واحد يعنى الاختيار المتعدد وهومثل المربع الصغير الموجود

بالرسايل نضغط عليه فتطلع اشاره صح ثم نختارها للحذف او للانتقال

تعريف البيانات بـNAME نكتب اي اسم وماراح يظهر لنا لانه متغير داخلي

والـVALUE لاعطاء قيمه وهنا المعالجه بتكون داخليه يعني راح يعتبرها كمتغيرات او اسماء للحقول

وحتى تكون احد اللاختيارات مفعله نكتب كلمه CHECKED فتظهر اشاره صح داخل المربع


<HTML>
<BODY>
<FORM>
<INPUT TYPE="CHECKBOX" NAME="3AM" VALUE="YES" CHECKED>
مشترك بالمنتدى العام
<BR>
<INPUT TYPE="CHECKBOX" NAME="7OOAR" VALUE="YES" CHECKED>
مشترك بمنتدى الحوار والحدث
<BR>
<INPUT TYPE="CHECKBOX" NAME="ASLIM" VALUE="YES" CHECKED>
مشترك بالمنتدى الإسلامي
<BR>
<INPUT TYPE="CHECKBOX" NAME="KHAFJ" VALUE="YES" CHECKED>
منتدى أخبار الخفجي
</BODY>
</HTML>


فا اذا اخترنا الاول و الرابع راح يصل النموذج بهذا الشكل
3AM=YES
KHAFJ=YES

لاحظ هنا بيكون العكس

المتغير NAME وهو اسم الحقل لازم يكون متغير

اما المتغير VALUE وهو القيمه تكون واحده

http://3e6r.net/data/media/20/bouq_line.gif

النوع الرابع SUBMIT ونستخدمه لارسال البيانات

النوع الخامس RESET وهي اعادة البيانات اقصد فيها التعديل بالبيانات

النوع السادس BUTTON بصراحه ناسيه استخدامها

:101: :101: :101:

ومن أجل إظهار النموذج بصورة حلوه ومرتبة وللتحكم بمكان الحقل فمن الأفضل لمصمم الصفحه وضع النموذج داخل جدول بدون حدود




<FORM>‎
‎<TABLE BORDER="0">‎
<TR>
<TD>قم بادخال بريدك ::</TD>
<TD><INPUT TYPE="TEXT" NAME="e_mail3SoOola" SIZE=30
VALUE=YOUR@ALRAIDIAH.COM
MAXLENGTH=50></TD>
</TR>
<TR>
<TD>الرقم السري ::</TD>
<TD>
<INPUT TYPE="PASSWORD" NAME="PASS" SIZE=15
MAXLENGTH=10></TD>
</TR>
<TR>
<TD><INPUT TYPE="RADIO" NAME="3SoOoLA" VALUE="YES"
CHECKED>مشترك بالمنتدي</TD>
</TR>
<TR>
<TD><INPUT TYPE="RADIO" NAME="3SoOoLA" VALUE="YES"
CHECKED>مشترك بالشات</TD>
</TR>
<TR>
<TD><INPUT TYPE="RADIO" NAME="3SoOoLA" VALUE="YES"
CHECKED> مشترك بالمنتدي والشات</TD>
</TR>
<TR>
<TD><INPUT TYPE="CHECKBOX" NAME="3SoOoLA" VALUE="YES"
CHECKED>مشترك بالمنتدى العام
</TD>
</TR>
<TR>
<TD><INPUT TYPE="CHECKBOX" NAME="3SoOoLA" VALUE="YES"
CHECKED>مشترك بمنتدى الحوار والحدث </TD>
</TR>
<TR>
<TD><INPUT TYPE="CHECKBOX" NAME="3SoOoLA" VALUE="YES"
CHECKED>مشترك بالمنتدى الإسلامي
</TD>
</TR>
<TR>
<TD><INPUT TYPE="CHECKBOX" NAME="3SoOoLA" VALUE="YES"
CHECKED> منتدى أخبار الخفجي
</TD>
</TR
<‎/TABLE>
</FORM>



وانشاء الله تستفيدون منها بصفحاتكم

:101: في امان الله:101:

أبو رائد
24-04-2006, 12:21 PM
هلا وغلا بـ عسوووله


الله يعطيك العافية


على هذا الدرس الرائع

إذا كانت الصور موجودة على جهازك

اتمنى ارسالها لي .. لكي ترفع على موقع الرائدية

وتظهر للجميع ..

لك الشكر والتقدير

C.RONALDO
24-04-2006, 12:29 PM
" عســــــــــوله .. " ..




يعطيك العافيه على الدرس ..

مجهود رائع .. كروعتك ..

كوني بخير ..





بيبـــــــــــــــاي ..

ابوليلى
24-04-2006, 03:56 PM
الله حييه
استاذه






درس رائع .. وجميل وشرح احلى ..
... وطبعا الصوره المرفقه هي عباره عن تطبيق الدرس
شاكرا لك هذا المجهود الجبار بصراحه ...