لغة Html الدرس السابع مع عسوووله

عسوووووووووووله · 24-04-2006, 02:19 AM

بسم الله الرحمن الرحيم

الدرس السابع

النماذج FORMS

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

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

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

وسم النماذج

<FORM> ... <‎/FORM>

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

اول شي ACTION

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

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

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

فعند البحث عن كلمه او عباره بالموقع تكون الطريقه او العمليه المطلوب تنفيذها داخليه في الموقع وهنا نستخدم GET
[HTML]
<FORM ACTION="someone@alraidiah.com" METHOD="post">
<‎/FORM>
[/HTML]

اما اذا اردنا ارسال بيانات لبريد الايميل راح تكون العمليه او المعالجه خارجيه راح نستخدم Post
[HTML]
<FORM ACTION="name and address" METHOD="get">
<‎/FORM>
[/HTML]

مثال

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

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

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

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

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

للايميل TEXT

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

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

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

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

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

[HTML]<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>[/HTML]

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

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

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

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

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

[HTML]
<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>[/HTML]

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

3SoOoLA=M&CH

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

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

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

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

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

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

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

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

[HTML]
<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>
[/HTML]

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

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

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

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

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

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

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

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

[HTML]
<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>
[/HTML]

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

في امان الله

أبو رائد · 24-04-2006, 12:21 PM

هلا وغلا بـ عسوووله

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

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

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

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

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

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

C.RONALDO · 24-04-2006, 12:29 PM

" عســــــــــوله .. " ..

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

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

كوني بخير ..

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

ابوليلى · 24-04-2006, 03:56 PM

الله حييه
استاذه

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
لغة Html الدرس السادس مع عسوووله	عسوووووووووووله	:: منتدى الكمبيوتر والبرامج::	3	21-04-2006 05:37 AM
لغة Html الدرس الرابع مع عسوووله	عسوووووووووووله	:: منتدى الكمبيوتر والبرامج::	4	11-04-2006 07:45 PM
لغة Html الدرس الخامس مع عسوووله	عسوووووووووووله	:: منتدى الكمبيوتر والبرامج::	6	11-04-2006 07:35 PM
لغة HTML الدرس الثالث مع عسوووله	عسوووووووووووله	:: منتدى الكمبيوتر والبرامج::	13	07-04-2006 12:26 PM
لغة HTML الدرس الثاني مع عسوووله	عسوووووووووووله	:: منتدى الكمبيوتر والبرامج::	4	09-08-2004 04:17 AM