دليل نماذج HTML: أنواع حقول الإدخال وزر الإرسال مع أمثلة عملية

مقدمة إلى نماذج HTML

تُعد النماذج في HTML من أهم مكونات الويب، لأنها الوسيلة الأساسية لجمع البيانات من المستخدمين، وإجراء عمليات البحث، وإنشاء حسابات جديدة، واستقبال الرسائل والاستفسارات. من دون النماذج، سيصبح التفاعل بين المستخدم والموقع محدوداً للغاية.

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

الصيغة الأساسية لنموذج HTML

يتكون أي نموذج من عنصر <form> يحدد وجهة إرسال البيانات وطريقة الإرسال المستخدمة. الصيغة الأساسية تكون كالتالي:

<form action="mywebsite.com" method="POST">
  <!-- Input of any type and textareas goes in here -->
</form>

في هذا المثال:

• action: يحدد عنوان الخادم أو الصفحة التي ستستقبل البيانات.
• method: يحدد طريقة الإرسال، وغالباً تكون GET أو POST.

أنواع حقول الإدخال في HTML

يُستخدم الوسم <input> لإنشاء أنواع متعددة من الحقول داخل النماذج. وهو عنصر يدعم خصائص كثيرة مثل type وname وplaceholder وminlength وmaxlength. اختيار النوع المناسب لكل حقل يساعد في تحسين تجربة المستخدم ورفع جودة إدخال البيانات.

حقل النص text

يُستخدم لإدخال نص قصير في سطر واحد، مثل الاسم أو المسمى الوظيفي.

<input type="text" placeholder="Enter name" />

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

هذا النوع مخصص لإدخال كلمات المرور، حيث يتم إخفاء الأحرف تلقائياً أثناء الكتابة للحفاظ على الخصوصية.

<input type="password" placeholder="Enter your password" />

حقل البريد الإلكتروني email

يُستخدم لاستقبال البريد الإلكتروني، ويمنح المتصفح قدرة مبدئية على التحقق من صحة التنسيق المدخل.

<input type="email" placeholder="Enter your email" />

حقل الأرقام number

مفيد عندما تريد من المستخدم إدخال قيمة رقمية فقط، مثل العمر أو الكمية.

<input type="number" placeholder="Enter a number" />

أزرار الاختيار radio

تُستخدم عندما يكون مطلوباً من المستخدم اختيار خيار واحد فقط من بين عدة خيارات.

<input type="radio" />

مربعات التحديد checkbox

على عكس radio، يسمح هذا النوع للمستخدم بتحديد أكثر من خيار في الوقت نفسه.

<input type="checkbox" />

زر الإرسال submit

يُستخدم لإرسال بيانات النموذج إلى الخادم. ويمكن تخصيص النص الظاهر داخله عبر الخاصية value.

<input type="submit" value="Enter to Win" />

زر عادي button

ينشئ زراً قابلاً للتخصيص ويمكن ربطه بأحداث JavaScript مثل onclick لتنفيذ إجراءات معينة دون إرسال النموذج مباشرة.

<input type="button" value="Submit" />

رفع الملفات file

يُستخدم لتمكين المستخدم من اختيار ملف من جهازه، مثل صورة أو مستند أو ملف PDF.

<input type="file" />

منتقي الألوان color

يوفر واجهة سهلة لاختيار لون معين. القيمة الافتراضية عادة تكون #000000، ويمكن تغييرها مسبقاً إذا لزم الأمر.

<input type="color" />

حقل البحث search

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

<input type="search" />

حقل الرابط url

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

<input type="url" />

حقل الهاتف tel

مناسب لجمع أرقام الهواتف، خصوصاً في النماذج المخصصة للتواصل أو التسجيل.

<input type="tel" />

حقل التاريخ date

يعرض أداة تساعد المستخدم على اختيار تاريخ محدد بسهولة، مثل تاريخ الميلاد أو تاريخ الحجز.

<input type="date" />

حقل التاريخ والوقت datetime-local

يشبه date، لكنه يتيح للمستخدم اختيار التاريخ والوقت معاً.

<input type="datetime-local" />

حقل الأسبوع week

يسمح بتحديد أسبوع معين من السنة، وهو مناسب لبعض النماذج الإدارية أو الجدولية.

<input type="week" />

حقل الشهر month

يُستخدم عندما يحتاج المستخدم إلى اختيار شهر محدد دون الحاجة إلى يوم معين.

<input type="month" />

منطقة النص textarea

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

<textarea cols="50" rows="20"></textarea>

قائمة الاختيار select مع option

تُستخدم هذه القائمة لتقديم عدة خيارات ضمن عنصر واحد. ويمكن السماح باختيار أكثر من قيمة عند استخدام الخاصية multiple.

<select>
  <option value="HTML">Select a Language</option>
  <option value="HTML">HTML</option>
  <option value="CSS">CSS</option>
  <option value="JavaScript">JavaScript</option>
  <option value="React">React</option>
</select>

أهمية ربط الحقول بالوسوم label

ربط عناصر الإدخال بالوسم <label> خطوة مهمة جداً في قابلية الاستخدام وإمكانية الوصول. عند استخدام الخاصية for داخل label وربطها مع الخاصية id في الحقل، يستطيع المستخدم النقر على النص نفسه للانتقال إلى الحقل أو تفعيله.

<label for="name">Name</label>
<input type="text" id="name" />
<br />
<label for="check">Agree with terms</label>
<input type="checkbox" id="check" />

كيف تعمل نماذج HTML؟

عندما يملأ المستخدم الحقول ثم ينقر على زر الإرسال، يتم إرسال البيانات إلى الخادم باستخدام إحدى طريقتي HTTP: GET أو POST.

• action: يحدد عنوان الجهة التي ستستقبل البيانات.
• method: يحدد أسلوب الإرسال.

متى نستخدم GET؟

تُستخدم طريقة GET عندما تكون البيانات غير حساسة، أو عند تنفيذ عمليات جلب وفلترة وبحث. في هذه الحالة تظهر القيم المرسلة داخل الرابط URL.

متى نستخدم POST؟

تُستخدم POST عندما تتضمن العملية بيانات حساسة أو ملفات أو محتوى طويل. في هذا الأسلوب لا تظهر القيم ضمن الرابط، بل تُرسل ضمن الطلب نفسه.

إذا لم تحدد الخاصية method داخل النموذج، فسيُفترض تلقائياً استخدام GET لأنه الوضع الافتراضي.

مشروع عملي: إنشاء نموذج تواصل بسيط

بعد فهم أساسيات النماذج، يمكننا تطبيق ما تعلمناه في مثال عملي لبناء نموذج تواصل واضح ومنظم.

كود HTML للنموذج

<form action="example-server.com">
  <fieldset>
    <legend>Contact me</legend>

    <div class="form-control">
      <label for="name">Name</label>
      <input type="name" id="name" placeholder="Enter your name" required />
    </div>

    <div class="form-control">
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Enter your email" required />
    </div>

    <div class="form-control">
      <label for="message">Message</label>
      <textarea id="message" cols="30" rows="10" placeholder="Enter your message" required></textarea>
    </div>

    <input type="submit" value="Send" class="submit-btn" />
  </fieldset>
</form>

هذا النموذج يتضمن عدداً من العناصر المهمة:

• العنصر <form> يضم جميع الحقول.
• العنصر <fieldset> يجمع الحقول المرتبطة ببعضها ضمن إطار منطقي.
• العنصر <legend> يوضح الهدف من النموذج.
• الحقول name وemail وtextarea تحمل الخاصية required، ما يعني أن المتصفح لن يسمح بإرسال النموذج إذا بقيت فارغة.

تنسيق النموذج باستخدام CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: cursive;
}

input,
textarea {
  width: 100%;
  padding: 5px;
  outline: none;
}

label {
  line-height: 1.9rem;
}

input[type="submit"] {
  transform: translate(2.2%);
  padding: 3px;
  margin-top: 0.6rem;
  font-family: cursive;
  font-weight: bold;
}

fieldset {
  padding: 20px 40px;
}

هذا التنسيق يهدف إلى تحسين المظهر العام للنموذج عبر:

• توسيط العناصر أفقياً وعمودياً باستخدام Flexbox.
• توسيع حقول الإدخال وtextarea لتشغل كامل العرض المتاح.
• تحسين المسافات بين التسميات والحقول.
• ضبط شكل زر الإرسال ليبدو أوضح وأكثر توازناً بصرياً.
• إضافة حشوات داخل fieldset لخلق مساحة مريحة حول عناصر النموذج.

أفضل الممارسات عند تصميم نماذج الويب

• استخدم نوع الإدخال المناسب لكل معلومة لرفع دقة البيانات.
• أضف الخاصية placeholder عند الحاجة، لكن لا تعتمد عليها بديلاً عن label.
• استخدم required للتحقق الأولي من الحقول المهمة.
• اختر POST عند إرسال البيانات الحساسة أو الملفات.
• احرص على أن تكون الحقول واضحة، مختصرة، وسهلة التفاعل على الجوال.

الخلاصة التقنية

فهم نماذج HTML ليس مجرد خطوة أساسية في تطوير الواجهات، بل هو عنصر محوري في بناء مواقع عملية وقابلة للتفاعل. كلما أحسنت اختيار نوع الحقل، وربطت العناصر بشكل صحيح، ووفرت تجربة استخدام مريحة، زادت جودة البيانات التي تجمعها وارتفع أداء صفحاتك من ناحية الاستخدام والسيو معاً. النموذج الجيد لا يكتفي بالشكل، بل يجمع بين الدقة، وسهولة الاستخدام، والوضوح التقني.