النماذج Forms

ما هو النموذج في لغة HTML ؟

النماذج مطلوبة لجمع أنواع مختلفة من إدخالات المستخدم ، كمعلومات الاتصال مثل الاسم أو عنوان البريد الإلكتروني أو أرقام الهاتف أو تفاصيل مثل معلومات بطاقة الائتمان ، إلخ.
تحتوي النماذج على عناصر خاصة تسمى عناصر التحكم مثل مربع الإدخال (inputbox) ومربعات الاختيار (checkboxes) وأزرار الاختيار (radio-buttons) وأزرار الإرسال (submit buttons) وما إلى ذلك.
يقوم المستخدم بتعبئة النموذج من خلال تعديل عناصر التحكم الخاصة به ، على سبيل المثال إدخال نص واختيار العناصر وما إلى ذلك ومن ثم إرسال هذا النموذج إلى خادم الويب لمزيد من المعالجة.
يتم استخدام الوسم <form> لإنشاء نموذج HTML. إليك مثال بسيط لنموذج تسجيل الدخول:

مثال
تشغيل
  1. <form action="form.php">
  2. <label>Username:<input type="text"></label>
  3. <label>Password:<input type="password"></label>
  4. <input type="submit" value="Submit">
  5. </form>

هنالك أنواعًا مختلفة من عناصر التحكم التي يمكننا استخدامها في النموذج منها:

العنصر input

العنصر <input> هو العنصر الأكثر استخدامًا في نماذج HTML.
يسمح لنا تحديد أنواع مختلفة من حقول إدخال المستخدم ، اعتمادًا على السمة type . يمكن أن يكون العنصر <input> من نوع حقل النص (text field) ، حقل كلمة المرور (password field) ، مربع الاختيار (checkbox) ، زر الاختيار (radio button) ، زر الإرسال (submit button) ، زر إعادة الضبط (reset button) ، مربع اختيار الملف (file select box) ، بالإضافة إلى العديد من أنواع الإدخال الجديدة المقدمة في HTML5 والتي سوف نتعرف عليها لاحقا.

فيما يلي سوف نشرح أنواع المدخلات الأكثر استخدامًا :

حقل النص (Text field)

حقل النص (Text field) هو منطقة ذات سطر واحد تسمح للمستخدم بإدخال النص.
يتم إنشاء عناصر تحكم إدخال النص أحادية السطر باستخدام عنصر <input> ، الذي له السمة type التي بدورها تاخذ القيمة text.

في ما يلي مثال على إدخال نص من سطر واحد يستخدم لأخذ اسم المستخدم (username):

مثال
تشغيل
  1. <form>
  2. <label for="username">Username:</label>
  3. <input type="text" name="username" id="username">
  4. </form>
ملاحظة:

يُستخدم الوسم <label> لتحديد تسميات عناصر <input>.
إذا كنت تريد أن يقوم المستخدم بإدخال عدة أسطر ، فيجب عليك استخدام العنصر <textarea> بدلاً من العنصر <input>.

حقل كلمة المرور (Password Field)

حقل كلمة المرور (Password field) مماثل لحقل النص (Text field). والفرق الوحيد بينهما سيتم إخفاء الأحرف في حقل كلمة المرور ، أي أنها تظهر كعلامات نجمية أو نقاط. وذلك لمنع شخص آخر من قراءة كلمة المرور على الشاشة. حقل كلمة المرور (Password field) عنصر تحكم إدخال نص أحادي السطر يتم إنشاؤه باستخدام العنصر <input> له السمة type التي بدورها تاخذ القيمة password.

فيما يلي مثال على إدخال كلمة بإستخدام حقل كلمة المرور (Password field) يستخدم لأخذ كلمة مرور المستخدم:

مثال
تشغيل
  1. <form>
  2. <label for="user-pwd">Password:</label>
  3. <input type="password" name="user-password" id="user-pwd">
  4. </form>

أزرار الاختيار (Radio buttons)

تُستخدم أزرار الاختيار (Radio buttons) للسماح للمستخدم بتحديد خيار واحد فقط من مجموعة خيارات محددة مسبقًا. يتم إنشاؤه باستخدام عنصر <input> له السمة type التي بدورها تاخذ القيمة radio.

في ما يلي مثال لأزرار الاختيار التي يمكن استخدامها لجمع معلومات جنس المستخدم:

مثال
تشغيل
  1. <form>
  2. <input type="radio" name="gender" id="male">
  3. <label for="male">Male</label>
  4. <input type="radio" name="gender" id="female">
  5. <label for="female">Female</label>
  6. </form>

مربعات الاختيار (Checkboxes)

تسمح مربعات الاختيار (Checkboxes) للمستخدم بتحديد خيار واحد أو أكثر من مجموعة خيارات محددة مسبقًا. يتم إنشاؤه باستخدام العنصر <input> له السمة type التي بدورها تاخذ القيمة checkbox.
في ما يلي مثال على مربعات الاختيار التي يمكن استخدامها لجمع معلومات حول هوايات المستخدم:

مثال
تشغيل
  1. <form>
  2. <input type="checkbox" name="sports" id="soccer">
  3. <label for="soccer">Soccer</label>
  4. <input type="checkbox" name="sports" id="cricket">
  5. <label for="cricket">Cricket</label>
  6. <input type="checkbox" name="sports" id="baseball">
  7. <label for="baseball">Baseball</label>
  8. </form>
ملاحظة:

إذا كنت تريد جعل زر الاختيار أو مربع الاختيار محددًا بشكل افتراضي ، فيمكنك إضافة السمة checked لعنصر الإدخال ، مثل :
<input type = "checkbox" checked>

مربع اختيار ملف (File Select box)

يسمح حقل الملف للمستخدم بالاستعراض بحثًا عن ملف محلي وإرساله كمرفق مع بيانات النموذج. تقدم متصفحات الويب مثل Google Chrome و Firefox حقل إدخال تحديد ملف مع زر تصفح يمكّن المستخدم من التنقل في محرك الأقراص الثابتة المحلي وتحديد ملف.
يتم إنشاء مربع اختيار ملف (File Select box) أيضًا باستخدام العنصر <input> ، له السمة type التي بدورها تاخذ القيمة file.

مثال
تشغيل
  1. <form>
  2. <label for="file-select">Upload:</label>
  3. <input type="file" name="upload" id="file-select">
  4. </form>

منطقة النص (Textarea)

Textarea هو عنصر تحكم يوفر مربعًا نصيًا متعدد الأسطر يسمح للمستخدم بإدخال أكثر من سطر واحد من النص. يتم إنشاءه باستخدام العنصر <textarea>.

مثال
تشغيل
  1. <form>
  2. <label for="address">Address:</label>
  3. <textarea rows="3" cols="30" name="address" id="address"></textarea>
  4. </form>

قائمة الخيارات (Select Boxes)

Select Boxes هو قائمة منسدلة بالخيارات تتيح للمستخدم تحديد خيار واحد أو أكثر من قائمة خيارات منسدلة. يتم إنشاءها بإستخدام العنصر <select> وعنصر <option>.
تحدد عناصر <option> داخل عنصر <select> بنود القائمة.

مثال
تشغيل
  1. <form>
  2. <label for="city">City:</label>
  3. <select name="city" id="city" >
  4. <option value="amman">Amman</option>
  5. <option value="zarqa">Zarqa</option>
  6. <option value="irbid">Irbid</option>
  7. </select>
  8. </form>

أزرار الإرسال (Submit) وإعادة الضبط (Reset)

يتم استخدام زر إرسال (Submit button) لإرسال بيانات النموذج إلى خادم ويب. عند النقر على زر الإرسال ، يتم إرسال بيانات النموذج إلى الملف المحدد في السمة action الموجودة داخل الوسم <form> لمعالجة البيانات المرسلة.
يعمل زر إعادة الضبط (Reset button) على إعادة ضبط كافة عناصر التحكم في النماذج إلى القيم الافتراضية. جرب المثال التالي بكتابة اسمك في حقل النص ، وانقر على زر إرسال لرؤيته عمليًا.

مثال
تشغيل
  1. <form action="about-us.html" method="post">
  2. <label for="first-name">First Name:</label>
  3. <input type="text" name="first-name" id="first-name">
  4. <input type="submit" value="Submit" >
  5. <input type="reset" value="Reset" >
  6. </form>

تجميع عناصر تحكم النموذج

يمكننا أيضًا تجميع عناصر التحكم وتسمياتها في النموذج (Form) باستخدام عنصر <legend>.
يُسهّل تجميع عناصر التحكم في النموذج على المستخدمين تحديد موقع عنصر التحكم مما يجعل النموذج أكثر سهولة في الاستخدام. دعنا نجرب المثال التالي لنرى كيف يعمل:

مثال
تشغيل
  1. <form>
  2. <fieldset>
  3. <legend>Contact Details</legend>
  4. <label>Email Address:<input type="email" name="email"></label>
  5. <label>Phone Number:<input type="text" name="phone"></label>
  6. </fieldset>
  7. </form>

سمات النموذج المستخدمة بشكل متكرر

يعرض الجدول التالي سمات عنصر النموذج الأكثر استخدامًا:

السمة الوصف
name تحدد الاسم للنموذج
action تحدد عنوان URL للبرنامج على خادم الويب الذي سيتم استخدامه لمعالجة المعلومات المقدمة عبر النموذج.
method تحدد HTTP method المستخدمة لإرسال البيانات إلى خادم الويب من قبل المتصفح. يمكن أن تكون القيمة إما get (الافتراضي) او post .
target تحدد مكان عرض الاستجابة التي يتم تلقيها بعد إرسال النموذج. القيم الممكنة هي _blank و _self و _parent و _top .
enctype تحدد كيفية تشفير بيانات النموذج عند إرسال النموذج إلى الخادم. قابل للتطبيق فقط عندما تكون قيمة السمة method هي post .
« التالي السابق »