تستخدم النماذج لتحديد مدخلات مختلفة من قبل المستخدمين .
النماذج 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>
سيظهر كود النموذج في المتصفح كالتالي :
زر الارسال
يحدد <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>
سيظهر كود النموذج في المتصفح كالتالي :
اسم المستخدم : كلمة المرور :
عند كتابة بعض الاحرف داخل الحقل ووضعت كلمة المرور ثم ضغط زر "ارسال" , سيقوم المتصفح بارسال المعلومات الى المتصفح وسيتم عرض المعلومات في رابط الصفحة .
بارك الله فيك اخي الكريم
ردحذف