12- النماذج Forms - دورة تعلم لغة HTML

النماذج Forms
دورة تعلم لغة HTML

تحدثنا في الدرس السابق عن القوائم Lists ، وفي درس اليوم سنتحدث عن النماذج Forms .

النماذج Forms لها أهمية كبيرة في عالم الانترنت، في كل مرة تقوم بتسجيل الدخول الي موقع فانك تستخدم نموذج، بل انه في كل مرة تستخدم محرك بحث فانت تستخدم نموذج.. اذا يمكن ان نعرف النموذج بانه المسؤول عن أخذ بياناتك وارسالها الي السيرفر.

يمكن أن يحتوي الفورم علي عناصر ادخال مثل "text fields, radio-buttons, checkboxes, submit buttons" ، ويمكن أن يحتوي النموذج علي عناصر اخري مثل "select lists, fieldset, legend, textarea, label".

يبدأ تكوين النموذج بالوسم <form> .. مثل:

<form>

input elements عناصر الادخال

</form>

---

عناصر الادخال Input Elements :

أهم عناصر في النموذج هي عناصر الأدخال Input Elements، ووظيفتها تجميع المعلومات من المستخدم، عنصر الادخال يكون له أشكال متنوعة وذلك يعتمد علي نوع السمة المحددة له، بمعني انه يبدأ تكوين عنصر الادخال بالوسم <input> أما نوع العنصر فيحدد من خلال السمة type..

وكما ذكرنا انه من عناصر الإدخال  "text fields, radio-buttons, checkboxes, submit buttons" ، وسيتم شرح أهم عناصر الإدخال فيما يلي..

1. الحقول النصية Text Fields 
2. حقل كلمة السر Password Field
3. أزرار الراديو Radio Buttons
4. خانات الإختيار  Checkboxes
5. زر الإرسال Submit Button

---

1- الحقول النصية Text Fields :

يتم تكوين الحقول النصية Text Fields التي تحتوي علي سطر واحد بهذا الشكل </ "input type="text> ويمكن للمستخدم كتابة اي نص بها ..

مثال:

<form>
الاسم : <input type="text" name="firstname" /><br />
العنوان : <input type="text" name="lastname" />
</form>

ستكون نتيجة المثال كالتالي:

الاسم :
العنوان :

ملحوظة: عدد الحروف الافتراضي في Text Fields يكون 20 حرف.

---

2- حقل كلمة السر Password Field :

حقل كلمة السر Password Field يشبه في شكلة الحقول النصية ولكن عند الكتابة داخلة تظهر الكتابة علي شكل دوائر سوداء، ويتم تكوين حقل كلمة السر Password Field بهذا الشكل </ "input type="password > .

مثال:

<form>

كلمة السر: <input type="password" name="pwd" />

</form>

ستكون نتيجة المثال كالتالي:

كلمة السر:

---

3- أزرار الراديو Radio Buttons :

يتم تكوين Radio Buttons بهذا الشكل </ "input type="radio> ..

مثال:

<form>
<input type="radio" name="sex" value="male" /> ذكر<br />
<input type="radio" name="sex" value="female" /> أنثي
</form>

ستكون نتيجة المثال كالتالي:

ذكر
أنثي

---

4- خانات الإختيار  Checkboxes  :

يتم تكوين Checkboxes بهذا الشكل </ "input type="checkbox>، و checkbox تتيح للمستخدم إختيار أكثر من اختيار بين عدد محدد من الاختيارات .

مثال:

<form>
<input type="checkbox" name="vehicle" value="Bike" /> أمتلك دراجة<br />
<input type="checkbox" name="vehicle" value="Car" /> أمتلك سيارة
</form>

ستكون نتيجة المثال كالتالي:

أمتلك دراجة
أمتلك سيارة

---

5- زر الإرسال Submit Button :

يتم تكوين زر الإرسال (التقديم) Submit Button بهذا الشكل  </ "input type="submit>.
وهو من أهم Input Elements فهو المسؤول عن ارسال البيانات التي قمت بادخالها الي السيرفر، والصفحة التي يتم ارسال البينات اليها تكون محددة من خلال السمة action داخل الوسم <form> .

مثال:

<form name="input" action="html-tutorial.html">
<input type="submit" value="HTML دورة " />
</form>

ستكون نتيجة المثال كالتالي:

في المثال السابق الصفحة التي سيتم تحويلك لها هي التي محددة في السمة Action كما ذكرنا.

الي اللقاء في الدرس القادم من دورة تعلم HTML - مدونة مينا

التسميات: دورة تعليم لغة HTML, HTML