HTML ( الدرس الثامن ) : HTML Forms

[محمد جبلي]

------------




.... HTML Forms ....

http://www.w3schools.com/html/html_forms.asp

LaLLaKy - شادل - قرّة عين أبوها - ريفان memories




مــاهــي الـ HTML Forms ؟

هـي عبـارة عـن الأدوات المستخدمـة لإدخال المعلومات من قبل الزائر لصـفـحــة ...

مثـال على الأدوات :

أزرار

قائمـة منسدلـة

مربع اختيار متعدد

مربـع نصي

......

مثالـيـن صغيريـن يوضحـان مضمون الدرســ /

حقــول نص ...

http://www.w3schools.com/html/tryit....=tryhtml_input

حقــول كلمة السر ...

http://www.w3schools.com/html/tryit...._inputpassword




-----------------------------------

كـيـفـيـة عــمل نموذج /

جمـيع عناصر النموذج من حقول نص وأزارير و قوائم يجب أن تكون داخل وسم الـ <form>

بهـذا الشكــل ...

<form>
 
هـنـا نكتب الوسوم الخـاصـه بالعنــاصــر

</form>

--------------------------------
الخاصيـة المطلـوبـه /

action

وقيمتهـا ..

صفحـة انترنت

الفائده منهـا ..

تحديد الصفحـة التي سوف يرسل اليها المعلومات عند الضغط على زر الارسال

مثــال ..

<form action="http://www.google.com.sa/search">

الخواص الاختياريـه /

الخاصيـة الاولى ..

method

وهي طريقة الارســال

ولهـا قيمتين /

القيمة الأولى / get

لإرسال البيانات عن طريـق عنوان الصفحـة .. !

فعند الضغط على زر ارسال .. سوف تجد أن عنوان الصفحـة

قد اضيفت عليه المعلومات التي كتبت في النموذج

بهذه الطريقة /

أولا .. عنوان الصفحـة

ثانيـاً .. علامـة استفهام

ثالثاً .. العناوين والقيـم

مثال للكود :

<form action="http://www.google.com.sa/search" method="get">

مثال على التغير في العنوان عند الاسال ..

قبل الارسال ..

http://www.google.com.sa

بعد الارسال ..

http://www.google.com.sa/search?hl=ar&q=LaLLaKy

مثال آخر


كيف تعمل الـ get على هذا المثال ؟؟؟؟؟

<form action="form_action.asp"  method="get">

First name: 
<input type="text" name="fname" value="Mickey" />
<br />
Last name: 
<input type="text" name="lname" value="Mouse" />
<br />
<input type="submit" value="Submit" />

</form>

نجد إن قيمة الــaction ستكون بهذا الشكل

form_action.asp?fname=Mickey&lname=Mouse

________________


القيمـة الثانيــة / post

لإرسال البيانات داخلياً .. !!

ولن يستطيع أحد مشاهدة البيانات المرسلـه

بمعنى أنـه لن تظهر المعلومات المرسلـه على عنوان الصفحـة

الفروقات بين GET و POST :

قد تقوم بسؤال التالي , متى استخدم GET ومتى استخدم POST ,

هناك بعض من الفروقات بين الطريقتين ,

اولها ان الطريقه POST يوجد بها حمايه اكثر من الطريقه GET

كما رأيت سابقا لا نقوم بطباعة المتغيرات في المتصفح.

ثانيا الطريقه POST تقوم بإرسال بيانات بكمية اكبر من الطريقة GET .

فالطريقـة GET يمكنك ارسال 100 حروف أو رقم أو رمز فقط

مثلا , لو تقوم بإرسال رقم بطاقه ائتمانيه او كلمة مرور المستخدم

فلا اعتقد انك سوف تستخدم الطريقة GET ,

لأن المعلومات سوف تظهر لمن يكون بجوارك .. !!

عموما الطريقه GET تستخدم في معظم الاوقات للاستعلام عن بيانات ,

والطريقة POST تستخدم لادخال بيانات او تحديث البيانات.

ثالث فرق هو ان الطريقه GET اسرع من الطريقه POST ,

لذلك نراها تستخدم في محركات البحث مثل google و yahoo و msn وغيرها.

وكذلك يمكنك حفظ عنوان صفحـة البحث للرجوع لها في أي وقت

ليست هذه كل الفروق بين العبارتين ولكن تعتبر هذه الفروق الاساسيه ,

وما تحتاج معرفته حاليا

اذا لم تضع هذه الخاصيـة

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

الخـاصيـة الثالـثـه ..

target

ولها أربع قيـم

 	_blank
_self
_parent
_top

وقد تم شرحهـا في درس الروابط

الخاصيـة الرابـعـه ..

ENCTYPE

هذه الخاصية تحدد طريقة الترميز التي سيتم إرسال البيانات وفقاً لها.

وهي تأخذ القيمتين التاليتين:

(يجب أن تكتب هذه القيم كما هي نصاً وحرفاً)

   * application/x-www-form-urlencoded
    * text/plain

وبدون الخوض في الأسباب التقنية التي أدت إلى إيجاد

هذين النوعين من طرق الترميز أو في أمور برمجية بعيدة

عن موضوعنا، فإن الدافع لإستخدام أي من القيمتين هو طبيعة

عملية المعالجة التي ستجرى على البيانات

وما يعنينا هنا هو الفرق بين الطريقتين

من حيث طريقة إرسال واستقبال البيانات.

فعند استخدام text/plain ستصل البيانات بالشكل التالي:

NAME=LaLLaKy
Address=MaKKaH, KSA
Email=mmm@hotmail.com

(الكلمات Name, Address, Email هي أسماء الحقول في النموذج

ونقوم نحن بتعريفها أثناء عملية تصميم النموذج أما النصوص الظاهرة

بعد إشارة المساواة فهي البيانات المدخله)

أما عند استخدام application/x-www-form-urlencoded فستصل البيانات بالشكل:

NAME=LaLLaKy&Address=MaKKaH+,+KSA&Email=mmr@hotmail.com

الخاصية name

قيمتها

هي الاسم الذي نعطيه للفورم أو النموذج . . ويستخدم

لإعطاء الـ [ form ] اسم خاص بها ,,, عندما تحتوي الصفحة أكثر من نموذج.




الخاصية accept


فائدتها إرسال قائمة تحتوي على الأنواع

التي استخدمت داخل الـform
إلى السرفر حتى يتمكن من معالجة كل نوع بشكل صحيح

(يفصل بين كل نوع وآخر بفاصلة)

يعني معالجة text تختلف عن ال button






_____________








وسـم <input>

http://www.w3schools.com/tags/tag_input.asp


ويستخدم لإدخال المعلومـات بعدة طرق ..

وهو غير مفيد بدون استخدام الخاصيـة : type



الخـاصيـة type


تستخدم لتحديد كيفيـة الادخال ..

بمعنى هـل هـو حقل نصي أو حقل كلمة مرور أو ازرار .........إلخ

ولها عدة قيــم ....

button

يستخدم للأزارير العامـه التي تبرمج من قبـل مصمم الصفحة

checkbox

مربـع للإختيــار المتعدد

بمعنـى انه بإمكانك اختيار عدة اختيارات سوياً

ويستخدم مثلا في تحديد الهوايات ..

تصميم مواقع .. الرسم .. جمع الطوابع .. كرة القدم .. التصوير .. الطبخ .. الخياطه .. .. .. الخ

file

يستخدم لتحديد مكان الملف في الجهـاز

تجدهـا بكثره في مراكز التحميـل

عبارة عن مربع نصي وبجواره ازرار ( استعراض )

hidden

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

وهو لا يظهر في الصفحـة

ولـن نتعامـل معه الان .. وانمامستقبلا باذن الله في اللغات الأخرى

image

لإدراج صورة داخل النموذج ( FORM ) ويتم التعامل معاها عنصر في النموذج

password

يستخدم لإدخال كلمة المرور .. ويتم اظهار الحروف او الارقام المدخله كـ نجمـه

radio

يستخدم لإختيار شي وواحد من بين عدة أشياء

ويستخدم مثلا في تحديد نوع الجنس : ذكر ... أنثى .. برعم

reset

عبارة عن ازرار مبرمج مسبقاً يقوم بإعاذة النموذج كما كان

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

فبمجرد الضغط على هذا الزر تمسح جميع البيانات التي كتبتها

وأخترتها وتعود كما كانت في الأصل

submit

عبارة عن زارار الارسال أو احالة المعلومات التي ادخلتها

ولا يحتاج الى برمجـه فهو مبرمج مسبقاً

يستعمل مثلا في محركات البحث

تقوم بكتابة الكلمة التي تبحث عنها في حقل النص وتضغط على هذا الازرار

فيقوم بارسال ماكتبت الى قاعدة البيانات للبحث

text

عبارة عن حقل نصي لكتابة ماتريد .. ( في سطر واحد )

يستخدم مثلا في ادخال اسم المستخدم أو محركات البحث


مثال . . من عمل الأخت شادل . . بارك الله فيها

على أكثر من نوع أو type . .

select - PASSWORD - radio - option - textarea - reset - submit

http://shadel.ma3ali.googlepages.com/form.html




---------------------------------


خاصية accept

قيمها تأخذ قيم محددة

تستخدم إذا كان

type="file"

أي زر استعراض من جهاز المستخدم


فائدتها . .

مثلاً إذا كان لدينا مركز تحميل . .

مخصص لرفع الملفات المضغوطة بصيغة zip

ونريد مجرد مايضغط المستخدم زر استعراض

فإنه يفتح له ملفاته لا يظهر منها إلا صيغة zip

أي أن خانة نوع الملف تكون على zip

فإننا نضع هذه الخاصية بهذا الشكل

accept="application/zip"

وبإمكانه بعد ذلك تغيير الخيار إلى كل الملفات أو all file

وعلى حسب نوع الملفات نضع القيمة . .

نجد القيم هنا

http://www.webmaster-toolkit.com/mime-types.shtml



___________




خاصية align

وتأخذ القيم

left
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom

ملاحظة لا تستخدم إلا إذا كانت قيمة type هي صورة

أي كالتالي

type="image"

__________




خاصية alt

قيمتها text

أي نص نقوم بكتابته

ليظهر عند المرور بالماوس على الصورة كتعليق أو وصف لها


ملاحظة لا تستخدم إلا إذا كانت قيمة type هي صورة

كالتالي

type="image"

____________



خاصية checked

قيمتها checked

أي تجعل أحد الخيارات مختارة مسبقاً

ثم يمكن للمستخدم تغييرها . .

أي أول ما تفتح الصفحة نجد العلامة عند الخيار الذي وضعنا عنده خاصية الـ checked

ثم يمكن المستخدم تغييرها فيما بعد



ملاحظة تستخدم إذا كانت قيم الـ type كالتالي

type="radio"

type="checkbox"

_________



خاصية disabled

قيمتها disabled


وظيفتها إخفاء عناصر الإدخال في بداية تحميلها

حتى لا يتمكن المستخدم من الكتابة فيها أو اختيارها


___________


خاصية maxlength

قيمتها number


وظيفتها أن نضع رقم معين يكون الحد الأقصى

لعدد الحروف المسموح بها في هذا الحقل

مثلاً عند التسجيل في منتدى المعالي . .


لو أردنا أن نكتب اسماً طويلاً .. نلاحظ عدم إمكانية تكملة الحروف

لأن الخاصية maxlength وضعت لها قيمة مثلاً 15 أي لا يسمح بأكثر من ذلك


ملاحظة لا تستخدم إلا إذا كانت قيمة type كالتالي

type="text"

_____________




خاصية name

قيمتها field_name

أي نعطي اسم للحقل المراد . .

بحيث يأخذ الحقل اسم وحيد . . لا يشابه أي حقل آخر . .

ولنا الحرية في اختيار أي اسم


وهذه الخاصية ضرورية

في حال كانت قيمة type حد القيم التالية

type="button"

type="checkbox"

type="file"

type="hidden"

type="image"

type="password"

type="text"

type="radio"

______________




خاصية readonly

قيمتها readonly

تستخدم إذا كان هذا الحقل للقراءة فقط

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

تستخدم . . في إذا كانت

 type="text"

___________



خاصية src

قيمتها رابط URL

لتحديد رابط الصورة التي تظهر . .

تستخدم إذا كانت

type="image"

___________



خاصية size

قيمتها number_of_char

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

بحيث يكون عرض الخانة أو الحقل يساوي 10 حروف مثلاً

مع انه يمكننا أن نكتب اكثر لكن لا يظهر . .

مثال . . إذا اردنا كتابة عنوان جديد في موضوع في المنتدى

ندخل عنوان طويل . . يتعدى الخانة المحددة . .

وقد تم اختيار هذا الحجم بواسطة الخاصية size

تختلف عن خاصية maxlength السابقة

لأن maxlength لا يمكن أن نكتب اكثر من العدد المحدد . .

لكن لن نهتم بها لأنها تستخدم فقط مع

type="hidden"

__________




خاصية value

قيمتها value


وظيفتها مختلفة بحسب اختلاف . . قيمة type كالتالي:


* إذا كانت قيمة type عبارة عن أزرار . . أي القيم التالية

reset أو buttons أو submit

فإن قيمة value

تمثل النص الذي سنكتبه على الزر . .




* إذا كانت type عبارة عن صورة image

فإن قيمة value تمثل

تعرف القيمـه التي سوف ترسـل عند الضغط على الصورة

إلى الصفحة المحدد بواسطة action URL السالفة الذكر . .

فعند الضغط على الصوره ( صورة واحده من بين عدة صور )

يقوم النموذج بارسال القيمة الموجوده في الخاصيـة value

على السكربت المعين

لتتم معالجة البيانات واظهار النواتج



* إذا كانت type عبارة عن checkboxes أو radio

فإن قيمة value تمثل

إعطاء قيمة لكل اختيار لن يظهر ذلك على الصفحة

لكن إذا أرسلت نتائج النموذج . . إلى الصفحة المحددة بواسطة action URL السالفة الذكر . .

فإنه سيظهر في الرسالة ما كتبناه في الـ value



* إذا كانت type عبارة عن hidden أو password أو text

فإن قيمة value تمثل

القيمة الافتراضية لعنصر الإدخال

مثلاً إذا كان لدينا حقل نريد ان يدخل المستخد فيه شيء معين

أحياناً نجد نص موجود في العق نمسحه وندخل مانريد بدلاً منه

هذا يسمى النص الافتراضي ويمكن وضعه باستخدام خاصية value

بحيث نكتب قيمتها . . النص الذي نريده أن يظهر



ملاحظة: هذه الخاصية لا يمكن استخدامها إذا كانت

type="file"

وهي ضرورية إذا كانت

type="checkbox" 
type="radio"

___________________








وســــم

<textarea>

صفحـــة الوســم ...

http://www.w3schools.com/tags/tag_textarea.asp

--------------------

عبــارهـ عن مربــع نص .. يمكن الكتابـه فيـه على شكـل أسطـر

ويمكن أن يحتوي على عدد غير محدد من الحروف والأرقام والرموز

---------------------

مثـــال لــهــ /

<textarea>
أكتــب هــنــا مــاتريــد
*** فريق التعلم الذاتي لبناء المواقع ***
</textarea>

--------------------

الخواص المطلـوبــه /

الخاصيـة الأولى ..

cols

وهي اختصـار لـ columns بمعى أعمـدة

قيمتــها عبارة عن رقــم

الخاصيـة الثانيـة ..

rows

وتعني صفوف

قيمتــها عبارة عن رقــم

مثــال عليــهــا ...

<textarea rows="2" cols="20">
The cat was playing in the garden. Suddenly a dog showed up.....
</textarea>

--------------

الخواص الاختياريـه /

الخاصيـة الأولى ...

disabled

قيمتهــا ..

disabled

وصفهــا ...

تقوم بجعـل النص الموجود داخل مربع النص لا يمكن تغييره

بمعني أنه يبقى ثابت .. لايمكنك حذف مافي المربع أو الكتابه

أي يكون ظهورها بشكل باهت

الخاصيـة الثانيـه ...

name

قيمتهـا ..

أي اسم

وصفهـا ..

تقوم باعطاء اسم معين لمربع النص

حتى يمكن التفرقه بينه وبين مربعات النص الأخرى

الخاصيـة الثالثـه ...

readonly

قيمتهــا ..

readonly

وصفهــا ...

تجعل النص الموجود في مربع النص للقراءة فقط

لايمكنك التعديل عليه

لمعرفـة الفرق بيـن disabled و readonly ...

قم بتجربتهـا بنفســك !! وحاول تجربتها على عدة متصفحـات لترى الفروقــات

-----------------------------

الخواص القياسية ...

الخاصيـه الوحيده والتي نحتاجها الان هــي

dir

وقد تم شرحهـا في دروس سابقــه

---------------------------------

مثـــال

http://www.w3schools.com/tags/showit...yhtml_textarea






_______________







وســم

<fieldset>

صفحتـه

http://www.w3schools.com/tags/tag_fieldset.asp

----------------------

يستخدم لوضع اطار حول عناصر النموذج

مثــال ...

<fieldset>
Height <input type="text" size="3" />
Weight <input type="text" size="3" />
</fieldset>

-----------------------

الخواص القياسيــه ..

نحتاج خاصيـه واحده فقط وهي

dir

وقد تم شرحها سابقاً


مثال عليه


http://www.w3schools.com/tags/tryit....yhtml_fieldset





_____________







وســم

<legend>

صفحتــه ..

http://www.w3schools.com/tags/tag_legend.asp

--------------------

يستخدم لوضع عنوان للإطار الخاص بالوسم السابق <fieldset>

مثــال ..

<fieldset>
<legend>Health information:</legend>
Height <input type="text" size="3" />
Weight <input type="text" size="3" />
</fieldset>

---------------

الخواص الاختياريــه

align

قيمتــه ...

top
bottom
left
right

وقد تم شرحه في الدروس السابقـه

----------------

الخواص القياسيــه ..

نحتاج خاصيـه واحده فقط وهي

dir

وقد تم شرحها سابقاً

------------------------

مثــال ...

http://www.w3schools.com/tags/tryit....yhtml_fieldset









______________









وسم
<select>

صفحتــه

http://www.w3schools.com/tags/tag_select.asp

------------------------

يستخدم لإنشاء قائمة منسدلـة

------------------------

يحـتـاج الى الوسم <option> لكتابة القيـم

ويحتاج الى الوسم <optgroup> لجعل القيم على شكل مجموعات

وسوف يتم شرحها بالتفصيـل بعد شرح الوسم الحالي بإذن الله


----------------------

مثــال ..

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value ="opel">Opel</option>
  <option value ="audi">Audi</option>
</select>

--------------------

الخواص الاختياريـه ..

الخاصيـه الأولـى ..

disabled

قيمتها ..

disabled

وصفهــا ..

تستخدم لتعطيل القائمـه

بحيث لا يمكنك اسدال القائمـه ولا الاختيار من القيم

الخاصيـة الثانيـة ...

multiple

وقيمتها ..

multiple

وصفهـا ..

تجعل القائمـه المنسدله على شكل قائمـه غير منسدله

بحيث يتم ظهور جميع القيم في وقت واحد واختيار عدة القيم في وقت واحد

الخاصيـة الثالثـه

name

وقيمتها ..

أي اسم

وصفهـا ..

تستخدم لتسمية القائمـه حتى يتم التفرقه بينها وبين القوائم الأخرى

الخاصيـة الرابعه ..

size

قيمتهــا ..

أرقام

وصفهــا ..

تستخدم هذه الخاصيـة لإظهار عدد معين من القيم فقط

--------------------

الخواص القياسيــه ..

نحتاج خاصيـه واحده فقط وهي

dir

وقد تم شرحها سابقاً

------------------------

أمثلــه ..

http://www.w3schools.com/tags/tryit....ryhtml_select2

http://www.w3schools.com/tags/tryit....ryhtml_select3






____________








وســم
<option>

صفحتــه

http://www.w3schools.com/tags/tag_option.asp

---------------

يستخدم كتابة القيم في القائمـه المنسدلـه <select>

ويمكنك استخدامه دون أي خواص ولكن يفضل استخدام

الخاصيـة value لإرسال القيم المختاره

الى الصفحـه المحدده في النموذج

---------------

مثــال ..

<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value ="opel" selected="selected">Opel</option>
<option value ="audi">Audi</option>
</select>

-----------------

الخواص الاختياريـه

الخاصيـه الأولى ..

disabled

قيمتها ...

disabled

وصفهــا ..

تستخدم لتعطيل القيمه المحدده

بمعنى انه لا يمكن إختيارها

... قد لا تعمل في بعض المتصفحات ...

الخاصيـة الثانيـه ..

label

قيمتها

نص



الخاصيـة الثالثه ..

selected

قيمتها ..

selected

وصفهــا ...

تحديد القيم المختراه افتراضياً

الخاصيـة الرابعـه ..

value

قيمتها ..

نص

وصفهــا

تسخدم وضع نص يتم ارساله عند اختيار هذه القيمه

------------------

الخواص القياسيــه ..

نحتاج خاصيـه واحده فقط وهي

dir

وقد تم شرحها سابقاً









____________







وسم

<optgroup>

صفحتــه

http://www.w3schools.com/tags/tag_optgroup.asp

-----------------------------

يستخدم لتقسيم القيم الموجوده في القائمة المنسدله

الى مجموعات

----------------------------

مثــال ..

<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>

------------------------

الخواص المطلوبــه ..

label

قيمتها ..

اسم المجموعـة والتي سوف تكون ظاهره في القائمة المنسدله

------------------------

الخواص الاختياريه ..

disabled

قيمتها

disabled

وصفها

لتعطيل كافة القيم الموجووده في هذه المجموعة

.. قد لا تعمل في بعض المتصفحات ..

--------------------------

الخواص القياسيــه ..

نحتاج خاصيـه واحده فقط وهي

dir

وقد تم شرحها سابقاً






____________







. . .



الوسم <label>

صفحته

http://www.w3schools.com/tags/tag_label.asp

يجعلك قادر علي الضغط علي الكلمات المجاورة لشكل معين

من أشكال النموذج بدلاً من أن تضغط عليه لاختياره

مثلاً لدينا اختيارات فبدلاً من النقر على نفس المربع . .

يمكن أن نضغط على الكلام المجاور له

فيتم الاختيار

وللتوضيع أكثر إليكم هذا المثال

<FORM>
<LABEL FOR="LABELEXAMPLE">Click here</LABEL>
<INPUT TYPE="checkbox" NAME="CHECK1" ID="LABELEXAMPLE">
</FORM>

جربوا النقر على الكلام الموجود بجانب الخيار . .

. . .


الخواص الاختيارية ..


الخاصية for

القيمة id_of_another_field

يجب أن تضع الخاصيه For="...."

لكي تقوم بتعريف الكلمات التي ستكتب بعدها

ثم تحدد أي الصناديق التي سيتم إختيارها عن طريق ID="...."

لا بد وأن تكتب بين القوسين" " نفس الاسم حتي يستطيع ان يؤثر فيها .




مثال آخر على المحرر

http://www.w3schools.com/tags/tryit....=tryhtml_label







_____________









. .

الوسم <button>

http://www.w3schools.com/tags/tag_button.asp


لإنشاء زر . .

وهناك فرق يسير بينه وبين زر input


مثال :

<button> فريق التعلم الذاتي </button>

الخواص الاختيارية


disabled


قيمتها disabled

لجعل الزر باهتاً أي غير نشط . .

لا يمكن استخدامه . .


_________


خاصية name


يأخذ قيمة . .

اسم نعطيه للزر . . خاص به دون غيره



______




خاصية type


وتأخذ القيم


button يؤدي وضيفة كالانتقال إلى صفحة . .

reset يعمل مسح للخانات

submit مثل عمل زر موافق





_________



خاصية value

لإعطاء الزر قيمة أولية

يمكن أن تتغير عن طريق السكربت فيما بعد



________________






الواجب . .


عمل نموذج . . يشمل أكثر من type

ولكم الحرية في الخواص والوسوم . .

كلما كانت الخواص والوسوم متقنة أكثر كلما كان الواجب أكثر صحة . .





. . .



.

[ريفــــــــــــــــان]

. . .

ما شاء الله جزاكم الله خير . .

سأعود بحل الواجب . .

. . .

[وصـال]

الدرس طويل


**


عمومــا إن قدرت أحله اليوم إن شاء الله . .


**

[محمد جبلي]

احساس خجولة قد يكون الدرس طويل شكلياً

ولكن عند التطبيق سوف تجدي غير ذلك

معظم مافي الدرس هذا لن نحتاجه الان .. وانما عند أخذ الـ php باذن الله تعالى

وسوف نتطرق له بشكل دائم في الphp باذن الله

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

بالتوفـــيق ,,

[عبدالمجيد]

السلام عليكم ،،

الدرس طوييييييييييييييييل ،،

لكن التطبيق ،،

طويييييييييييييييل أيضاً ،،

بس الله يعين ،،

هذا الكود :

كود PHP:

<html dir="rtl">
 <body>
  <form>
   <fieldset>
    <legend>إدخال مستخدم جديد</legend>
&nbsp;  الاسم الأول <input type="text" size="10" />
     <br />
&nbsp;  الاسم الأخير <input type="text" size="10" />
     <br />
&nbsp;  نوع الجنس <select dir="rtl">
     <option value ="ذكر">ذكر</option>
     <option value ="أنثى">أنثى</option>
     <option value="براعم">براعم</option>
    </select>
     <br />
&nbsp;    <textarea rows="10" cols="50" dir="rtl">سبب انضمامك للفريق ،،،</textarea>
     <br />
&nbsp;&nbsp;    <button value="إرسال" type="submit">إرسال</button>
   </fieldset>
  </form>
 </body>
</html> 


الصفحة مباشرة من هنا ،،

وشقرن ،،

[ريفــــــــــــــــان]

. . .


رائع . . بارك الله فيكم . .

. . .

إضافة . . قد تكون مفيدة

وضع النموذج في جدول يساعد على إعطائه شكل منظم

. . .

[aroma]

لي عودة بحل الواجب,,

مشكورين ,,

[عبدالمجيد]

السلام عليكم ،،

تطبيقاتي على ما فاتني بحمد الله ،،

من هنا ،،

مستمرون بقوة بإذن الله ،،

،،

[ريفــــــــــــــــان]

. . .

ما شاء الله . .

تطبيقات واثقة . .

تطبيق الدرس الخامس لم يكن واضحاً . .

. . .

[كوشيه دي سولاي]

هذا تطبيقي و ليس بالمستوى المطلوب و هو مليء بالأخطاء سأحاول إعادته عندما تسنح الفرصة
أحتاج لتقييمكم .

<html>
<head>
<title> job application</title>
</head>
<body>
<form>
Name:
<input type="text" name="name">
<br>
<input type="text" name="age">
<br>
<input type="text" name="college">
<br>
<input type="text" name="years of experience">
</form>
<form>
<input type="radio" name="sex" value="male">male
<br>
<input type="radio" name="sex" value=:female">female
</form>
<form>
I have experience in:
<input type="checkbox" name="computer" value="computer" />
<br / >
I have experience in "
<input type="checbox" name"English" value="english" />
</form>
<form>
<select>
<option value="1 year experience">1year experience</option>
<option value="2 years experience">2 years experience</option>
<option value="3-5 years experience">3-5 years experience</option>
<option value="more than 5 years">more than 5 years</option>
</select>
<form>
<textarea rows="3" cols="15">
further information.
</textarea>
</form>
<form>
<form action="http://www.google.com">
</form>
</body>
</html>

[memories]

>>> تطبيق الدرس <<<<

[عبدالمجيد]

المشاركة الأصلية كتبت بواسطة ريفــــــــــــــان . . . ما شاء الله . . تطبيقات واثقة . . تطبيق الدرس الخامس لم يكن واضحاً . . . . .

الدرس الخامس كان عن اللنكات ،،

فجعلت الرابط إلى الدرس السادس لأن السادس لم أستطع وضعه مع الباقي ،،

أعتقد أنه واضح ،،

تبون أعيد التطبيق لوحده لا مشكلة ،،

نحن بالخدمة ،،

تلميذكم ،،

[ريفــــــــــــــــان]

. . .

التطبيق واضح بارك الله . . فيكم ..

. . .

كوشيه دي سولاي

تطبيق رائع . .

لو وضعتِ نص . . أمام الخانات ( العمر و . . . .)

. . .

ميموريز . .

ما شاء الله . .

تطبيق . . متقن ومتميز

أحسن الله إليك ..

. . .

[ريفــــــــــــــــان]

. . .

>> تطبيق مبسط . . < <

. . .

[أم يوسف]

بارك الله فيكم..

لي عودة مع التطبيق..

ياليت ما تغلقونه اليوم..

[فرجيني]

بارك الله فيكم ..


: )

وهذا حل الواجــــب :

<html dir="rtl">

<head>
  <title>تطبيق درس النماذج</title>
</head>

<body>
  <form action="http://forum.ma3ali.net/showthread" method="post" target="_self" enctype="text/plain" name="f1">

  <input type="button" value="مرحبـــاً">

  </input>
  <br>
  حدد الأقسام المفضلة لديك في شبكة المعالي :
     <br>
 <input type="checkbox" value="Bike">العاصمة </input> <br>
  <input type="checkbox" value="Bike">الإعلام المقروء </input> <br>
 <input type="checkbox" value="Bike">الحاسب الآلي </input>  <br>
 <input type="checkbox" value="Bike">العدسات </input> <br>
 <input type="checkbox" value="Bike">البراعم </input> <br>


 <input type="file"> لتحميل ملف </input> <br>

 <input type="password">فضلاً كلمة المرور : </input> <br>

 ما تقيمك لحلقة العين الثالثة عن تركي الحميدان <br>

 <fieldset dir="rtl">
  <legend  align="left"> استطلاع </legend>
 <input type="radio" name="nn" checked="checked">تتميز بالحيادية</input> <br>
 <input type="radio" name="nn"> تشكك في براءة تركي الحميدان </input> <br>
 <input type="radio" name="nn"> تخدم المساعي الأمريكية </input>
 <br>

 </fieldset>

   مسح ما كتب
 <input type="reset"><input>

 <br>

 <input type="submit" value="إرسال"></input>
 <br>
 <input type="text" maxlength="15">لا يزيد على 15 حرف اكتب ما تريد هنا </input>
  <br>

  <input type="image" src="http://forum.ma3ali.net/image.php?u=30450&dateline=1187545211"  alt="الصورة الرمزية لفرجيني">

  </input>

       <br>
  <textarea cols="10" rows="30" disabled="disabled"> هنا نص

  </textarea>

  <textarea cols="10" rows="30" readonly="readonly"> نص هنا

  </textarea>

  <br>

اختر الرقم الآتي :
<select>
  <optgroup label="أعداد زوجية">
  <option value="2">2</option>
  <option value="4">4</option>
  <option value="6">6</option>
    </optgroup>

  <optgroup label="أعداد فردية">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
  </optgroup>

</select>
   <br>
   <br>
   <br>
   <br>

<button type="submit"> فرجيني من فريق التعلم الذاتي لبناء المواقع </button>
  </form>
</body>

</html>

[twinkle]

لا تدققون في منطقية الصفحة..... فقط انظروا للتطبيق

<html>

<head>
  <title>HTML&nbsp;Forms</title>
</head>

<body dir="rtl"  style="background-color: #CCCCFF">

<form action="" method="post">
<fieldset  style="background-color: #ECECFF">
<legend><b>البيانات الأساسية</b></legend>
<br />
الاسم الأول <input type="text" maxlength="12"></input>
<br />
الاسم الأخير <input type="text" maxlength="12"></input>
<br />
كلمة المرور <input type="password" maxlength="12"></input>
<br />
البريد الالكتروني <input type="text"></input>
<br><br>
</fieldset>
<!------------><br /><!------------>
<fieldset  style="background-color: #ECECFF">
<legend><b>المستوى الأكاديمي</b></legend>
<br />
حدد الشهادة
<select>
<option value="1">الثانوية أو مايعادلها</option>
<option value="2">دبلوم سنتين أو مايعادلها</option>
<option value="3">بكاليريوس</option>
<option value="4">ماجستير</option>
<option value="5">دكتوراه</option>
<option value="6">أستاذ مشارك</option>
<option value="7">أستاذ مساعد</option>
<option value="8">بروفيسوراه</option>
<option value="9">غير ذلك</option>
</select>
<br />
إذا كانت (غير ذلك) فحدد  ما هي  <input align="right"  maxlength="20"/>
<br><br>
</fieldset>
<!------------><br /><!------------>
<fieldset  style="background-color: #ECECFF">
<legend><b>الهوايات</b></legend>
<br />
ما هي الهوايات المحببة إليك ؟
<br />
<input type="checkbox"/ >&nbsp; القراءة
<br />
<input type="checkbox"/ >&nbsp; كتابة الخطابات الإنشائية
<br />
<input type="checkbox"/ >&nbsp; الرسم
<br />
<input type="checkbox"/ >&nbsp; الحاسب الآلي
<br />
<input type="checkbox"/ >&nbsp; كرة القدم
<br />
<input type="checkbox"/ >&nbsp; السباحة
<br />
<input type="checkbox"/ >&nbsp; أخرى &nbsp;&nbsp;<input align="right"  maxlength="20"/>
<br><br>
</fieldset>
<!------------><br /><!------------>
<fieldset  style="background-color: #ECECFF">
<legend><b>الصورة الشخصية</b></legend>
<br />
اختر الصورة الشخصية
<input type="file" />
<br><br>
&nbsp;&nbsp;&nbsp;<input type="button" value="  موافق  " />
<br><br>
</fieldset>

<!------------><br /><!------------>
<fieldset  style="background-color: #ECECFF">
<legend><b>الصورة الرمزية</b></legend>
<br />
<input type="image" align="center" alt="الصورة الشخصية" src="http://forum.ma3ali.net/images-new2/index_25.gif" name="myimg"/>
<br>
هل تود تغيير الصورة الرمزية ؟
<br>
<input type="radio" checked="checked"/ >&nbsp;نعم &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="file" />
<br>
<input type="radio"/ >&nbsp;لا
<br><br>
</fieldset>
<!------------><br /><!------------>
<fieldset  style="background-color: #ECECFF">
<legend><b>يسعدنا سماع رأيك</b></legend>

<br />
<textarea cols="60%" rows="10%" dir="rtl">

</textarea>
<br><br>
</fieldset>
<!------------><br /><!------------>
<input type="submit" value="إرسال" align="center"></input>
<input type="reset" value="مسح البيانات" align="center"></input>
</form>

</body>

</html>

انتظر ملاحظاتكم

[ريفــــــــــــــــان]

. . .

أم يوسف بانتظارك . .


فرجيني . . رائع . بارك الله فيك . .

تونكل . .

تطبيق مميز . . أحسن الله إليك . .

. . .

[زهرة البيلسان]

درس طويل لكنه ممتع ..

بارك الله فيكم و جزاكم كل خير ..


::


الحمد لله ..
هذا تطبيقي البسيط على الدرس ..


هل من ملاحظات ..؟

[ريفــــــــــــــــان]

. . .

ما شاء الله رائع

ومنطقي . .

فرق عن تطبيقي . .
. . .