لغه Html الدرس الثامن والاخير مع عسوووله

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

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

الدرس الثامن

القوائم SELECT و TEXTAREA

واخيراً قوائم الاختيار

وهي عرض مجموعه بيانات ونحن نختار منها واحده ويوجد اكثر من طريقه بالعرض

تطبيق الدرس بالمرفقات

وراح نستخدم الـوسم

<SELECT> . . . </‎SELECT>

لتحديد بدايه ونهايه قائمه الاختيار

ولتحديد العنصر راح نستخدم كلمه OPTION

وهذا كود راح يعطي سطر واحد وعند الضغط على المثلث راح تطلع لنا قائمه منسدله نختار منها

[HTML]<HTML>
<BODY>
<FORM>
<SELECT>
‎<OPTION> الشماليه
‎<OPTION> الغربيه‎
‎<OPTION> المحدود‎
‎<OPTION> التملك‎
‎<OPTION> الشركه
</SELECT>
</FORM>
</BODY>
</HTML>[/HTML]

اما اذا حبينا تطلع لنا القائمه تحت بعضها ونتحرك بالشريط راح نغير بالكود

اضافه SIZE عدد الاسطر اللى راح تطلع لنا وهنا اخترت 3 مناطق والباقي راح نتحركـ بالشريط حتى نوصل لها ويمكن عرض القائمه بالعدد اللى نريده

كمان راح اضيف NAME حتى نحجز موقع وهنا مهم نكتب اسم اي اسم نختاره للتعريف

[HTML]<HTML>
<BODY>
<FORM>
مناطق الخفجي
<BR>
‎<SELECT NAME="KHAFJI" SIZE="3">‎
‎<OPTION> الشماليه
‎<OPTION> الغربيه
‎<OPTION> التملك‎
‎<OPTION> الشركه‎
‎ <OPTION> المحدود‎
‎<OPTION> الكيلو‎
</SELECT>
</FORM>
</BODY>
</HTML>[/HTML]

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

وحتى يمكننا الاختيار من القائمه با اكثر من واحد راح نزيد عباره MULTIPLE بحيث يمكننا الاختيار با اكثر من قيمه او منطقه بالضغط على Ctrl والاختيار الثاني اوالثالث . . . . .

[HTML]
<HTML>
<BODY>
<FORM>
مناطق الخفجي
<BR>
‎<SELECT NAME="KHAFJI" SIZE="6" MULTIPLE>‎
‎<OPTION> الشماليه
‎<OPTION> الغربيه
‎<OPTION> التملك‎
‎<OPTION> الشركه‎
‎ <OPTION> المحدود‎
‎<OPTION> الكيلو‎
</SELECT>
</FORM>
</BODY>
</HTML>[/HTML]

وما ننسى الخصائص السابقه يمكننا استخدامها هنا مثل VALUE اعطاء قيمة لكل حقل القائمة

و SELECTED والتي نكتبها حتى نسهل اختياره يعني اختياره يظهر بصورة تلقائيه وهنا اخترت منطقه الشركه

[HTML]<HTML>
<BODY>
<FORM>
مناطق الخفجي
<BR>
‎<SELECT NAME="KHAFJI" SIZE="6" MULTIPLE>‎
‎<OPTION VALUE="1" > الشماليه
‎<OPTION VALUE="2"> الغربيه
‎<OPTION VALUE="3"> التملك‎
‎<OPTION VALUE="4" SELECTED> الشركه‎
‎ <OPTION VALUE="5"> المحدود‎
‎<OPTION VALUE="6"> الكيلو‎
</SELECT>
</FORM>
</BODY>
</HTML>[/HTML]

النوع الاخيرهو TEXTAREA

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

اما الوسم بيكون محصور بين

<TEXTAREA> . . . <‎/TEXTAREA>

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

ويمكن نحدد المساحه للنموذج مثلا هنا العرض ثلاثين والارتفاع سته6

ولاننسى الخاصية NAME

[HTML]<HTML>
<BODY>
<FORM>
<TEXTAREA NAME="COMMENTS" ROWS=6 COLS=30">
شاركـ بكتابه رايكـ هنا
</TEXTAREA>
</FORM>
</BODY>
</HTML>[/HTML]

وفي هناك خصائص للنص داخل النموذج منها الـ WRAP إلتفاف النص داخل الحقل

و الـ Virtual النص هنا اذا كتبته راح يلتف على عدة أسطر بس يوصلك على شكل سطر واحد

[HTML]
‎<TEXTAREA NAME="comments" COLS="50" ROWS="3" WRAP="virtual">‎
<‎/TEXTAREA> [/HTML]

وهنا Physical بالحالتين بالكتابه وعند استلام النص راح يلتف

[HTML]‎<TEXTAREA NAME="comments" COLS="50" ROWS="3" WRAP="physical">‎
<‎/TEXTAREA> [/HTML]

واخر شي off اكيد ماراح يلتف النص لا بالكتابه ولا بالوصول راح يوصلك بنفس الشكل الذي تم إدخاله
[HTML]
‎<TEXTAREA NAME="comments" COLS="50" ROWS="3" WRAP="off">‎
<‎/TEXTAREA> [/HTML]

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

مثال لنموذج ارسال تهنئه
[HTML]<html>
<body>
<form>
بطاقه التهنئه
<br>
<textarea name="3soOola" rows=4 cols=50>
اكتب تهنئتكـ هنا ثم ارسلها
</textarea>
</form>
</body>
</html>[/HTML]

شي جميل ورااااائع

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

هنا راح استخدم النوع submit بالوسم <INPUT> وهي بتقوم بإنشاء زر button وعند النقرعليه راح يرسل البيانات اللى تم تعبئتها بالنموذج

وباستخدام الخاصية VALUE راح نكتب العباره اللى نبيها تطلع على الزر

[HTML]‎<INPUT TYPE="submit" VALUE="اضغط هنا لإرسال البيانات">‎ [/HTML]
واذا تتذكرون النماذج راح تشوفون زرين واحد للاستمرار والارسال والثاني لتغير الاختيار او مسح الحقول

في حالة كان زوار موقعك من النوعية المترددة من الناس والذين قد يغيرون آرائهم في آخر لحظة، يمكنك أن تتيح لهم إمكانية مسح ما كتبوه في النموذج

والى إلغاء الأمر او مسح الاختيار راح نستخدم الـ reset

[HTML]‎<INPUT TYPE="reset" VALUE="مسح او تعديل الحقول">‎ [/HTML]

اتمنى من الله ان لغه الهتمل صارت سهله كثير

اعترف انها لغه صعبه وحتى تتغلب عليها وتكون عندك سهله

حاول ان تكتب او تنسخ الاكواد وتشوف النتيجه وتقوم بالتغير ببعض الخصائص وتميز اللى قاعد يتغير يتغيرها

في الاخير عسا عسووووله قدرت توضح شي بهذى الدروس

تمنياتي الصادقه بالتوفيق للكل

في امان الله

هوى العز · 24-04-2006, 09:55 AM

السلام عليكم

جميل جدا أن يشارك الشخص ما تعلمه مع الجميع

والله ملخص مفيد شامل و سهل و تعليقك عليه مسهلة اكثر و اكثر

ارفع قبعتي اعجابا بما كتبتي

احترامي

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

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

درس رائع .. وجميل .. وحفظتها عندي ^_^" بالجهاز ...
.. والتطبيق رائع وجميل .. وطبعا كل الدرووس مكمله لبعض
بمنعى اننا لانستطيع ان نطبق هذا الدرس انفرادياً عن البقيه ..
.. انتظر اجابتك ... وشكر مرة ثانيه على هذا الجهد الجبار ...

C.RONALDO · 06-05-2006, 03:17 AM

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

أجد .. الكلمات .. تعجز عن شكرك ..

ومايقدم .. هنا .. من قبلك ..

فلك .. جزيل الشكر .. والإمتنان ..

كوني بعافيه ..

الى اللقاء .. عند اللقاء .. لوقت اللقاء ..

Rayyan · 11-05-2006, 04:38 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