Header Ads

النماذج وطرق الادخال



تستخدم النماذج لتحديد مدخلات مختلفة من قبل المستخدمين .




النماذج Forms

تستخدم النماذج لارسال البيانات الى السيرفر .
يمكن أن يحتوي النموذج على عناصر ادخال مثل الحقول النصية و تحديد أكثر من عنصر أو تحديد عنصر واحد (أزرار راتيو) أو أزرار الموافقة والكثير وسندرس كل تلك المدخلات في هذا الدرس . كما يمكن أن يحتوي النموذج على تحديد عناصر مثل حقل نصوص و ضبط الحقول و الليجند legend والعلامات labels ... الخ .
يستخدم الوسم <form> لإنشاء نموذج HTML
<form>
.
عناصر المدخلات input
.
</form> 





النماذج - عناصر المدخلات inputs

تعتبر المدخلات <input> من أهم عناصر النموذج <form>
تستخدم المدخلات لاختيار معلومات المستخدم . ويمكن أن يتنوع عنصر المدخل الى العديد من الطرق معتمداً على نوع اللاحقة .
يمكن أن تستخدم المدخلات لتحديد حقل نص , اختيار متعدد , كلمة مرور , زر اختيار واحد , زر ارسال والكثير .
سيتم شرح أكثر العناصر المستخدمة في المدخلات .




حقل نص

تحدد مدخل نص في سطر واحد والذي يمكن المستخدم من كتابة النص :
<form>
الاسم الأول : <input type="text" name="firstname" /><br>
الاسم الثاني : <input type="text" name="lastname" />
<form/> 



سيظهر كود النموذج في المتصفح كالتالي :

الاسم الأول : الاسم الثاني :

ملاحظة : ان وسم النموذج مخفي وأيضاً العرض الافتراضي لحقل النص هو 20 حرف (بالانكليزية) .




حقل كلمة مرور

يحدد <input type="password" /> حقل كلمة مرور

مثال
<form>
كلمة المرور <input type="password" name="pwd" />
</form> 

سيظهر كود النموذج في المتصفح كالتالي :

كلمة المرور
ملاحظة : عند كتابة كلمة المرور ستصبح الأحرف مشفّرة




أزرار الاختيار الوحيد

تحدد <input type="radio" /> زر لاختيار وحيد . تسمح هذه الأزرار باختيار خيار واحد فقط من بين عدة خيارات أخرى .

مثال
<form>
<input type="radio" name="sex" value="male" /> ذكر<br />
<input type="radio" name="sex" value="female" /> انثى
</form> 

سيظهر كود النموذج في المتصفح كالتالي :

ذكر انثى





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

يحدد <input type="checkbox" /> اختيار متعدد حيث تسمح للمستخدم باختيار واحد أو أكثر من عدة خيارات متاحة له .
<form>
<input type="checkbox" name="lesson" value="HTML" /> أدرس HTML<br />
<input type="checkbox" name="lesson" value="CSS" /> أدرس CSS
</form> 

سيظهر كود النموذج في المتصفح كالتالي :

أدرس HTML أدرس CSS





زر الارسال

يحدد <input type="submit" /> زر الارسال .
يسمح زر الارسال بإرسال البيانات من النموذج الى السيرفر . يتم تحديد ارسال البيانات في النموذج من خلال اللاحقة action والتي تحدد المكان الذي سوف تذهب اليه البيانات .
<form name="input" action="send_data.php" method="get">
اسم المستخدم : <input type="text" name="user" />
كلمة المرور : <input type="password" name="pwd" />
<input type="submit" value="Submit" />
</form> 

سيظهر كود النموذج في المتصفح كالتالي :
اسم المستخدم : 
كلمة المرور  : 

عند كتابة بعض الاحرف داخل الحقل ووضعت كلمة المرور ثم ضغط زر "ارسال" , سيقوم المتصفح بارسال المعلومات الى المتصفح وسيتم عرض المعلومات في رابط الصفحة .




يتم التشغيل بواسطة Blogger.