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

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


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

الدرس الثامن

القوائم SELECT و TEXTAREA

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

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

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

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

<SELECT> . . . </‎SELECT>

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

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

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

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


http://hawaaworld.net/files/5215/jhy.gif


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

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

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

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

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


http://hawaaworld.net/files/5215/jhy.gif


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


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


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

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

<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>


http://hawaaworld.net/files/5215/jhy.gif


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

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

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

<TEXTAREA> . . . <‎/TEXTAREA>

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

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

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

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

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

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


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

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

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

واخر شي off اكيد ماراح يلتف النص لا بالكتابه ولا بالوصول راح يوصلك بنفس الشكل الذي تم إدخاله

‎<TEXTAREA NAME="comments" COLS="50" ROWS="3" WRAP="off">‎
<‎/TEXTAREA>


:rolleyes:

:rolleyes:

:rolleyes:

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



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

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



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


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

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

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


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

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

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


http://hawaaworld.net/files/5215/jhy.gif


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

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

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

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

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

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

هوى العز
24-04-2006, 09:55 AM
السلام عليكم

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

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

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

:101: احترامي :101:

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





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

C.RONALDO
06-05-2006, 03:17 AM
" عســـــــــــوله .. " ..




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

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

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

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





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

Rayyan
11-05-2006, 04:38 PM
مشكورة اختي عسوووله
والله انك خبرة بالكمبيتور