ممكن حد يتكرم ويشرحلي الـ ( Form )

[N-DES]

السلام عليكم


شباب محتاج مساعدتكم
وهيي لو احد يتكرم ويشرحلي الـ ( Form )
يعني ازرار الأدخال, وكيف اربط خانتين تسجيل دخول المنتدى بالموقع
وكيف اعمل قائمة سلايد فيها مثلاً عدة مواقع ولما اختار احدهم ياخذني فوراً

ومثلاً كيف اخلي بزر Submit أو Button رابط


وهكذا


وأرجو انو اذا واحد حاب يقلي, صعبة ومن الكلام هذا, فارجو انو ما يقولها :con2:
مع تحياتي

[N-DES]

أب يا اخوان

ما عهدناكم كذلك

[أبوعامر]

السلام عليكم ورحمة الله
بدأت في كتابة درس لك , ولكن بصراحة لم ينتهي (فالموضوع طويل )

ولكن اذا كانت لغتك الانجليزية جيدة , فاليك هذا الشرح:

http://www.iota-six.co.uk/html/25_forms.htm

[Alshajjar]

أخي ابو عامر ,,

نحن ننتظر ترجمتك

تحياتي

[N-DES]

مشكور اخي ابو عامر
وكثر الله من امثالك

لقد قرت الدرس
ولكن لم افهم جيداً


اتمنى ان يكون الشرح بسيط وانا اللي معقدها


مع تحياتي

[أبوعامر]

السلام عليكم ورحمة الله

طبعا هذا الشرح ليس بترجمه , بل مني , وسأقوم باكماله ووضعه في موقعي باذن الله
هو الان يشرح غالبية الانواع ( يتبقى فقط بعض الامور البسيطة جدا )



+++++++++++++++++++++++++++++++++++++++++++++


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

هذا درس بسيط اشرح فيه كيفيه عمل الفورم (النماذج)

اولا لابد ان نعرف الاطار العام للنموذج
حيث يتم فتح كود النموذج بالوسم

<form>

وينتهي بالوسم

</form>

في وسم فتح النموذج <form> يمكننا ان نحدد الخصائص , ولكن مايهمنا مايعرف ( الأكشن ) action وهو اسم الصفحة التي سيتم ارسال هذه

البيانات اليها لكي تتعامل معها
لو فرضنا اننا نريد ارسال هذه البيانات الى صفحة send.php , فسيكون وسم فتح الفورم كالتالي :

<form action=send.php>

الان تعالوا لنتعرف على بعض مكونات النماذج

1) صندوق ادخال نصي input type=text :
هذا الحقل خاص بادخال نص قصير مثل اسم مستخدم او كلمة سر او رابط او ماشابه ,
من خصائصه :
ويجب ان نعرف نوعه type على انه نصي type=text
حجمه size=10
اسمه name=username
قيمته value='abu3amer'
اتجاه النص dir ( للعربي dir=rtl وللانجليزي dir=ltr )
فلذلك سيكون وسمه على النحو التالي :

<input type=text name=username size=10 value='abu3amer'>

علما بان الخصائص غير الزامية ماعدا النوع والاسم

2)حقل اختيار checkbox
هذا الحقل خاص باختيار بعض الخصائص وترك البعض أو اختيارها كلها ,

وكما هو الحال مع بقية الحقول فله خصائص عدة , مثل
النوع
والاسم
والقيمة
فلذلك سيكون وسمه على النحو التالي :

<input type=checkbox name=news value=yes>

علما بان الخصائص ( الاسم النوع القيمة ) الزامية

3) حقل اختيار radio

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

الجنس ( ذكر ام انثى )
وكما هو الحال مع بقية الحقول فله خصائص عدة , مثل
النوع
والاسم
والقيمة

فلذلك سيكون وسمه على النحو التالي (مثال تحديد الجنس ):

<input type=radio name=gender value=male>ذكر
<BR>
<input type=radio name=gender value=female>انثى

( طبعا في المثال السابق <BR> وظيفتها انشاء سطر جديد )

4) حقل ارسال البيانات submit :
وهو عبارة عن زر لبدأ عملية الانتقال وارسال البيانات للصفحة الموجودة في action في خصائص الفورم في وسم البداية
طبعا خصائصه كثيره , ونحتاج منها النوع والقيمة ( القيمة ستكون عبارة عن النص الذي سيظهر على الزر مثل "أرسل" أو " إحفظ " )
فلذلك سيكون وسمه على النحو التالي :

<input type=submit value='ارسل البيانات '>

5) حقل مربع كتابة نص text area :

وهذا المربع يختلف قليلا عن الحقول السابقة
حيث له وسم بداية وله وسم نهاية
وسم البداية :

<textarea>

ووسم نهاية

</textarea>

وأيضا له خصائص عديدة
الاسم name
العرض cols (بالاحرف)
الارتفاع rows ( بالاسطر )
اتجاه النص dir ( للعربي dir=rtl وللانجليزي dir=ltr )
العرض يتم تحديده بالاحرف ( يعني عرض المربع يكفي 20 حرفا )
بينما الارتفاع يتم تحديده بعدد الاسط ( 4 اسطر مثلا )
فلذلك سيكون وسمه على النحو التالي :

<textarea name=abu3amer rows=4 cols=20>

( يمكننا ان نكتب النص الذي نريده ان يظهر في النموذج هنا , مثل ( اكتب رسالتك هنا )
</textarea>

6)القائمة المنسلدة :
ايضا هذا النوع يختلف قليلا فله وسم بداية

<select>

ووسم نهاية

</select>

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

<option>

ووسم نهاية

</option>

وله نفس خصائص بقية الحقول مثل
الاسم name
والحجم size
فمثلا لعرض قائمة منسدلة لاختيار الجنس ( ذكر او انثى )

<select name=gender>
<option>ذكر</option>
<option>أنثى</option>
</select>

لاحظ انه بالنسبة لـ option فليس له اسم وليس له قيمة , لان هو ليس بحقل ولكنه اختيار من اختيارات الحقل select

ولاتنسوني من دعائكم

أخوكم أبوعامر

[N-DES]

الف شكر اخي ابو عامر
و الشرح رااااااائع, بارك الله فيك

ولكني لم اعرف كيف اعمل القائمة المنسدلة, بحيث عندما احدد عناصرها اذهب للرابط مباشرة

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


ارجو ان توضحلي هذه النقطة, فهي الأهم عندي
والف شكر مرة اخرى وكثر الله من امثالك

[isader.com]

أخوي بهذه الحاله إنت بحاجه للجافا سكريبت...

إن شاء الله قريباً أوضعلك الكود... الحين ما اقدر..!

السلام عليكم

عماد الصدر

[N-DES]

جراك ربي كل الخير

[Ahmed Tohamy]

أخى ممكن أن تتابع السلسله معانا
http://www.swalif.net/softs/showthread.php?t=100010
هتلاقى كل اللى تحتاجه فى تصميم المواقع بأذن الله

[أبوعامر]

السلام عليكم ورحمة الله وبركاته

العفو عزيزي

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

هذا مثال بسيط :

<script language="javascript">
function go(goto){
newWindow = window.open(goto,"goto")
}
</script>

<form><select name="abu3amer" onchange="go(this.form.abu3amer.value)" >
<option value="http://www.swalif.net">سوالف</option>
<option value="http://www.abu3amer.com">ابوعامر</option></select>
</form> 

هناك طريقة ابسط , ولكنها تتطلب ان لايكون للنموذج زر ارسال وان تكون كل الاختيارات ستذهب لصفحة واحدة (ولكن القيمة سيتم اخذها من الاختيار مثلا )
مثلا لعرض موضوع في سوالف , فكل المواضيع تستخدم الصفحة showthread.php ولكن بقيم مختلفة وهي رقم الموضوع , فذلك ممكن كما يلي

                <form action="showthread.php" method="post"> 
<select name="id" onChange="submit();">
     <option value="1" selected>1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
</select>
</form> 

والفرق هو اننا استخدمنا onchange="submit();

[N-DES]

والله رائع يا اخي ابو عامر
وجزاك الله على ما تفعله


وهذا الكود الأول اللذي كنت احتاجه

<FORM NAME="swalif"><INPUT TYPE="BUTTON" VALUE="swalif" onClick="self.location.href=('http://www.swalif.net/')"></FORM>

وبوجود الكود الثاني بفضلك انحلت مشكلتي


مع تحياتي لك

[isader.com]

السكريبت اللي عندي ..هو مثل اللي قدمه لك الأخ أبو عامر الله يجزيه كل خير...

المهم بالأخير انه مشكلتك انحلت...

تمنياتي لك بالتوفيق...

عماد الصدر

[أبوعامر]

هذا من فضل ربي

[Ahmed Tohamy]

مشكور أخى على الشرح الجميل