في هذا الدرس سوف نتكلم على الوسوم الخاصة بإدراج النماذج forms في صفحات الويب، بالإضافة إلى ذلك سوف نقوم بمناقشة بعض أشكال إدخال البیانات في النموذج. هذا المثال لنموذج التسجيل في إحدى المواقع.
كما لاحظتم في الصورة أعلاه، أن أشكال النماذج تختلف
عن بعضها البعض من حيث المظهر والمبدأ، إلا أن الهدف واحد وهو استقبال المدخلات Inputs من المستخدم بغية عرضها أو تخزينها أو القيام بعمليات معالجة معينة عليها،يتم إنشاء النماذج باستخدام الوسمين <form>و </form> اللذان سيحويان بينهما مجموعة من عناصر الإدخال .<input>
بعد أن قمنا بتحديد الوسوم الخاصة بإدراج
النماذج <form> سنقوم بتعريف الوسم الخاص بإدخال البيانات <input>
طبعا تسند إلى هذا الوسم مجموعة من الخصائص أهمها type والذي تأخذ القيم
المذكورة في الجدول التالي:
|
القيمة
|
تعريف للقيمة
|
|
<input type="text">
|
تقوم هذه القيمة بإدخال النص
 |
|
<input type="password">
|
تقوم هذه القيمة بإدخال كلمة المرور
 |
|
<input type="file">
|
تقوم هذه القيمة باختيار الملف بغية رفعه
إلى الموقع.
 |
|
<input type="radio">
|
عنصر اختيار فردي
 |
|
<input type="checkbox">
|
عنصر اختيار متعدد
 |
|
<input type="submit">
|
زر الارسال
 |
|
<input type="reset">
|
زر المسح
 |
نمر ألان إلى شرح الخصائص الأخرى التي تضاف مع وسم
الإدخال <input > :
- Nameتعیین اسم لحقل البیانات.
- value
تعیین
قیمة
افتراضية
لحقل
البیانات.
- Size لتحدید حجم حقل البیانات.
- Maxlength لتعیین الحد الأقصى لعدد الحروف المدخلة في الحقل.
واليكم هذا المثال الشامل يوضح كل ما تحدثنا عنه سابقا:
نمر الآن إلى شرح شكل آخر من أشكال الاختيار التي تحدثنا
عليها (radio, checkbox) وهو عنصر قائمة
الاختيار وهذا العنصر يتم تحقيقه من خلال الوسم<select> و <select/>.
بالاضافة الى الوسم <option> و <option/> والذي من خلاله يتم تحديد عناصر القائمة، ويتم تحديد احد هذه العناصر كخيار افتراضي عن طريق تمرير الواصفة "selected="selected في وسم بدايته.
نمر الآن إلى شرح عنصر آخر من عناصر إدخال البيانات وهو
عنصر <textarea> و </textarea>
و هذا العنصر يستخدم لإدخال قيمة نصية متعددة الأسطر، وعادة ما يستخدم في كتابة
التعليقات.
يمرر
لعنصر
<textarea> قيم عددية
صحيحة عبر الواصفتين cols و rows لتحديد
عرضه وارتفاعه.انظر إلى المثال التالي:
تعليقات
إرسال تعليق