الفرق بين المراجعتين ل"HTML/input/email"
ط (استبدال النص - ':(Content sectioning|Edits|Embedded content|Forms|Inline text semantics|Input Types|Interactive elements|Main Root|Metadata|Multimedia|Scripting|Table|Text Content)' ب':HTML $1') |
ط (←حجم الحقل الفيزيائي: خطأ مطبعي) |
||
(3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
سطر 5: | سطر 5: | ||
إذا لم يكن المتصفح يدعم الحقل <code>email</code> فسيستخدم المتصفح الحقل <code>[[HTML/input/text|text]]</code> الافتراضي.<syntaxhighlight lang="html"> | إذا لم يكن المتصفح يدعم الحقل <code>email</code> فسيستخدم المتصفح الحقل <code>[[HTML/input/text|text]]</code> الافتراضي.<syntaxhighlight lang="html"> | ||
− | <input | + | <input type="email" name="email"> |
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 24: | سطر 24: | ||
أبسط شكل لحقل البريد الإلكتروني يكون كالآتي:<syntaxhighlight lang="html"> | أبسط شكل لحقل البريد الإلكتروني يكون كالآتي:<syntaxhighlight lang="html"> | ||
− | <input | + | <input type="email" name="email"> |
</syntaxhighlight>لاحظ أنَّ الحقل سيعتبر صالحًا عندما يكون فارغًا أو يُدخَل فيه عنوان بريد إلكتروني صالح، وسيكون غير صالحٍ فيما عدا ذلك. وإذا أُضيفت الخاصية <code>required</code> فلن يكون الحقل صالحًا إلا إذا أُدخِل فيه عنوان بريد إلكتروني صالح، ولا يصح أن يكون فارغًا. | </syntaxhighlight>لاحظ أنَّ الحقل سيعتبر صالحًا عندما يكون فارغًا أو يُدخَل فيه عنوان بريد إلكتروني صالح، وسيكون غير صالحٍ فيما عدا ذلك. وإذا أُضيفت الخاصية <code>required</code> فلن يكون الحقل صالحًا إلا إذا أُدخِل فيه عنوان بريد إلكتروني صالح، ولا يصح أن يكون فارغًا. | ||
=== السماح بأكثر من عنوان بريدي في الحقل === | === السماح بأكثر من عنوان بريدي في الحقل === | ||
بإضافة الخاصية المنطقية <code>multiple</code>، فيمكن السماح بإدخال أكثر من عنوان بريد إلكتروني في هذا الحقل.<syntaxhighlight lang="html"> | بإضافة الخاصية المنطقية <code>multiple</code>، فيمكن السماح بإدخال أكثر من عنوان بريد إلكتروني في هذا الحقل.<syntaxhighlight lang="html"> | ||
− | <input | + | <input type="email" name="email" multiple> |
− | |||
</syntaxhighlight>أصبح الآن الحقل ذو محتوى صالح إن أُدخِل عنوان بريد إلكتروني وحيد، أو أي عدد من عناوين البريد الإلكتروني مفصولٌ بينها بفاصلة <code>,</code> ويمكن أيضًا إضافة أي عدد من الفراغات. | </syntaxhighlight>أصبح الآن الحقل ذو محتوى صالح إن أُدخِل عنوان بريد إلكتروني وحيد، أو أي عدد من عناوين البريد الإلكتروني مفصولٌ بينها بفاصلة <code>,</code> ويمكن أيضًا إضافة أي عدد من الفراغات. | ||
سطر 56: | سطر 55: | ||
==== حجم الحقل الفيزيائي ==== | ==== حجم الحقل الفيزيائي ==== | ||
− | يمكن تعديل حجم الحقل باستخدام الخاصية <code>size</code> التي يمكنك عبرها تحديد عدد المحارف التي ستُعرَض في حقل الإدخال في وقتٍ واحد، | + | يمكن تعديل حجم الحقل باستخدام الخاصية <code>size</code> التي يمكنك عبرها تحديد عدد المحارف التي ستُعرَض في حقل الإدخال في وقتٍ واحد، فعلى سبيل المثال، هذا الحقل يكون عرضه مساويًا لعرض 15 محرفًا:<syntaxhighlight lang="html"> |
<input type="email" size="15"> | <input type="email" size="15"> | ||
سطر 83: | سطر 82: | ||
<datalist id="defaultEmails"> | <datalist id="defaultEmails"> | ||
− | <option value=" | + | <option value="info@hsoub.com"> |
− | <option value=" | + | <option value="wiki@hsoub.com"> |
− | <option value=" | + | <option value="website@mostaql.com"> |
− | <option value=" | + | <option value="info@mostaql.com"> |
− | |||
</datalist> | </datalist> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
سطر 97: | سطر 95: | ||
=== التحقق الأساسي === | === التحقق الأساسي === | ||
− | المتصفحات التي تدعم الحقل <code>email</code> ستُوفِّر تحققًا تلقائيًا من محتوى الحقل بمطابقته مع الصيغة القياسية لعناوين البريد الإلكتروني، إذ يجب أن تستعمل المتصفحات التي تدعم هذا الحقل خوارزميةً تكافئ التعبير النمطي الآتي: <syntaxhighlight lang=" | + | المتصفحات التي تدعم الحقل <code>email</code> ستُوفِّر تحققًا تلقائيًا من محتوى الحقل بمطابقته مع الصيغة القياسية لعناوين البريد الإلكتروني، إذ يجب أن تستعمل المتصفحات التي تدعم هذا الحقل خوارزميةً تكافئ التعبير النمطي الآتي: <syntaxhighlight lang="text"> |
/^[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])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ | [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ | ||
سطر 106: | سطر 104: | ||
إذا كنت تريد أن تكون المدخلات المقبولة في هذا الحقل أكثر تقييدًا من «أي سلسلة نصية تبدو كبريدٍ إلكتروني» فاستخدم الخاصية <code>pattern</code> لتحديد تعبير نمطي (regular expression) يجب أن تُطابِقه القيمة لكي تكون صالحةً. وإذا استعملت الخاصية <code>multiple</code> فيجب أن يُطابِق كل عنوان من القائمة المفصولة بفاصلة هذا النمط. | إذا كنت تريد أن تكون المدخلات المقبولة في هذا الحقل أكثر تقييدًا من «أي سلسلة نصية تبدو كبريدٍ إلكتروني» فاستخدم الخاصية <code>pattern</code> لتحديد تعبير نمطي (regular expression) يجب أن تُطابِقه القيمة لكي تكون صالحةً. وإذا استعملت الخاصية <code>multiple</code> فيجب أن يُطابِق كل عنوان من القائمة المفصولة بفاصلة هذا النمط. | ||
− | لنقل مثلًا أنَّك تبني صفحة ويب لموظفي شركة | + | لنقل مثلًا أنَّك تبني صفحة ويب لموظفي شركة Hsoub Ltd التي تسمح لهم بالتواصل مع قسم التقني في الشركة لطلب المساعدة، ويجب على المستخدم أن يُدخِل بريده الإلكتروني ورسالةً تصف المشكلة التي يواجهها، ونريد أن يُدخِل المستخدم بريدًا إلكترونيًا صالحًا -ولأسبابٍ أمنية- يجب أن يكون هذا البريد خاصًا بالشركة. |
− | ولأن حقل <code>email</code> يتأكد أنَّ صياغة البريد الإلكتروني المُدخَل صحيحة، فيمكن تحديد نمط باستخدام الخاصية pattern وهي سهلة الاستخدام:<syntaxhighlight lang="html"> | + | ولأن حقل <code>email</code> يتأكد أنَّ صياغة البريد الإلكتروني المُدخَل صحيحة، فيمكن تحديد نمط باستخدام الخاصية <code>pattern</code> وهي سهلة الاستخدام:<syntaxhighlight lang="html"> |
<form> | <form> | ||
<div class="emailBox"> | <div class="emailBox"> | ||
− | <label for="emailAddress"> | + | <label for="emailAddress">عنوان البريد:</label><br> |
<input id="emailAddress" type="email" size="64" maxLength="64" required | <input id="emailAddress" type="email" size="64" maxLength="64" required | ||
− | + | placeholder="user@hsoub.com" pattern=".+@hsoub.com" | |
− | + | title="ضع البريد الإلكتروني التابع لشركة حسوب للشخص الذي تريد إرسال الرسالة إليه"> | |
</div> | </div> | ||
<div class="messageBox"> | <div class="messageBox"> | ||
− | <label for="message"> | + | <label for="message">الرسالة</label><br> |
<textarea id="message" cols="80" rows="8" required | <textarea id="message" cols="80" rows="8" required | ||
− | + | placeholder="رسالة الاستفسار التي تريد إرسالها."></textarea> | |
</div> | </div> | ||
− | <input type="submit" value=" | + | <input type="submit" value="إرسال"> |
</form> | </form> | ||
</syntaxhighlight>يحتوي النموذج (<code>[[HTML/form|<form>]]</code>) على عنصر <code>[[HTML/input|<input>]]</code> لإدخال العنوان البريدي للمستخدم، وعنصر <code>[[HTML/textarea|<textarea>]]</code> لكي يضع فيه المستخدم رسالته، وعنصر <code>[[HTML/input|<input>]]</code> لإرسال النموذج (<code>[[HTML/input/submit|submit]]</code>)، وهنالك عنصر <code>[[HTML/label|<label>]]</code> لكل حقل إدخال ليبيّن للمستخدمين ماذا عليهم أن يدخلوا في الحقل. | </syntaxhighlight>يحتوي النموذج (<code>[[HTML/form|<form>]]</code>) على عنصر <code>[[HTML/input|<input>]]</code> لإدخال العنوان البريدي للمستخدم، وعنصر <code>[[HTML/textarea|<textarea>]]</code> لكي يضع فيه المستخدم رسالته، وعنصر <code>[[HTML/input|<input>]]</code> لإرسال النموذج (<code>[[HTML/input/submit|submit]]</code>)، وهنالك عنصر <code>[[HTML/label|<label>]]</code> لكل حقل إدخال ليبيّن للمستخدمين ماذا عليهم أن يدخلوا في الحقل. | ||
سطر 128: | سطر 126: | ||
لنلقِ نظرةً أقرب إلى حقل <code>email</code>، فالخاصيتان <code>size</code> و <code>maxlength</code> مضبوطتان إلى القيمة <code>64</code> لكي يتسع الحقل إلى 64 محرفًا ويكون بعرض 64 محرفًا؛ واستعملنا الخاصية <code>required</code> لإجبار المستخدم على إدخال بريد إلكتروني صالح. | لنلقِ نظرةً أقرب إلى حقل <code>email</code>، فالخاصيتان <code>size</code> و <code>maxlength</code> مضبوطتان إلى القيمة <code>64</code> لكي يتسع الحقل إلى 64 محرفًا ويكون بعرض 64 محرفًا؛ واستعملنا الخاصية <code>required</code> لإجبار المستخدم على إدخال بريد إلكتروني صالح. | ||
− | استخدمنا محتوى نائب عبر الخاصية <code>placeholder</code> (وقيمته <code> | + | استخدمنا محتوى نائب عبر الخاصية <code>placeholder</code> (وقيمته <code>user@hsoub.com</code>) لتوفير مثال عن المدخلات الصحيحة، وتنبِّه المستخدم على أنَّ البريد يجب أن يكون تابعًا للشركة، أضف إلى ذلك أنَّ الحقل <code>email</code> سيتحقق أنَّ محتوى هذا الحقل بصيغة سليمة. فلو كانت محتويات الحقل لا تُمثِّل عنوان بريد إلكتروني صالح فستظهر رسالة خطأ. |
− | |||
− | |||
− | لاحظ أنَّ التعبير النمطي السابق يمكن أن يُطابِق عناوين البريد الإلكتروني غير الصالحة، مثل <code>@ | + | عند هذه النقطة سيتم التحقق أنَّ مدخلات المستخدم تُمثِّل عنوان بريد إلكتروني صالح، لكننا نريد أن نتأكد أنَّ البريد المُدخَل بالصيغة <code>''user''@hsoub.com</code> وهنا سنستخدم الخاصية <code>pattern</code> ونضبط قيمتها إلى <code>.+@hsoub.com</code> وهذا تعبير نمطي بسيط يطلب أن تتألف السلسلة النصية على محرف من أي نوع على الأقل ثم رمز <code>@</code> ثم اسم النطاق <code>hsoub.com</code>. |
+ | |||
+ | لاحظ أنَّ التعبير النمطي السابق يمكن أن يُطابِق عناوين البريد الإلكتروني غير الصالحة، مثل <code>@hsoub.com</code> (لاحظ الفراغ في بداية العنوان) أو <code>@@hsoub.com</code>، لكن المتصفح سيتحقق أنَّ القيم تُمثِّل بريدًا إلكترونيًا صالحًا '''و'''تطابِق النمط الذي حدَّدنا، أي أنَّنا سنقول للمتصفحات «تأكد أنَّ القيمة التي أدخلها المستخدم هي بريدٌ إلكترونيٌ بصيغةٍ صحيحة، وإذا كان كذلك فتأكد أنَّه عنوانٌ خاصٌ بنطاق <code>hsoub.com</code>». | ||
من المستحسن استخدام الخاصية <code>title</code> مع الخاصية <code>pattern</code>، وعندئذٍ يجب أن تصف الخاصية <code>title</code> ما هو النمط المستخدم، أي ما هي صيغة البيانات المسموحُ إدخالها. فقد تعرض المتصفحات الرسالة «The entered text doesn't match the required pattern» ثم القيمة الموجودة في خاصية <code>title</code>، فلو كانت قيمة الخاصية <code>title</code> تشبه «Email address» فالرسالة الناتجة «The entered text doesn't match the required pattern. Email address» لن تكون مفيدةً. | من المستحسن استخدام الخاصية <code>title</code> مع الخاصية <code>pattern</code>، وعندئذٍ يجب أن تصف الخاصية <code>title</code> ما هو النمط المستخدم، أي ما هي صيغة البيانات المسموحُ إدخالها. فقد تعرض المتصفحات الرسالة «The entered text doesn't match the required pattern» ثم القيمة الموجودة في خاصية <code>title</code>، فلو كانت قيمة الخاصية <code>title</code> تشبه «Email address» فالرسالة الناتجة «The entered text doesn't match the required pattern. Email address» لن تكون مفيدةً. | ||
− | ولهذا استخدمنا في المثال السابق السلسلة النصية | + | ولهذا استخدمنا في المثال السابق السلسلة النصية «ضع البريد الإلكتروني التابع لشركة حسوب للشخص الذي تريد إرسال الرسالة إليه» وبفعلنا لذلك ستكون الرسالة النهائية التي ستظهر إن لم تُطابِق مدخلات المستخدم النمط: «The entered text doesn't match the required pattern.ضع البريد الإلكتروني التابع لشركة حسوب للشخص الذي تريد إرسال الرسالة إليه». |
− | + | ||
تنويه: إذا واجهتَ مشاكل عند كتابة التعابير النمطية، أو أنها لا تعمل كما ينبغي لها فتحقق من سطر الأوامر (console) الموجود في المتصفح، فقد يحتوي على رسائل خطأ مفيدة تساعدك على حل المشكلة. | تنويه: إذا واجهتَ مشاكل عند كتابة التعابير النمطية، أو أنها لا تعمل كما ينبغي لها فتحقق من سطر الأوامر (console) الموجود في المتصفح، فقد يحتوي على رسائل خطأ مفيدة تساعدك على حل المشكلة. | ||
== أمثلة == | == أمثلة == | ||
− | هذا مثال عن استخدام حقل <code>email</code> له المُعرِّف <code>emailAddress</code> الذي يُسمَح بأن يكون محتواه بطول 256 محرفًا، لكن يظهر بعرض 64 محرفًا، وفيه محتوى نائب قيمته <code>user@ | + | هذا مثال عن استخدام حقل <code>email</code> له المُعرِّف <code>emailAddress</code> الذي يُسمَح بأن يكون محتواه بطول 256 محرفًا، لكن يظهر بعرض 64 محرفًا، وفيه محتوى نائب قيمته <code>user@hsoub.com</code>، وسنستخدم فيه الخاصية <code>multiple</code> للسماح للمستخدم بإدخال أكثر من بريد إلكتروني، واستخدمنا الخاصية <code>list</code> لتحديد مُعرِّف العنصر <code>[[HTML/datalist|<datalist>]]</code> الذي يحتوي على عناصر <code>[[HTML/option|<option>]]</code> تمثِّل اقتراحات يمكن للمستخدم اختيار أحدها. |
استخدمنا أيضًا العنصر <code>[[HTML/label|<label>]]</code> لتوفير لافتة لحقل البريد الإلكتروني، مع استعمال الخاصية <code>for</code> فيه للإشارة إلى مُعرِّف العنصر (<code>emailAddress</code>)، وبربط هذين العنصرين مع بعضهما بعضًا فيمكننا بدء الكتابة في حقل الإدخال عند الضغط على نص اللافتة.<syntaxhighlight lang="html"> | استخدمنا أيضًا العنصر <code>[[HTML/label|<label>]]</code> لتوفير لافتة لحقل البريد الإلكتروني، مع استعمال الخاصية <code>for</code> فيه للإشارة إلى مُعرِّف العنصر (<code>emailAddress</code>)، وبربط هذين العنصرين مع بعضهما بعضًا فيمكننا بدء الكتابة في حقل الإدخال عند الضغط على نص اللافتة.<syntaxhighlight lang="html"> | ||
<label for="emailAddress">Email</label><br/> | <label for="emailAddress">Email</label><br/> | ||
− | <input id="emailAddress" type="email" placeholder="user@ | + | <input id="emailAddress" type="email" placeholder="user@hsoub.com" |
− | + | list="defaultEmails" size="64" maxlength="256" multiple> | |
<datalist id="defaultEmails"> | <datalist id="defaultEmails"> | ||
− | <option value=" | + | <option value="info@hsoub.com"> |
− | <option value=" | + | <option value="wiki@hsoub.com"> |
− | <option value=" | + | <option value="website@mostaql.com"> |
− | <option value=" | + | <option value="info@mostaql.com"> |
− | |||
</datalist> | </datalist> | ||
سطر 172: | سطر 169: | ||
|مدعوم | |مدعوم | ||
|} | |} | ||
− | [[تصنيف:HTML]] | + | [[تصنيف:HTML|{{SUBPAGENAME}}]] |
− | [[تصنيف:HTML Forms]] | + | [[تصنيف:HTML Forms|{{SUBPAGENAME}}]] |
− | [[تصنيف:HTML Input Types]] | + | [[تصنيف:HTML Input Types|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 10:50، 28 فبراير 2018
عناصر <input>
ذات النوع email
تسمح للمستخدم بإدخال وتعديل عنوان بريد إلكتروني، أو قائمةً بعناوين البريد الإلكتروني إذا كانت الخاصية multiple
مضبوطةً.
سيتم التحقق من صحة المدخلات تلقائيًا للتأكد أنَّها ليست فارغة وأنَّها تُمثِّل عنوان (أو عناوين) بريد إلكتروني صالح قبل إرسال النموذج.
إذا لم يكن المتصفح يدعم الحقل email
فسيستخدم المتصفح الحقل text
الافتراضي.
<input type="email" name="email">
الخاصية value
تحتوي الخاصية value
في الحقل email
على سلسلة نصية (DOMString
) التي سيتم التحقق من صحتها تلقائيًا، وهنالك ثلاث صيغ سليمة لهذا الحقل:
- سلسلة نصية فارغة تُشير إلى أنَّ المستخدم لم يدخل قيمةً أو القيمة الموجودة في الحقل مسبقًا قد حُذِفَت.
- سلسلة نصية تُمثِّل بريدًا إلكترونيًا صالحًا، وهذا لا يعني بالضرورة أنَّ عنوان البريد الإلكتروني موجود ومستخدم، لكن يجب أن يكون شكله صحيحًا مثل العنوان الآتي:
username@subdomain.domain
، يجدر بالذكر أنَّ هذا تبسيط لعناوين البريد الصحيحة، ولمزيدٍ من المعلومات راجع قسم «التحقق من الحقل» لترى ما هو النمط الذي يُستخدَم في خوارزمية التأكد من عناوين البريد الإلكتروني. - إذا حُدِّدَت الخاصية
multiple
، فيمكن أن تكون قيمة هذا الحقل قائمة بعناوين البريد الإلكتروني الصالحة والمفصولُ بينها بفاصلة؛ وستُحذَف الفراغات البيضاء قبل وبعد كل عنوان في القائمة.
يرجى مراجعة قسم «التحقق من الحقل» لمزيدٍ من التفاصيل عن كيفية التحقق من صياغة عناوين البريد الإلكتروني.
استخدام حقل البريد الإلكتروني
عناوين البريد الإلكتروني من أشهر البيانات النصية التي تُدخَل في النماذج في الويب، فهي تستعمل عند تسجيل الدخول إلى المواقع أو عند طلب معلومات أو عند تأكيد طلبية شراء وهلم جرًا، وبالتالي سيُسهِّل الحقل email
من عملك كمطوِّر ويب كثيرًا ، إذ يساعدك في بناء الواجهة الرسومية والتحقق من صحة عناوين البريد الإلكتروني، فعندما تُنشِئ حقل email
فسيتأكد المتصفح تلقائيًا أنَّ المستخدم قد أدخل نصًا يُطابِق صياغة عناوين البريد الإلكتروني، وهذا يفيد في تجنب توفير عنوان بريد إلكتروني غير صالح.
من المهم أنَّ تلاحظ أنَّ هذا الحقل يتحقق أنَّ هذا البريد مكتوب بصيغة صحيحة لكنه لا يضمن لنا أنَّ هذا البريد موجود.
حقل إدخال بريد إلكتروني بسيط
حاليًا جميع المتصفحات التي تدعم هذا الحقل تعرضه كحقل نصي عادي لكن من إمكانية التحقق من قيمته على أنها بريد إلكتروني، لكن المواصفة تسمح للمتصفحات بأكثر من ذلك، فمثلًا يمكن أن يُدمَج هذا الحقل مع سجل جهات الاتصال الموجود في الجهاز مما يسمح باختيار عنوان بريد إلكتروني من تلك القائمة.
أبسط شكل لحقل البريد الإلكتروني يكون كالآتي:
<input type="email" name="email">
لاحظ أنَّ الحقل سيعتبر صالحًا عندما يكون فارغًا أو يُدخَل فيه عنوان بريد إلكتروني صالح، وسيكون غير صالحٍ فيما عدا ذلك. وإذا أُضيفت الخاصية required
فلن يكون الحقل صالحًا إلا إذا أُدخِل فيه عنوان بريد إلكتروني صالح، ولا يصح أن يكون فارغًا.
السماح بأكثر من عنوان بريدي في الحقل
بإضافة الخاصية المنطقية multiple
، فيمكن السماح بإدخال أكثر من عنوان بريد إلكتروني في هذا الحقل.
<input type="email" name="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="info@hsoub.com">
<option value="wiki@hsoub.com">
<option value="website@mostaql.com">
<option value="info@mostaql.com">
</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
فيجب أن يُطابِق كل عنوان من القائمة المفصولة بفاصلة هذا النمط.
لنقل مثلًا أنَّك تبني صفحة ويب لموظفي شركة Hsoub Ltd التي تسمح لهم بالتواصل مع قسم التقني في الشركة لطلب المساعدة، ويجب على المستخدم أن يُدخِل بريده الإلكتروني ورسالةً تصف المشكلة التي يواجهها، ونريد أن يُدخِل المستخدم بريدًا إلكترونيًا صالحًا -ولأسبابٍ أمنية- يجب أن يكون هذا البريد خاصًا بالشركة.
ولأن حقل email
يتأكد أنَّ صياغة البريد الإلكتروني المُدخَل صحيحة، فيمكن تحديد نمط باستخدام الخاصية pattern
وهي سهلة الاستخدام:
<form>
<div class="emailBox">
<label for="emailAddress">عنوان البريد:</label><br>
<input id="emailAddress" type="email" size="64" maxLength="64" required
placeholder="user@hsoub.com" pattern=".+@hsoub.com"
title="ضع البريد الإلكتروني التابع لشركة حسوب للشخص الذي تريد إرسال الرسالة إليه">
</div>
<div class="messageBox">
<label for="message">الرسالة</label><br>
<textarea id="message" cols="80" rows="8" required
placeholder="رسالة الاستفسار التي تريد إرسالها."></textarea>
</div>
<input type="submit" value="إرسال">
</form>
يحتوي النموذج (<form>
) على عنصر <input>
لإدخال العنوان البريدي للمستخدم، وعنصر <textarea>
لكي يضع فيه المستخدم رسالته، وعنصر <input>
لإرسال النموذج (submit
)، وهنالك عنصر <label>
لكل حقل إدخال ليبيّن للمستخدمين ماذا عليهم أن يدخلوا في الحقل.
لنلقِ نظرةً أقرب إلى حقل email
، فالخاصيتان size
و maxlength
مضبوطتان إلى القيمة 64
لكي يتسع الحقل إلى 64 محرفًا ويكون بعرض 64 محرفًا؛ واستعملنا الخاصية required
لإجبار المستخدم على إدخال بريد إلكتروني صالح.
استخدمنا محتوى نائب عبر الخاصية placeholder
(وقيمته user@hsoub.com
) لتوفير مثال عن المدخلات الصحيحة، وتنبِّه المستخدم على أنَّ البريد يجب أن يكون تابعًا للشركة، أضف إلى ذلك أنَّ الحقل email
سيتحقق أنَّ محتوى هذا الحقل بصيغة سليمة. فلو كانت محتويات الحقل لا تُمثِّل عنوان بريد إلكتروني صالح فستظهر رسالة خطأ.
عند هذه النقطة سيتم التحقق أنَّ مدخلات المستخدم تُمثِّل عنوان بريد إلكتروني صالح، لكننا نريد أن نتأكد أنَّ البريد المُدخَل بالصيغة user@hsoub.com
وهنا سنستخدم الخاصية pattern
ونضبط قيمتها إلى .+@hsoub.com
وهذا تعبير نمطي بسيط يطلب أن تتألف السلسلة النصية على محرف من أي نوع على الأقل ثم رمز @
ثم اسم النطاق hsoub.com
.
لاحظ أنَّ التعبير النمطي السابق يمكن أن يُطابِق عناوين البريد الإلكتروني غير الصالحة، مثل @hsoub.com
(لاحظ الفراغ في بداية العنوان) أو @@hsoub.com
، لكن المتصفح سيتحقق أنَّ القيم تُمثِّل بريدًا إلكترونيًا صالحًا وتطابِق النمط الذي حدَّدنا، أي أنَّنا سنقول للمتصفحات «تأكد أنَّ القيمة التي أدخلها المستخدم هي بريدٌ إلكترونيٌ بصيغةٍ صحيحة، وإذا كان كذلك فتأكد أنَّه عنوانٌ خاصٌ بنطاق hsoub.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» لن تكون مفيدةً.
ولهذا استخدمنا في المثال السابق السلسلة النصية «ضع البريد الإلكتروني التابع لشركة حسوب للشخص الذي تريد إرسال الرسالة إليه» وبفعلنا لذلك ستكون الرسالة النهائية التي ستظهر إن لم تُطابِق مدخلات المستخدم النمط: «The entered text doesn't match the required pattern.ضع البريد الإلكتروني التابع لشركة حسوب للشخص الذي تريد إرسال الرسالة إليه».
تنويه: إذا واجهتَ مشاكل عند كتابة التعابير النمطية، أو أنها لا تعمل كما ينبغي لها فتحقق من سطر الأوامر (console) الموجود في المتصفح، فقد يحتوي على رسائل خطأ مفيدة تساعدك على حل المشكلة.
أمثلة
هذا مثال عن استخدام حقل email
له المُعرِّف emailAddress
الذي يُسمَح بأن يكون محتواه بطول 256 محرفًا، لكن يظهر بعرض 64 محرفًا، وفيه محتوى نائب قيمته user@hsoub.com
، وسنستخدم فيه الخاصية multiple
للسماح للمستخدم بإدخال أكثر من بريد إلكتروني، واستخدمنا الخاصية list
لتحديد مُعرِّف العنصر <datalist>
الذي يحتوي على عناصر <option>
تمثِّل اقتراحات يمكن للمستخدم اختيار أحدها.
استخدمنا أيضًا العنصر <label>
لتوفير لافتة لحقل البريد الإلكتروني، مع استعمال الخاصية for
فيه للإشارة إلى مُعرِّف العنصر (emailAddress
)، وبربط هذين العنصرين مع بعضهما بعضًا فيمكننا بدء الكتابة في حقل الإدخال عند الضغط على نص اللافتة.
<label for="emailAddress">Email</label><br/>
<input id="emailAddress" type="email" placeholder="user@hsoub.com"
list="defaultEmails" size="64" maxlength="256" multiple>
<datalist id="defaultEmails">
<option value="info@hsoub.com">
<option value="wiki@hsoub.com">
<option value="website@mostaql.com">
<option value="info@mostaql.com">
</datalist>
دعم المتصفحات
Chrome | Firefox | Edge | Safari | Opera |
---|---|---|---|---|
مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |