حقل بريد إلكتروني في HTML: امنع الإدخال الفارغ دون JavaScript

رسم ورقي لحقل بريد صحيح وآخر غير صحيح على شاشة حاسوب
رسم توضيحي أصلي للمقال.

لا تحتاج إلى مكتبة JavaScript لتبدأ بحقل بريد مطلوب: type="email" يطلب صيغة بريد، وrequired يمنع الإرسال العادي عندما يكون الحقل فارغًا.

مثال للتجربة المحلية

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

<form method="post">
  <label for="reader-email">البريد الإلكتروني</label>
  <input id="reader-email" name="email"
         type="email" required autocomplete="email">
  <button type="submit">اختبار</button>
</form>

جرّب ثلاث حالات

  1. اترك الحقل فارغًا واضغط الاختبار: يفترض أن يطلب المتصفح ملأه.
  2. اكتب كلمة مثل hello: يفترض أن يرفضها كصيغة بريد غير صالحة.
  3. اكتب reader@example.com: يتجاوز الحقل فحص الصيغة. تختلف رسالة التنبيه باختلاف المتصفح ولغته.

ربط label بمعرّف الحقل يساعد على استخدامه بالنقر ولوحة المفاتيح وأدوات الإتاحة. لا تستخدم نصًا موضعيًا وحده بدل تسمية واضحة.

قبل استعماله على موقع فعلي

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

مرجع: توثيق MDN للتحقق من النماذج وحدوده.

تعليقات