الدرس 16 – النماذج HTML Forms

الدرس 16 – النماذج HTML Forms

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

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

---

النماذج 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> 

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

اسم المستخدم : 
كلمة المرور  : 

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

• غرد تغريدة
• شاركه
• شاركه
• شاركه
• شاركه