الحقل `email`

عناصر <input> ذات النوع email تسمح للمستخدم بإدخال وتعديل عنوان بريد إلكتروني، أو قائمةً بعناوين البريد الإلكتروني إذا كانت الخاصية multiple مضبوطةً.

سيتم التحقق من صحة المدخلات تلقائيًا للتأكد أنَّها ليست فارغة وأنَّها تُمثِّل عنوان (أو عناوين) بريد إلكتروني صالح قبل إرسال النموذج.

إذا لم يكن المتصفح يدعم الحقل email فسيستخدم المتصفح الحقل text الافتراضي.

<input id="emailAddress" type="email">

الخاصية `value`

تحتوي الخاصية value في الحقل email على سلسلة نصية (DOMString) التي سيتم التحقق من صحتها تلقائيًا، وهنالك ثلاث صيغ سليمة لهذا الحقل:

سلسلة نصية فارغة تُشير إلى أنَّ المستخدم لم يدخل قيمةً أو القيمة الموجودة في الحقل مسبقًا قد حُذِفَت.
سلسلة نصية تُمثِّل بريدًا إلكترونيًا صالحًا، وهذا لا يعني بالضرورة أنَّ عنوان البريد الإلكتروني موجود ومستخدم، لكن يجب أن يكون شكله صحيحًا مثل العنوان الآتي: username@subdomain.domain، يجدر بالذكر أنَّ هذا تبسيط لعناوين البريد الصحيحة، ولمزيدٍ من المعلومات راجع قسم «التحقق من الحقل» لترى ما هو النمط الذي يُستخدَم في خوارزمية التأكد من عناوين البريد الإلكتروني.
إذا حُدِّدَت الخاصية multiple، فيمكن أن تكون قيمة هذا الحقل قائمة بعناوين البريد الإلكتروني الصالحة والمفصولُ بينها بفاصلة؛ وستُحذَف الفراغات البيضاء قبل وبعد كل عنوان في القائمة.

يرجى مراجعة قسم «التحقق من الحقل» لمزيدٍ من التفاصيل عن كيفية التحقق من صياغة عناوين البريد الإلكتروني.

استخدام حقل البريد الإلكتروني

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

من المهم أنَّ تلاحظ أنَّ هذا الحقل يتحقق أنَّ هذا البريد مكتوب بصيغة صحيحة لكنه لا يضمن لنا أنَّ هذا البريد موجود.

حقل إدخال بريد إلكتروني بسيط

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

أبسط شكل لحقل البريد الإلكتروني يكون كالآتي:

<input id="emailAddress" type="email">

لاحظ أنَّ الحقل سيعتبر صالحًا عندما يكون فارغًا أو يُدخَل فيه عنوان بريد إلكتروني صالح، وسيكون غير صالحٍ فيما عدا ذلك. وإذا أُضيفت الخاصية required فلن يكون الحقل صالحًا إلا إذا أُدخِل فيه عنوان بريد إلكتروني صالح، ولا يصح أن يكون فارغًا.

السماح بأكثر من عنوان بريدي في الحقل

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

<input id="emailAddress" type="email" multiple>

أصبح الآن الحقل ذو محتوى صالح إن أُدخِل عنوان بريد إلكتروني وحيد، أو أي عدد من عناوين البريد الإلكتروني مفصولٌ بينها بفاصلة , ويمكن أيضًا إضافة أي عدد من الفراغات.

بعض الأمثلة الصالحة عن قيمة الحقل email مع الخاصية multiple:

"me@example"
"me@example.org"
"me@example.org,you@example.org"
"me@example.org, you@example.org"
"me@example.org,you@example.org, us@example.org"

وهذه بعض الأمثلة عن القيم غير الصالحة:

","
"me"
"me@example.org you@example.org"

المحتوى النائب

من المفيد عادةً توفير تلميحة عن سياق استخدام هذا الحقل وما هي صيغة البيانات التي سيأخذها، وهذا هو استخدام المحتوى النائب (placeholder)، إذ إنَّه قيمة تشرح ما هو الشكل الذي يجب أن تأخذه الخاصية value لكي تكون القيمة صحيحةً، ويُعرَض عادةً داخل حقل التعديل عندما تكون قيمة الخاصية value فارغةً، وعند إدخال بيانات في مربع النص فسيختفي المحتوى النائب وإذا حُذِفَ محتوى الحقل النصي فسيظهر المحتوى النائب مرةً أخرى.

هذا مثال عن حقل email فيه قيمة المحتوى النائب تساوي user@example.com، لاحظ كيف يختفي ويظهر المحتوى النائب اعتمادًا على المحتوى الفعلي للحقل:

<input type="email" placeholder="user@example.com">

التحكم بحجم الحقل

يمكنك أن تتحكم بالحجم الفيزيائي لحقل الإدخال إضافةً إلى الطول الأدنى والأقصى للمدخلات التي يقبلها.

حجم الحقل الفيزيائي

يمكن تعديل حجم الحقل باستخدام الخاصية size التي يمكنك عبرها تحديد عدد المحارف التي ستُعرَض في حقل الإدخال في وقتٍ واحد، فعلي سبيل المثال، هذا الحقل يكون عرضه مساويًا لعرض 15 محرفًا:

<input type="email" size="15">

طول محتوى العنصر

الخاصية size تتحكم بحجم العنصر وليس لها علاقة بالحدود القصوى والدنيا لمحتوى الحقل، فلربما أردتَ أن يكون الحقل قصيرًا ليتسع في مكانٍ ضيق لكنه ما يزال يسمح بقيم طويلة.

يمكنك تحديد الحد الأدنى لعدد المحارف التي يجب إدخالها باستخدام الخاصية minlength، واستخدام الخاصية maxlength لتحديد العدد الأقصى لعدد المحارف التي يُسمَح بإدخالها.

المثال الآتي عن حقل email بعرض 32 محرفًا ويتطلب على الأقل 3 محارف ويجب ألّا يزيد طول البريد الإلكتروني عن 64 محرفًا:

<input type="email" size="32" minlength="3" maxlength="64">

توفير قيمة افتراضية

يمكنك ضبط قيمة افتراضية لحقل البريد الإلكتروني باستخدام الخاصية value:

<input type="email" value="default@example.com">

توفير قائمة بالقيم المقترحة

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

الخاصية list تقبل مُعرِّف ID لعنصر <datalist> الذي يضم عنصر <option> أو أكثر، وكل عنصر <option> له الخاصية value التي ستُعرَض قيمتها على المستخدم كاقتراح.

<input type="email" size="40" list="defaultEmails">

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk">
  <option value="jbourne@unknown.net">
  <option value="nfury@shield.org">
  <option value="tony@starkindustries.com">
  <option value="hulk@grrrrrrrr.arg">
</datalist>

التحقق من الحقل

هنالك مستويان للتحقق من المدخلات في الحقل email، فالمستوى الأول هو المستوى القياسي المتاح لجميع عناصر <input> والذي يتحقق أنَّ محتويات العنصر تُطابِق شروط عناوين البريد الإلكتروني الصالحة، لكن هنالك خيار لإضافة مُرشِّح (filter) لكي تُطابِق محتويات الحقل احتياجاتك الخاصة إن كانت موجودةً.

تحذير مهم: التحقق من مدخلات المستخدم عبر HTML ليس بديلًا عن التأكّد منها من جهة الخادوم، فمن السهل جدًا أن يُعدِّل أحدهم شيفرة HTML لكي يتجاوز آلية التحقق، ومن الممكن أن يتجاوز أحدهم نموذج HTML كليًا ويرسل البيانات إلى الخادوم مباشرةً. فلو لم تكن الشيفرة المشغّلة على خادومك تتحقق من المدخلات التي تستقبلها فمن الممكن أن تحدث كارثة إذا أرسل أحدهم بيانات غير مُنظمة كما يجب (أو بيانات كبيرة أو من نوع خطأ وهلم جرًّا).

التحقق الأساسي

المتصفحات التي تدعم الحقل email ستُوفِّر تحققًا تلقائيًا من محتوى الحقل بمطابقته مع الصيغة القياسية لعناوين البريد الإلكتروني، إذ يجب أن تستعمل المتصفحات التي تدعم هذا الحقل خوارزميةً تكافئ التعبير النمطي الآتي:

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
  [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

التحقق عبر نمط

إذا كنت تريد أن تكون المدخلات المقبولة في هذا الحقل أكثر تقييدًا من «أي سلسلة نصية تبدو كبريدٍ إلكتروني» فاستخدم الخاصية pattern لتحديد تعبير نمطي (regular expression) يجب أن تُطابِقه القيمة لكي تكون صالحةً. وإذا استعملت الخاصية multiple فيجب أن يُطابِق كل عنوان من القائمة المفصولة بفاصلة هذا النمط.

لنقل مثلًا أنَّك تبني صفحة ويب لموظفي شركة Best Startup Ever, inc. التي تسمح لهم بالتواصل مع قسم التقني في الشركة لطلب المساعدة، ويجب على المستخدم أن يُدخِل بريده الإلكتروني ورسالةً تصف المشكلة التي يواجهها، ونريد أن يُدخِل المستخدم بريدًا إلكترونيًا صالحًا -ولأسبابٍ أمنية- يجب أن يكون هذا البريد خاصًا بالشركة.

ولأن حقل email يتأكد أنَّ صياغة البريد الإلكتروني المُدخَل صحيحة، فيمكن تحديد نمط باستخدام الخاصية pattern وهي سهلة الاستخدام:

<form>
 <div class="emailBox">
   <label for="emailAddress">Your email address</label><br>
   <input id="emailAddress" type="email" size="64" maxLength="64" required
          placeholder="username@beststartupever.com" pattern=".+@beststartupever.com"
          title="Please provide only a Best Startup Ever corporate email address">
 </div>

 <div class="messageBox">
   <label for="message">Request</label><br>
   <textarea id="message" cols="80" rows="8" required
             placeholder="My shoes are too tight, and I have forgotten how to dance."></textarea>
 </div>
  <input type="submit" value="Send Request">
</form>

يحتوي النموذج (<form>) على عنصر <input> لإدخال العنوان البريدي للمستخدم، وعنصر <textarea> لكي يضع فيه المستخدم رسالته، وعنصر <input> لإرسال النموذج (submit)، وهنالك عنصر <label> لكل حقل إدخال ليبيّن للمستخدمين ماذا عليهم أن يدخلوا في الحقل.

لنلقِ نظرةً أقرب إلى حقل email، فالخاصيتان size و maxlength مضبوطتان إلى القيمة 64 لكي يتسع الحقل إلى 64 محرفًا ويكون بعرض 64 محرفًا؛ واستعملنا الخاصية required لإجبار المستخدم على إدخال بريد إلكتروني صالح.

استخدمنا محتوى نائب عبر الخاصية placeholder (وقيمته username@beststartupever.com) لتوفير مثال عن المدخلات الصحيحة، وتنبِّه المستخدم على أنَّ البريد يجب أن يكون تابعًا للشركة، أضف إلى ذلك أنَّ الحقل email سيتحقق أنَّ محتوى هذا الحقل بصيغة سليمة. فلو كانت محتويات الحقل لا تُمثِّل عنوان بريد إلكتروني صالح فستظهر رسالة خطأ كما في الرسالة الآتية:

رسالة الخطأ التي تظهر عندما لا يكون البريد الإلكتروني الذي أدخله المستخدم صالحًا.

عند هذه النقطة سيتم التحقق أنَّ مدخلات المستخدم تُمثِّل عنوان بريد إلكتروني صالح، لكننا نريد أن نتأكد أنَّ البريد المُدخَل بالصيغة username@beststartupever.com وهنا سنستخدم الخاصية pattern ونضبط قيمتها إلى ‎.+@beststartupever.com وهذا تعبير نمطي بسيط يطلب أن تتألف السلسلة النصية على محرف من أي نوع على الأقل ثم رمز @ ثم اسم النطاق beststartupever.com.

لاحظ أنَّ التعبير النمطي السابق يمكن أن يُطابِق عناوين البريد الإلكتروني غير الصالحة، مثل ‎ @beststartupever.com (لاحظ الفراغ في بداية العنوان) أو ‎@@beststartupever.com، لكن المتصفح سيتحقق أنَّ القيم تُمثِّل بريدًا إلكترونيًا صالحًا وتطابِق النمط الذي حدَّدنا، أي أنَّنا سنقول للمتصفحات «تأكد أنَّ القيمة التي أدخلها المستخدم هي بريدٌ إلكترونيٌ بصيغةٍ صحيحة، وإذا كان كذلك فتأكد أنَّه عنوانٌ خاصٌ بنطاق beststartupever.com».

من المستحسن استخدام الخاصية title مع الخاصية pattern، وعندئذٍ يجب أن تصف الخاصية title ما هو النمط المستخدم، أي ما هي صيغة البيانات المسموحُ إدخالها. فقد تعرض المتصفحات الرسالة «The entered text doesn't match the required pattern» ثم القيمة الموجودة في خاصية title، فلو كانت قيمة الخاصية title تشبه «Email address» فالرسالة الناتجة «The entered text doesn't match the required pattern. Email address» لن تكون مفيدةً.

ولهذا استخدمنا في المثال السابق السلسلة النصية «Please provide only a Best Startup Ever corporate email address» وبفعلنا لذلك ستكون الرسالة النهائية التي ستظهر إن لم تُطابِق مدخلات المستخدم النمط: «The entered text doesn't match the required pattern. Please provide only a Best Startup Ever corporate email address»:

العنوان البريدي الذي أدخله المستخدم لا يُطابِق النمط المُحدَّد.

تنويه: إذا واجهتَ مشاكل عند كتابة التعابير النمطية، أو أنها لا تعمل كما ينبغي لها فتحقق من سطر الأوامر (console) الموجود في المتصفح، فقد يحتوي على رسائل خطأ مفيدة تساعدك على حل المشكلة.

أمثلة

هذا مثال عن استخدام حقل email له المُعرِّف emailAddress الذي يُسمَح بأن يكون محتواه بطول 256 محرفًا، لكن يظهر بعرض 64 محرفًا، وفيه محتوى نائب قيمته user@example.gov، وسنستخدم فيه الخاصية multiple للسماح للمستخدم بإدخال أكثر من بريد إلكتروني، واستخدمنا الخاصية list لتحديد مُعرِّف العنصر <datalist> الذي يحتوي على عناصر <option> تمثِّل اقتراحات يمكن للمستخدم اختيار أحدها.

استخدمنا أيضًا العنصر <label> لتوفير لافتة لحقل البريد الإلكتروني، مع استعمال الخاصية for فيه للإشارة إلى مُعرِّف العنصر (emailAddress)، وبربط هذين العنصرين مع بعضهما بعضًا فيمكننا بدء الكتابة في حقل الإدخال عند الضغط على نص اللافتة.

<label for="emailAddress">Email</label><br/>
<input id="emailAddress" type="email" placeholder="user@example.gov"
       list="defaultEmails" size="64" maxlength="256" multiple>

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk">
  <option value="jbourne@unknown.net">
  <option value="nfury@shield.org">
  <option value="tony@starkindustries.com">
  <option value="hulk@grrrrrrrr.arg">
</datalist>

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصية value