القائمة الرئيسية

الصفحات

النماذج forms في لغة html وعناصر الادخال input -اليمن التقني

تابعنا ليصلك كل جديد

النماذج forms في لغة html وعناصر الادخال input

ماهو نموذج الادخال في لغة html ؟

النماذج forms في لغة html وعناصر الادخال input

النموذج ( Form ) في العادة عبارة عن مجموعة عناصر توضع في الصفحة بهدف جعل المستخدم يدخل بيانات فيها.

النماذج في لغة html وعناصر الادخال


النموذج بحد ذاته ليس شيئاً يتم عرضه في الصفحة بل هو بمثابة حاوية للوسوم التي نضعها فيه. 

لاحظ في الصورة السابقة الاطار بالخط العريض هذا هو النموذج اما العناصر الظاهرة فهذه هي عناصر النموذج سنتعرف عليها لاحقا.

الفكرة الأساسية من النموذج هي تجميع المعلومات التي يدخلها المستخدم في العناصر الموضوعة فيه و إرسالها دفعة واحدة للمكان الذي سنحفظها فيه.

في هذا الدرس سنتعرف على الخصائص التي يمكن وضعها في النموذج و دور كل منها والقاء نظرة عامة على عناصر الادخال.

النماذج في  html [نماذج الادخال ]

النموذج (Form) في (HTML) هو عبارة عن كائن يضم مجموعة من العناصر التي توضع في الصفحة بهدف جعل المستخدم يدخل بيانات فيها ويتم استخدام النماذج في مختلف لغات البرمجة 

أمثلة شائعة عن  التعامل مع نماذج html هي

  •  صفحات تسجيل الدخول لموقع معين صفحات إنشاء حساب جديد 
  •  إضافة تعليق 
  •  إضافة منشور معين

 والفكرة الرئيسية من النماذج بشكل عام هي تجميع المعلومات التي يدخلها المستخدم  و إرسالها دفعة واحدة للمكان الذي سيتم الحفظ فيه.

النموذج هو  المساحة التي تحتوي على عناصر ادخال وهذا العناصر يسمى عناصر النموذج وهو العنصر الذي يسمح للمستخدم إدخال معلومات مثل

  •  حقل النص text fields، للاسم
  • مساحة الكتابة textarea fields،  للمعلومات الاخرى
  • القوائم المنسدلة drop-down menus، لاختيار الجنس مثلا
  •  أزرار الراديو radio buttons، لتحديد احد الخيارات
  • مربعات الاختيار checkboxes، لقبول الشروط والسياسة ملا
  •  و غيرها من أشكال النماذج المختلفة.


استخدام نماذج الادخال في html !

تستخدم نماذج HTML لتجميع أنواع مختلفة من مدخلات المستخدم مثل الاسم والجنس و كلمة المرور و البريد الالكتروني ......الخ

تستخدم النماذج في لغة الـ HTML لعمل أنواع مختلفة من الاختيارات لمدخلات المستخدم .


كيفية إضافة نموذج في الصفحة:

بشكل عام نستخدم الوسم (<form>) على النحو التالي لإضافة نموذج في الصفحة

  • <form>
  • <!-- هنا يجب إضافة كل العناصر التابعة للنموذج -->
  • </form>


هناك خصائص  لابد من تواجدهما في العنصر <form>  حتى تكتمل وظيفتة:

action: تحتوي على رابط الصفحة التي ستذهب إليها عندما تقوم بالضغط على زر إرسال.

method: تحدد كيفية إرسال البيانات التي تم إدخالها في النموذج، ولها طريقتين، GET و POST.

سيتم شرح هذه السمات او الخصائص لاحقا في هذا الدرس بشكل مفصل

وعادةً ما ترسل هذة البيانات إلى المستضيف (Server) حيث يتم تخزينها هناك. ويتم معالجة هذة البيانات بإستخدام لغات البرمجة التي تعمل على المستضيف مثل PHP

 شرح مختصر لمفهمو النماذج في html  إذن فالنموذج يتكون من مجموعة من الحقول تعمل مع بعضها البعض لإنجاز وظيفة معينة، على سبيل المثال، نموذج تسجيل الدخول في كل المواقع تقريباً يتكون من ثلاثة حقول:

  • حقل نص text لاسم المستخدم او البريد الالكتروني
  • حقل نص text للرمز من اجل ادخال الرمز
  • زر button للتاكيد او من اجل تسجيل الدخول عند الضغط عليه

مثال انشاء نموذج html مع عناصر الادخال سوف تتعرف على باقي العناصر في هذا المقال

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>النماذج في لغة html</title>
  </head>
  <body dir="rtl">
<form class="" action="index.php" method="get" enctype="multipart/form-data" style="background-color: lightblue; ">

  <fieldset>
    <legend>انشاء حساب</legend>
    <label for="">الاسم الثلاثي</label>

    <input type="text" name="username" value="" required placeholder="الاسم الثلاثي"><br/>
    <label for="remembermee">اسم العائلة</label>
    <input type="text" name="username" value="" required placeholder="اسم العائلة" style="background-color:lightgreen;"><br/>
    <input type="text" name="password" value="" required placeholder="كلمة السر"> <br />
    <input type="text" name="password" value="" required placeholder="تاكيد كلمة السر"> <br />
    <label for="phonenum">رقم الهاتف</label>
    <input type="tel" name="phonenumber" value="" placeholder="77777777" id="phonenum" style="background-color:lightyellow;">
<label for="remembermee">الموافقة على سياسة الاستخدام</label>
    <input type="checkbox" name="rememberme" id="remembermee" value="" checked><br />

    <button type="submit" name="submitt" style="background-color:cyan;">إنشاء حساب</button>
  </fieldset>
</form>
  </body>
</html>

سيكون خرج الكود السابق كما في التالي لاحظ ان عناصر النموذج لون الخلفية مختلفة وذلك باستخدام CSS 

خرج كود النماذج في html و عناصر الادخال


كل نموذج تقوم بإضافته يجب أن تضع فيه زر واحد نوعه submit على النحو التالي     <input type="submit">   بهدف إعلام المتصفح أن هذا الزر يتم استخدامه لإرسال البيانات المدخلة في النموذج إلى الموقع، وعند النقر على زر من هذا النوع يتوقع المتصفح أنه يجب عرض صفحة جديدة للمستخدم استناداً للبيانات التي تم تمريرها للنموذج.

خصائص وسمات النموذج form  في لغة html

السمة Action

action تحدد هذه السمة  العمل التي يتعين القيام بها عند الضغط على زر الارسال وهذه السمه تحديد أين سيتم إرسال محتوى النموذج عند النقر على الزر الذي نوعه submit نقوم بإضافة الخاصية action و تمرير رابط الموقع الذي سيتلقى البيانات منها.

عادة ، يتم إرسال بيانات النموذج إلى صفحة ويب على الخادم عندما ينقر المستخدم على زر الإرسال.

في المثال التالي ، يتم إرسال بيانات النموذج إلى صفحة على الخادم تسمى “/action_page.php”. تحتوي هذه الصفحة على برنامج نصي من جانب الخادم يعالج بيانات النموذج:

<form action="/action_page.php">

إذا تم حدف السمة  action ، فسيتم تعيين الإجراء على الصفحة الحالية.

الموقع يمكنه أن يعرض البيانات كما هي بداخل صفحة أخرى و يمكنه إجراء تعديل عليها و حفظها في قاعدة بيانات إلخ..
هذه الأمور ستتعلمها حين تتعلم كيفية تطوير موقع كامل و ليس الآن لأنك حالياً تتعلم الجزء الخاص بتصميم الصفحات فقط.
في المثال التالي قمنا بتحديد أن بيانات النموذج سيتم إرسالها لصفحة أخرى في موقع اليمن التقني قمنا بتجهيزها مسبقاً لتلقي بيانات المستخدم بأسلوب post  و من ثم عرضها كما هي.
  • <form action="https://thedigitalyemen.com/html/action-page.php" method="post">
  • Username<br>
  • <input type="text" name="username"><br><br>
  • Password<br>
  • <input type="password" name="password"><br><br>
  • <input type="submit" value="Login">
  • </form>

 

السمة TARGET

   تحدد هذه السمة طريقة فتح الصفحة الهدف بعد النقر على زر الإرسال من طرف المستخدم، و هذا فقط في حالة ما إذا كانت مبرمَجة من أجل توجيه الناقر إلى مكان آخر كالذي تفعله استمارات Sign Up و Log In و غيرها... لديها خمس قيم خاصة و هم :

  • _self في حال أردت أن يتم فتح الصفحة الجديدة مكان الصفحة المفتوحة حالياً (هذا الخيار الإفتراضي).

  • _blank في حال أردت أن يتم فتح تبويب جديد في المتصفح و فتح الصفحة فيه.

  • _top في حال أردت أن يتم فتح الصفحة الجديدة في نفس الصفحة الحالية مع إزالة أي صفحات متداخلة موضوعة فيها.

  • _parent في حال أردت أن يتم فتح الصفحة الجديدة مكان الصفحة الموجودة فيها الصفحة الحالية.

  • framename في حال أردت أن يتم فتح الصفحة الجديدة بداخل إطار <iframe> ) موجود في نفس الصفحة.

في المثال التالي قمنا بإضافة نموذج عند إرسال البيانات لصفحة أخرى يقوم بفتح الصفحة الثانية في تبويب جديد.

  • <form target="_blank">
  • ...
  • </form>

في المثال التالي قمنا بإضافة نموذج عند إرسال البيانات لصفحة أخرى يقوم بفتح الصفحة الثانية بداخل إطار موضوع في نفس الصفحة إسمه  my_iframe.

  • <form target="my_iframe">
  • ...
  • </form>
  • <iframe name="my_iframe"></iframe>

السمة Method 

تحدد هذه السمة طريقة HTTP وهي طريقة نقل النص التشعبي ويتم  استخدامها عند تقديم بيانات النموذج وهي تحدد طريقة ارسال البيانات هل تقوم بتشفير البيانات ام تضعها ضمن الرابط وهكذا:

عند إرسال بيانات النموذج, يجب تحديد الأسلوب الذي سيتم إعتماده لنقل البيانات و هنا يوجد أسلوبين أساسيين هما post و get.
لتحديد أسلوب إرسال البيانات في النموذج نضيف الخاصية method و نمرر لها إما القيمة get و إما القيمة post كالتالي.

  • <!-- get إذا كنا سنستخدم أسلوب -->
  • <form method="get">
  • <!-- post إذا كنا سنستخدم أسلوب -->
  • <form method="post">

الفرق بين اسلوب get و اسلوب post في نماذج html

كمصمم صفحات ( Web Designer ) لا يهمك إطلاقاً معرفة الفرق بين أساليب إرسال البيانات لأن هذا الأمر يقع على عاتق مطور الموقع ( Web Developer )الذي يتولى برمجته و بالطبع ستفهم ذلك بدقة أكثر حين تبدأ مستقبلاً بتعلم برمجة المواقع.

أسلوب get:

  • البيانات المدخلة في النموذج يتم إضافتها لرابط الصفحة التي سيتم إرسالها لها.

  • رابط الصفحة محدود بعدد الأحرف حيث لا يمكن أن يتجاوز حجم الرابط 2048 حرفاً.

  • بما أن كل البيانات التي يتم إرسالها تكون مرئية في الرابط فإن هذا الأسلوب لا يصلح في حال كانت البيانات المرسلة حساسة مثل كلمة مرور المستخدم.

  • هذا الأسلوب ممتاز في حال كنت تريد إتاحة حفظ الصفحة كمرجع Bookmark ).

 أسلوب post:

  • البيانات المدخلة في النموذج يتم إرسالها بشكل لا يراه المستخدم العادي.

  • يمكنك إرسال ما شئت من البيانات بدون القلق حول حجم البيانات التي سيتم إرسالها.

  • هذا الأسلوب جيد في حال كانت البيانات المرسلة حساسة مثل كلمة مرور المستخدم أو معلومات بطاقته الإئتمانية.

  • هذا الأسلوب غير مفيد في حال كنت تريد إتاحة حفظ الصفحة كمرجع Bookmark ).


السمة NAME

   تعتبر هذه السمة أساسية في حالة تعدد عناصر <form> في نفس الصفحة.

أي وسم موضوع في النموذج <form> بهدف أن يدخل المستخدم بياناته فيه أو أن يختار بياناته منه يجب أن يملك الخاصية name مع الإشارة إلى أنه يجب إعطاء كل وسم قيمة مختلفة للخاصية name كالتالي.

مثال على السمة name 
  • <form>
  • <!-- "username" و أعطيناها القيمة name هذا الوسم أضفنا فيه الخاصية -->
  • <input type="text" name="username" placeholder="اسم المستخدم" >
  • <!-- "password" و أعطيناها القيمة name هذا الوسم أضفنا فيه الخاصية -->
  • <input type="password" name="password">
  • <!-- لأننا لن ندخل قيمة فيه name هذا الوسم لا يحتاج أن نضيف فيه الخاصية -->
  • <input type="submit">
  • </form>


الكلمة  name المعطاة للوسوم لا تظهر أمام المستخدم و لكنها تجعل المتصفح يقوم بتخزين ما يدخله المستخدم في المربع الأول بإسم  username و ما يدخله في المربع الثاني بإسم  password بحيث تصبح كل معلومة تم إدخالها تملك قيمة مفتاحية تميزها عن غيرها.

هنا إذا إفترضنا أن المستخدم أدخل القيمة Mhamad  في أول مربع نص و القيمة  1234 في ثاني مربع فإنه سيخزن القيم برمجياً على هذا الشكل البسيط.
  • [
  • username: "Mhamad",
  • password: "1234"
  • ]

السمة novalidate

  السمة novalidate هي عبارة عن سمة بولينية (Boolean Attribute) أو ما تعرف بسمة ذات قيمة منطقية، و السمة البولينية هي سمة ذات تأثير وحيد حيث عند تواجدها في العنصر يفعّل تأثيرها، و عند غيابها يعطّل تأثيرها، و يقحَم سوى اسمها أو يقحَم فراغ بين Cotations قيمتها أو يقحَم اسمها بين Cotations قيمتها؛ تخوّل السمة novalidate  عدم التحقق من البيانات عند إرسالها.

يتم تفعيل هذه الخاصية او السمه عبر كتابتها كما في المثال التالي:

  • <form novalidate>
  • ...
  • </form>

عندما يتم إعطاء الوسم إسم بواسطة الخاصية name فإنك تجد المتصفح يصبح قادر على عرض إقتراحات لك عندما تقوم بملئه.
كمثال بسيط, عندما تحاول تسجيل الدخول في أي موقع تجده يظهر لك المعلومات السابقة التي استخدمتها لتسجيل الدخول فيه في حال أردت اختيارها نفسها.


ملاحظة: الخاصية novalidate تعمل على أغلب المتصفحات المشهورة باستثناء متصفح Safari.

 

السمة AUTOCOMPLETE

   تأمر هذه السمة متصفح الإنترنت بإظهار اقتراحات أثناء تحرير المستخدم في حقول الإدخال، و تكون هذه الإقتراحات عبارة عن كلمات أو جمل سبق و حررها المستخدم في خانات شبيهة بالخانة التي يحرر داخلها، لذا سُميََت بـ Autocomplete أي الإكمال التلقائي، لها قيمتين خاصتين و هما :

on: هي القيمة التلقائية للسمة حيث تفعّل الإكمال التلقائي في الإستمارة.

off: تعطّل الإكمال التلقائي في الإستمارة.

    تحتوي بعض المتصفحات على خيار تفعيل أو تعطيل هذا التأثير في إعداداتها.

اليك المثال التالي حيث سنقوم بتفعيل الاكمال التلقائي:

  • <form autocomplete="on">
  • ...
  • </form>


السمة ENCTYPE

تحدّد هذه السمة نوع التشفير في بيانات الإستمارة المرسَلة إلى المخدم، و تستعمل سوى في الإرسال بطريقة post، لديها ثلاث قيم خاصة و هم :

- APPLICATION/X-WWW-FORM-URLUNCODED : هي القيمة التلقائية للسمة حيث تشفّر البيانات، و ذلك بتحويل الفراغات إلى علامة الزائد (+) و تحويل Special Characters إلى قيمها بالأساس الست عشري (Hexadecimal).

- MULTIPART/FORM-DATA : هي قيمة لا تشفر البيانات، و غالباً ما تُستعمل في حالة ما إذا كان هناك رفع الملفات إلى الإستمارة ثم إرسالها، مما يجعل عدم تشفير الملفات يحافظ على صيغتها من أجل المعالجة.

- TEXT/PLAIN : تحول الفراغات إلى علامة الزائد.


عناصر الادخال في نماذج  html 

هناك عناصر ادخال "وسوم" عديدة يمكن إضافتها في النماذج لجعل المستخدم يدخل المعلومات التي تريدها منه أو لجعله يختار إحدى المعلومات التي قمت بتجهيزها مسبقاً له و مستقبلاً ستتعرف على مكتبات جاهزة يمكنك استخدامها للحصول على وسوم رائعة يمكن إضافتها في النماذج.فيما يلي ذكرنا أهم الوسوم التي عليك معرفتها:

  • <label> يستخدم لوضع إسم خاص للعنصر الموضوع في النموذج.

  • <button> يستخدم للحصول على زر.

  • <textarea> يستخدم للحصول على مربع نص يتألف من أكثر من سطر.

  • <select> يستخدم للحصول على قائمة منسدلة يجب إختيار أحد قيمها.

  • <datalist> يستخدم للحصول على قائمة منسدلة يمكن إختيار أحد قيمها.

  • <fieldset> يستخدم لإضافة حدود للنموذج مما يظهره بشكل أجمل.

  • <input> يعتبر من أهم الوسوم حيث يمكن استخدامه للحصول على أشكال عديدة.

في الدروس القادمة سوف نقوم بشرح جميع عناصر الادخال لكن في هذا الدرس سوف نلقي على اهم وسم وهو العنصر <input>

تجميع العناصر باستخدام العنصر <fieldset>

مفهوم تجميع العناصر

تجميع العناصر يقصد به رسم حدود حول العناصر المشتركة و إعطاءها عنوان مما يظهر النموذج بشكل أجمل.
يمكنك رسم حدود حول كل عناصر النموذج و يمكنك رسم حدود حول بعض العناصر التي تربطها علاقة معينه كما هو موضح بالصورة سابقا .
إضافة حدود حول العناصر
يستخدم الوسم  <fieldset>  لإضافة حدود على شكل مربع حول عناصر النموذج مع إمكانية إضافة عنوان مميز له.
عنوان النموذج يتم إضافته بواسطة الوسم  <legend> حتى يظهر بشكل جميل جداً ضمن خطوط المربع.
مثال على تجميع العناصر واضافة عنوان
  • <form>
  • <fieldset>
  • <legend>Login Form</legend>
  • <!-- هنا نضيف العناصر التي ستظهر بداخل الحدود -->
  • </fieldset>
  • </form>
في المثال التالي قمنا بإضافة حدود و عنوان للنموذج نفسه و حدود عناوين للعناصر الموجودة فيه بشكل تظهر مقسومة لمجموعتين.
  • <form>
  • <fieldset>
  • <legend>Questionnaire</legend>
  • <!-- هنا وضعنا حدود و عنوان لكل العناصر التي ستظهر بداخل النموذج -->
  • <fieldset>
  • <legend>Name</legend>
  • <!-- هنا وضعنا حدود و عنوان للمجموعة الأولى بداخل النموذج -->
  • </fieldset>
  • <fieldset>
  • <legend>Favourite Language</legend>
  • <!-- هنا وضعنا حدود و عنوان للمجموعة الأولى بداخل النموذج -->
  • </fieldset>
  • </fieldset>
  • </form>

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

يستخدم العنصر <input>  لإنشاء عناصر تفاعلية للنماذج في صفحات الويب التي تقبل معطيات من المستخدم، ثم ترسل إلى الخادم.

وهذا العنصر فارغ أي بمعنى لايوجد لديه وسم فتح ووسم اغلاق وبالتلي لا يوجد لديه محتوى (المحتوى هو العناصر التي تكتب ما بين وسم الفتح ووسم الاغلاق لاي عنصر)

أيضا عنصر ال <input> هو عنصر شامل بحيث يمكن ان يكون مربع نص او زر او مربع اختيار او ازرار radio ولتحديد نوعه نقوم بتغيير قيمة السمة type 

أهم خاصية يجب إضافتها لهذا الوسم هي الخاصية type  التي من خلالها يتم تحديد ما هو المكون الذي نريد الحصول عليه.

بعد تحديد نوع المكون التي تريد الحصول عليها يصبج بإمكانك إضافة المزيد من الخصائص للمكون.

 النوع  Text

   هذا النوع ممثّل بقيمة 'TEXT' حيث هذه الأخيرة هي القيمة التلقائية للسمة 'TYPE'، أي أن في حالة عدم تواجد السمة 'TYPE' في عنصر 'INPUT' سيكون نوعه هو النوع Text، و هو عبارة عن حقل إدخال نصي مكوّن من سطر واحد.

   هناك سمة تعمل في جميع أنواع <input> لكن تأثيرها يتغير حسب ماهية الحقل، ففي الحقول إدخال النصوص يكون ما كُتِب في قيمتها ظاهراً في الحقل، تسمى هذه السمة بـ 'VALUE'.

  • <input type="text"> للحصول على مربع نص عادي و هذا هو النوع الإفتراضي له.

النوع  Search

  هذا النوع ممثل بقيمة 'SEARCH'، و هو عبارة عن حقل إدخال نصي مكوّن من سطر واحد، و يُستخدم للإدلاء بكلمات مفتاحية قصد البحث عنها.

النوع Tel 

   هذا النوع ممثّل بقيمة 'TEL'، و هو عبارة عن حقل إدخال نصي مكوّن من سطر واحد، و يُستخدم للإدلاء برقم الهاتف، يظهِر هذا النوع لوحة المفاتيح الرقمية في أجهزة الهواتف و التابليت.

النوع  URL

   هذا النوع ممثّل بقيمة 'URL'، و هو عبارة عن حقل إدخال نصي مكوّن من سطر واحد، و يُستخدم للإدلاء بعنوان URL لصفحة في الويب، و عند محاولة إرسال صيغة خاطئة لعنوان URL، يظهِر متصفح الإنترنت رسالة التحقق تحُث المستخدم بضرورة إقحام عنوان URL صحيح.



النوع Email 

   هذا النوع ممثّل بقيمة 'EMAIL'، و هو عبارة عن حقل إدخال نصي مكوّن من سطر واحد، و يُستخدم للإدلاء بعنوان البريد الإلكتروني، و عند محاولة إرسال عنوان بريد إلكتروني بدون علامة At (@)، يظهِر متصفح الإنترنت رسالة التحقق تحُت المستخدم بضرورة إقحام علامة At في البيان، و عند محاولة إرسال عنوان بريد إلكتروني بدون إسم نطاق، يظهِر متصفح الإنترنت رسالة التحقق تحُت المستخدم بضرورة إقحام إسم نطاق في البيان.

  • <input type="email"> الحصول على مربع نص مخصص لإدخال بريد إلكتروني.


النوع  Password

   هذا النوع ممثّل بقيمة 'PASSWORD'، و هو عبارة عن حقل إدخال نصي مكوّن من سطر واحد، و يُستخدم للإدلاء بكلمة المرور، و يظهر كل حرف مقحم في هذا الحقل عبارة عن نقطة سوداء أو علامة Asterisk (*).

  • <input type="password"> الحصول على مربع نص مخصص لإدخال كلمة المرور.

النوع Submit 

   هذا النوع ممثّل بقيمة 'SUBMIT'، و هو عبارة عن زر مخصص لإرسال بيانات الإستمارة إلى Form-handler للمعالجة أو إلى مكان سكربت بلغة معلوماتية قصد برمجتها ويتم تحديد المكان الذي سوف ترسل اليه هذه البيانات في السمة action  التابعة للوسم form.

  • <input type="submit" value="ارسال"> للحصول على زر خاص لإرسال بيانات النموذج.

   يكتب في قيمة السمة 'VALUE'  النص الذي سوف يظهر في الزر مثل ماهو موضح في المثال .

النوع  Reset

  هذا النوع ممثل بقيمة 'RESET'، و هو عبارة عن زر إذا نُقر عليه يُرجع الإستمارة إلى وضعها الإفتراضي، و كأنك فتحت الاستمارة ولم تدخل شياء حيث سيقوم بمسح البيانات المكتوبة واستبدالها بالبيانات الافتراضية ان وجدت.

  • <input type="reset"> للحصول على زر خاص لإعادة القيم الأولية لجميع عناصر النموذج.


النوع  Image

   هذا النوع ممثّل بقيمة 'IMAGE'، و هو عبارة عن زر جرافيكي مكوّن بصورة إذا نقِر عليها سترسل إحداثيتا مكان النقرة في الصورة، حيث أن X هي إحداثية العرض، و تحسَب بالبكسل (px) من يسار الصورة إلى يمينها، أما Y فهي إحداثية الإرتفاع، و تحسَب بالبكسل (px) من أعلى الصورة إلى أسفلها، و لدى هذا النوع أيضاً أربع سمات رأيناها في درس سابق الصور ألا و هن السمتين الإجباريتين 'SRC' و 'ALT'، و السمتين الإختيارين 'WIDTH' و 'HEIGHT'.

النوع Button 

   هذا النوع ممثّل بقيمة 'BUTTON'، و هو عبارة عن زر في الوضع الإفتراضي له لا يعمل شيئاً، لذا يجب مرافقته بسكربتات لغات برمجية كـ Javascript لجعله فعال، غالباً ما يقحموا فيه المطورون الأحداث البرمجية.

  • <input type="button"> الحصول على زر عادي.

النوع Number 

   هذا النوع ممثّل بقيمة 'NUMBER'، و هو عبارة عن حقل إدخال الأعداد.

   يقبل سمة بإسم 'STEP' حيث تعطى قيمتها عدد يمثل عدد خطوات الإنتقال عند التعديل على محتوى الحقل، و عند محاولة إرسال عدد غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال الأعداد المتاحة.

   و يقبل سمة بإسم 'MIN' حيث تعطى قيمتها عدد يمثل أصغر عدد متاح، و عند محاولة إرسال عدد غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال الأعداد المتاحة.

   و يقبل سمة بإسم 'MAX' حيث تعطى  قيمتها عدد يمثل أكبر عدد متاح، و عند محاولة إرسال عدد غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال الأعداد المتاحة.

  • <input type="number"> للحصول على مربع نص مخصص لإدخال الرقام.

النوع  Range

   هذا النوع ممثّل بقيمة 'RANGE'، و هو عبارة عن حقل إدخال عدد بواسطة سلم سعته التلقائية 100 و دقته التلقائية 1.

   يقبل أيضاً السمة 'STEP' حيث تحدّد دقة Range، أي بكم ينتقل من خطوة إلى الخطوة الموالية، و يقبل أيضاً السمة 'MIN' حيث تحدّد أدنى عدد في Range، و يقبل أيضاً السمة 'MAX' حيث تحدّد أقصى عدد في Range، أي سعته.

النوع  Time

   هذا النوع ممثّل بقيمة 'TIME'، و هو عبارة عن حقل إدخال التوقيت، أي الساعة و الدقيقة، و دقته التلقائية هي دقيقة واحدة، بمعنى عند التعديل فيه يتحرك التوقيت بدقيقة واحدة.

   يقبل السمة 'STEP' حيث تحدّد دقة الحقل، و يقحَم في قيمتها عدد صحيح يحدّد الثواني أو عدد عشري يحدد إما عشر الثانية (ds) أو جزء من المائة للثانية (cs) أو جزء من الألف للثانية (ms)، و عند محاولة إرسال توقيت غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال توقيت متاح.

   و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى توقيت متاح بنظام 24 ساعة، و عند محاولة إرسال توقيت غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال توقيت متاح.

   و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى توقيت متاح بنظام 24 ساعة أيضاً، و عند محاولة إرسال توقيت غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال توقيت متاح.

النوع Date 

   هذا النوع ممثّل بقيمة 'DATE'، و هو عبارة عن حقل إدخال التاريخ اليومي، أي اليوم و الشهر و السنة، و دقته التلقائية هي يوم واحد.

   يقبل السمة 'STEP' حيث تحدّد دقة الحقل، و يقحَم في قيمتها عدد يحدّد الأيام المتاحة، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

   و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى تاريخ متاح، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

   و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى تاريخ متاح، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

   أما تنسيق قيمتي 'MIN' و 'MAX' فهو على النحو التالي : اليوم-الشهر-السنة

النوع Week 

   هذا النوع ممثّل بقيمة 'WEEK'، و هو عبارة عن حقل إدخال التاريخ الأسبوعي، أي رقم الأسبوع في السنة كذا مثلاً، و دقته التلقائية هي أسبوع واحد.

   يقبل السمة 'STEP' حيث تحدّد دقة الحقل، و يقحَم في قيمتها عدد يحدّد دقة الحقل، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

   و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى أسبوع متاح، و عند محاولة إرسال أسبوع غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال أسبوع متاح.

   و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى أسبوع متاح، و عند محاولة إرسال أسبوع غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال أسبوع متاح.

   أما تنسيق قيمتي 'MIN' و 'MAX' فهو على النحو التالي : الأسبوعW-السنة

النوع Month 

   هذا النوع ممثّل بقيمة 'MONTH'، و هو عبارة عن حقل إدخال التاريخ الشهري، أي إسم الشهر في السنة كذا مثلاً، و دقته التلقائية هي شهر واحد.

   يقبل السمة 'STEP' حيث تحدّد دقة الحقل، و يقحَم في قيمتها عدد يحدّد دقة الحقل، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

   و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى شهر متاح، و عند محاولة إرسال شهر غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال شهر متاح.

   و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى شهر متاح، و عند محاولة إرسال شهر غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال شهر متاح.

   أما تنسيق قيمتي 'MIN' و 'MAX' فهو على النحو التالي : الشهر-السنة

النوع Datetime-local 

   هذا النوع ممثّل بقيمة 'DATETIME-LOCAL'، و هو عبارة عن حقل إدخال التاريخ الإجمالي، أي السنة و الشهر و اليوم و الساعة و الدقيقة و الثانية و العشر ثانية و الجزء من المائة للثانية و الجزء من الألف للثانية، علماً أن دقة الحقل التلقائية هي دقيقة واحدة.

   يقبل السمة 'STEP' حيث تحدّد دقة الحقل، و يقحَم في قيمتها عدد صحيح يحدّد الثواني أو عدد عشري يحدد إما عشر الثانية (ds) أو جزء من المائة للثانية (cs) أو جزء من الألف للثانية (ms)، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

   و يقبل السمة 'MIN' حيث يقحَم في قيمتها أدنى ما يمكن إدخاله من تاريخ في الحقل، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

   و يقبل السمة 'MAX' حيث يقحَم في قيمتها أقصى ما يمكن إدخاله من تاريخ في الحقل، و عند محاولة إرسال تاريخ غير متاح، يُظهر متصفح الإنترنت رسالة التحقق تحُث بإدخال تاريخ متاح.

   أما تنسيق قيمتي 'MIN' و 'MAX' فهو على النحو التالي : 

dscsms.الثانية:الدقيقة:الساعةTاليوم-الشهر-السنة


النوع  Checkbox

   هذا النوع ممثّل بقيمة 'CHECKBOX'، و هو عبارة عن صناديق الإختيار أو ما تعرف بخيارات التفعيل، حيث يمكّن هذا النوع المستخدم من تفعيل خيار أو أكثر من الخيارات المتاحة في الإستمارة علماً أن كل خيار من هذه الخيارات يكون مقحم بعنصر 'INPUT' خاص به، و للربط بينهم يجب أن يتوفروا على نفس قيمة السمة 'NAME'، أما ما يكون متغير بينهم فهو قيم السمة 'VALUE' حيث تمكّن المخدم من التعرف عليها عند الإرسال.

   يقبل هذا النوع سمة بولينية بإسم 'CHECKED' حيث تجعل الخيار مفعّلاً تلقائياً كقيمة افتراضية.

  • <input type="checkbox"> الحصول على زر مربع الشكل يمكن اختياره أو عدم إختياره.

النوع  Radio

   هذا النوع ممثّل بقيمة 'RADIO'، و هو عبارة عن صناديق الإختيار، حيث يمكّن هذا النوع المستخدم من تفعيل خيار واحد من الخيارات المتاحة في الإستمارة علماً أن كل خيار من هذه الخيارات يكون مقحم بعنصر 'INPUT' خاص به، و للربط بينهم يجب أن يتوفروا على نفس قيمة السمة 'NAME'، أما ما يكون متغير بينهم فهو قيم السمة 'VALUE' حيث تمكّن من التعرف عليها من طرف المخدم عند الإرسال.

   يقبل هذا النوع سمة بولينية بإسم 'CHECKED' حيث تجعل الخيار محددا تلقائياً كقيمة افتراضية ولا يمكن اعطاء السمة لاكثر من عنصر radio لهم نفس قيمة السمة name.

  • <input type="radio"> الحصول على زر دائري الشكل يمكن إختياره أو عدم اختياره.

النوع File 

   هذا النوع ممثّل بقيمة 'FILE'، و هو عبارة عن آداة رفع الملفات يتم النقر عليها من طرف المستخدم لتنبثق نافذة الرفع تمكنه من تحديد الملف المراد رفعه، ثم بالنقر على "Ouvrir / Open" يتم رفع الملف إلى المتصفح من أجل الإرسال للمعالجة في المخدم.

   يقبل هذا النوع سمة خاصة بإسم 'ACCEPT'، و هي سمة تحدد أنواع ملفات الميديا المرخص لها أن ترفَع في الآداة، و في قيمتها إمتدادات ملفات الميديا و أنواع MIME لملفات الميديا (هذه صفحة في ويكيبيديا تشرح أنواع MIME لملفات الميديا) و في حالة التعدد، تُفرَق القيم بعلامة Comma (,).

  للتذكير يجب تضمين السمة 'ENCTYPE' و اعطاء قيمتها القيمة 'MULTIPART/FORM-DATA' بهدف عدم تشفير الملفات عند إرسالها للمعالجة، و طبعاً طريقة الإرسال 'POST'.

  • <input type="file"للحصول على زر خاص لجعل المستخدم يختار ملف في جهازه.

النوع  Color

   هذا النوع ممثل بقيمة 'COLOR'، و هو عبارة عن آداة Color Picker يتم النقر عليها من طرف المستخدم لتنبثق نافذة الألوان تمكنه من تحديد اللون المراد إرساله، ثم بالنقر على "OK" يتم اختيار اللون من أجل الإرسال للمعالجة في المخدم، علما أن اللون يتم إرساله بصيغة Hexadecimal.

   سمة 'VALUE' في هذا النوع تحدد اللون التلقائي الذي يظهر في الآداة، و تعطى في  إسم اللون بصيغة Hexadecimal.

النوع  Hidden

   هذا النوع ممثل بقيمة 'HIDDEN'، و هو عبارة عن آداة مختفية في الإستمارة، مخصصة لإرسال بيانات برمجية إلى المخدم مخصصة من طرف المطور، فمثلاً إذا كانت مقحمة في قيمة 'NAME' لديها قيمة '_CHARSET_' سيبعث نوع الترميز المستعمل في إرسال بيانات الإستمارة إلى المخدم، بحيث يمكن التعديل على نوع الترميز المستعمل عبر السمة 'ACCEPT-CHARSET'.


تعليقات

تعليق واحد
إرسال تعليق
  1. اخي الكريم هل ممكن أكواد HTML محددة لصفحة تسجيل الدخول بكلمة سر مخصصة مثل 123 واسم المستخدم. مخصص مثل احمد اذا كتب اي شى ثاني يطلع له غلط الرجاء إدخل البيانات بشكل صحيح

    ردحذف

إرسال تعليق

البحث في هذه المدونة الإلكترونية

جدول المحتويات