الدروس

‏Home ‏تصميم وتطوير الويب ‏HTML & CSS ‏نماذج ومدخلات الـ HTML
  • نماذج ومدخلات الـ HTML

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

    مع أن النماذج تعتبر من المواضيع المتقدمة (وغير السهلة) نوعاً ما في الـ HTML إلا أن معظم مواقع الويب تكاد لا تخلو من وجودها، وذلك لعدة أسباب لعل من أهمها إيجاد إمكانية للتفاعل بين الموقع وصاحبه من جهة والزوار من جهة أخرى ... أحيانا قد تحتاج كمصمم لموقع ويب أن تعرف آراء زوار موقعك في مسائل معينة وقد تكتفي برسائل البريد الإلكتروني التي يرسلوها لك، لكن عندما تريد معرفة أشياء محددة بذاتها فإن النماذج هي الخيار الأفضل لك. بالإضافة إلى إمكانية تنظيم البيانات المدخلة من خلالها وسهولة وسرعة استخدامها من قبل زوار الموقع. ومن أبرز الأمثلة على النماذج في مواقع الويب هي دفاتر الزوار وصفحات البحث عن الكلمات أو العبارات داخل المواقع وناهيك عن المنتديات والتسجيل والمشاركة بها.

    لا تكمن صعوبة التعامل مع النماذج في كونها معقدة بحد ذاتها، كلا ... فهي إحدى العناصر التي تدعمها الـ HTML وهي مجرد وسوم عادية حالها حال الوسوم التي تعاملنا معها في جميع الدروس السابقة. وبإمكانك إنشاء النماذج في موقعك بنفس السهولة التي تدرج فيها جدولاً أو إطاراً (هذا بالطبع إذا كنت تعتقد أن الجداول والإطارات سهلة) لكن التداخل بينها (وأعني النماذج) وبين لغات البرمجة المتقدمة في الويب مثل JavaScript ، CGI ، PHP هي ما يجعلها تختلف عن سابقيها من الوسوم أو العناصر الأخرى. خاصة إذا احتجت إلى بعض المقاطع البرمجية من هذه اللغات ضمن نماذجك.

    أما إذا اكتفيت بالإمكانات المتواضعة التي توفرها HTML بالنسبة للنماذج. فما من مشكلة ... لأنه سيكون بإمكانك التعامل معها بكل بساطة فهي مجرد تصميم للنموذج. وفي هذا الدرس لن نتطرق بالطبع إلى أي من اللغات سوى الـ HTML.


    أمثلة جربه بنفسك - أمثلة

    إنشاء حقول النص
    كيفية إنشاء حقول النص. المستخدم يمكنه إضافة كتابة في حقل النص.

    عمل حقل كلمات المرور
    كيفية عمل حقل كلمة المرور.

    (يمكنك الحصول على مزيد من الأمثلة في أسفل هذه الصفحة).


    نماذج الـ HTML

    نماذج الـ HTML تستخدم لتمرير البيانات إلى المزوّد.

    النموذج يحتوي على عناصر الإدخال مثل حقول النص، حقول الإختيار بأنواعها كالمربعات checkboxes أو أزرار الراديو radio-buttons، وأيضاً زر الإدخال (submit) والمزيد.

    الوسم <form> يستخدم لعمل نموذج الـ HTML:

    كود HTML:
    <form>
      .
      input elements - عناصر الإدخال
      .
    </form>

    نماذج الـ HTML - عناصر الإدخال

    أهم عناصر النماذج هي عناصر الإدخال (input element).

    عناصر الإدخال تستخدم ليقوم المستخدم باختيار المعلومات.

    عناصر الإدخال يمكن أن تختلف بعدة أشكال، تعتمد على الخاصية type وهي تحدد النوع. فهي يمكن أن تكون حقل نص، checkbox، كلمات مرور، أزرار radio، وأزرار التقديم أو الإدخال (submit button)، وغيرها.

    أنواع الإدخال الأكثر استخداماً موصوفة في أسفل الموضوع.


    حقول النص

    <input type="text" />
    يستخدم لتعريف حقل إدخال بسطر واحد يستطيع المستخدم إدخال البيانات فيه:

    كود بلغة HTML:
    <form> 
      الاسم الأول: <input type="text" name="firstname" /><br />
      اسم العائلة: <input type="text" name="lastname" /> 
    </form>

    كيف يعمل كود الـ HTML بالأعلى في المتصفّح:

    الاسم الأول:
    اسم العائلة:

    لاحظ: بأن النموذج نفسه لا يظهر. وأيضاً لاحظ بأن العرض الافتراضي لحقول النص هو 20 حرف (characters).


    حقل كلمة المرور

    <input type="password" />
    يستخدم لتعريف حقل كلمة المرور:

    كود HTML:
    <form>
      كلمة المرور: <input type="password" name="pwd" />
    </form>

    كيف يعمل كود الـ HTML بالأعلى في المتصفّح:

    كلمة المرور:

    لاحظ: بأن الحروف في حقل كلمة المرور تكون محجوبة (تظهر كنجوم أو دوائر).


    أزرار راديو - Radio Buttons

    <input type="radio" />
    تستخدم لتعريف أزرار الراديو. وهذه الـ Radio buttons تجعل المستخدم أن يقوم باختيار أحد الخيارات فقط من مجموعة الاختيارات المحددة:

    كود بلغة HTML:
    <form> 
      <input type="radio" name="sex" value="male" /> ذكر<br />
      <input type="radio" name="sex" value="female" /> أنثى
    </form>

    كيف يعمل كود الـ HTML بالأعلى في المتصفّح:

    ذكر
    أنثى


    Checkboxes

    <input type="checkbox" />
    لتعريف الـ checkbox. وهي تمكّن المستخدم من تحديد اختيار واحد أو أكثر من الخيارات المحدّدة.

    كود بلغة HTML:
    <form> 
      <input type="checkbox" name="vehicle" value="Bike" /> لدي دراجة هوائية<br />
      <input type="checkbox" name="vehicle" value="Car" /> لدي سيارة 
    </form>

    كيف يعمل كود الـ HTML بالأعلى في المتصفّح:

    لدي دراجة هوائية
    لدي سيارة


    زر التقديم - Submit Button

    <input type="submit" />
    لتعريف زر التقديم.

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

    كود HTML:
    <form name="input" action="html_form_action.php" method="get">
      اسم المستخدم: <input type="text" name="user" />
      <input type="submit" value="دخول" />
    </form>

    كيف يعمل كود الـ HTML بالأعلى في المتصفّح:

    اسم المستخدم:

    إذا قمت بكتابة اسمك في الحقل بالأعلى، ثم ضغطت على زر "دخول" ، المتصفح سيقوم بإرسال البيانات إلى الصفحة "html_form_action.php". وستقوم الصفحة بعرض اسم المستخدم المدخل الذي ستستلمه.


    جربه المزيد من الأمثلة

    أزرار الراديو - Radio buttons
    كيفية عمل الـ radio buttons.

    Checkboxes
    كيفية عمل الـ checkboxes. حيث المستخدم يستطيع اختيار أو إلغاء الاختيار عن الـ checkbox.

    قائمة اختيار بسيطة
    كيفية عمل قائمة اختيار منسدلة بسيطة (simple drop-down list).

    قائمة اختيار بقيمة مختارة
    كيفية عمل قائمة اختيار منسدلة مع قيمة مختارة مسبقاً.

    حقل النصوص Textarea
    كيفية عمل حقل إدخال متعدد الأسطر. في مساحة الكتابة يمكن للمستخدم كتابة عدد غير محدود من الأحرف.

    عمل زر
    كيفية عمل زر.


    جربه أمثلة لنماذج

    عمل مجموعة حقلية على محتوى النموذج
    كيفية عمل حدود حول عناصر النموذج.

    نموذج مع حقل نص وزر إدخال
    كيفية عمل نموذج مع حقل نص وزرّ إدخال.

    نموذج مع checkboxes
    كيفية عمل نموذج مع ثلاثة خيارات (checkboxes) وزرّ إدخال.

    نموذج مع زر من نوع راديو
    كيفية عمل نموذج مع زري اختيار من نوع راديو، وزر إدخال.

    إرسال رسالة إلكترونية من نموذج
    كيفية إرسال رسالة إلكترونية من خلال النموذج.


    وسوم نماذج الـ HTML

    الوسم الوصف
    <form> يعرّف نموذج الـ HTML لمدخلات المستخدم
    <input /> تعريف حقول البيانات في النموذج
    <textarea> تعريف حقل بيانات متعدد الأسطر
    <label> تعريف ملصق لعنصر الإدخال
    <fieldset> تعيين حدود حول العناصر في النموذج
    <legend>
    تعريف تعليق (caption) لمجموعة عناصر الحقول (fieldset)
    <select> (تعريف قائمة اختيار (قائمة منسدلة
    <optgroup> تعريف مجموعة للاختيارات المترابطة في قائمة الاختيار
    <option> تعريف خيار في قائمة الاختيار
    <button> تعريف زر للضغط