الحقل `url`

عناصر <input> ذات النوع url تستخدم للسماح للمستخدم بإدخال وتعديل رابط URL، وسيتحقق المتصفح تلقائيًا من المدخلات للحرص على أنها فارغة أو رابط URL بصيغة سليمة.

<input type="url" name="url">

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

الخاصية `value`

تحتوي الخاصية value في الحقل url على سلسلة نصية (DOMString) التي تمثل المحتوى الحالي النصي الموجود في حقل الإدخال والذي جرى التحقق من صيغته على أنه رابط URL صحيح. هنالك ثلاث صيغ صحيحة لقيمة هذا الحقل:

سلسلة نصية فارغة "" تشير إلى أنَّ المستخدم لم يدخل قيمةً أو أنَّه القيمة التي أدخلها قد حذفها.
عنوان URL وحيد مطلق مصاغ صياغةً صحيحةً، وهذا لا يعني بالضرورة أنَّ رابط URL موجود، لكن المهم أن يكون بصياغة سليمة. وهذا يعني أنَّه بالشكل الآتي urlscheme://restofurl.
عنوان URL وحيد نسبي مصاغ صياغةً صحيحةً.

راجع قسم «التحقق من الحقل» لمزيدٍ من التفاصيل.

استخدام حقل روابط URL

عندما تُنشِئ عنصر <input> من النوع url، فسيتحقق المتصفح تلقائيًا أنَّ النص المدخل فيه مصاغٌ بصيغةٍ صحيحة تماثل صياغة روابط URL؛ وهذا ما يساعد في تفادي الحالات التي يكتب فيها المستخدم عنوان URL بطريقة خطأ.

من المهم ملاحظة أنَّ استخدام هذا الحقل لا يعني أنَّ عنوان URL المُحدَّد هو عنوانٌ لمورد موجود، أو يشير إلى موقع المستخدم، أو أنَّه مناسبٌ لاحتياجاتك، وإنما يتحقق من أنَّه رابط URL صالح فقط.

حقل إدخال روابط URL بسيط

<form>
  <div>
    <label for="URL">أدخل رابطًا: </label>
    <input type="url" id="URL" name="URL">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

لاحظ أنَّ الحقل سيكون صالحًا إذا كان فارغًا أو يحتوي على عنوان URL وحيد صالح. إذا أضفنا الخاصية required فسنمنع إرسال النموذج إذا كان فارغًا.

لا يوجد أي شيء غريب في الحقل السابق، فعند إرسال النموذج فسيرسل الحقل كما في myURL=http%3A%2F%2Fwww.example.com.

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

يمكنك توفير محتوى نائب (placeholder) داخل الحقل لتوفير تلمحية عن المحتوى الذي تريد من المستخدم إدخاله، وذلك باستعمال الخاصية placeholder. ألقِ نظرةً على المثال الآتي:

<form>
  <div>
    <label for="URL">أدخل رابطًا: </label>
    <input type="url" id="URL" name="URL"
      placeholder="http://www.example.com">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

التحكم بحجم الحقل الفيزيائي

يمكن تعديل حجم الحقل باستخدام الخاصية size التي يمكنك عبرها تحديد عدد المحارف التي ستُعرَض في حقل الإدخال في وقتٍ واحد، مما يسمح بتحديد حجم العنصر بناءً على عدد الأحرف وليس على قياسٍ محدد بواحدة البكسل. فعلى سبيل المثال، الحقل الآتي عرضه يساوي 30 (محرفًا):

<form>
  <div>
    <label for="URL">أدخل رابطًا: </label>
    <input type="url" id="URL" name="URL" size="30">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

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

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

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

<form>
  <div>
    <label for="URL">أدخل رابطًا: </label>
    <input type="url" id="URL" name="URL" size="30" list="defaultURLs">

    <datalist id="defaultURLs">
      <option value="https://wiki.hsoub.com/">
      <option value="https://academy.hsoub.com/">
      <option value="https://io.hsoub.com/">
      <option value="https://mostaql.com/">
      <option value="https://khamsat.com/">
    </datalist>
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

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

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

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

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

المتصفحات التي تدعم الحقل url ستُوفِّر تحققًا تلقائيًا من محتوى الحقل بمطابقته مع الصيغة القياسية لروابط URL.

جعل هذا الحقل مطلوبًا

يمكنك استخدام الخاصية required لجعل إدخال قيمة بالحقل هو أمرٌ إلزامي كي يستطيع المتصفح أن يُرسِل النموذج:

<form>
  <div>
    <label for="URL">أدخل رابطًا: </label>
    <input type="url" id="URL" name="URL" required>
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

وإذا حاول المستخدم إرسال النموذج دون إدخال معلومات في الحقل فسيُظهِر المتصفح رسالة خطأ.

تحديد طول حقل الإدخال

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

المثال الآتي ينُشئ حقلًا يدعم إدخال روابط وقياسه (size) يساوي 30 محرفًا، ولا يسمح بإدخال القيم الأقل من 10 محارف، ولا الأطول من 80 محرف:

<form>
  <div>
    <label for="URL">أدخل رابطًا: </label>
    <input type="url" id="URL" name="URL" size="30" minlength="10" maxlength="80">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

تحديد نمط معيّن للمدخلات

يمكنك استخدام الخاصية pattern لتحديد تعبير نمطي الذي يجب أن يُطابِق المدخلات لكي تُعتبَر صالحة). لاحظ أنَّ ذلك يعني أنَّ المدخلات يجب أن تطابق البنية العامة لروابط URL إضافةً إلى النمط المضبوط في الخاصية pattern:

<form>
  <div>
    <label for="URL">أدخل رابطًا فرعيًا تابعًا لشركة حسوب: </label>
    <input type="url" id="URL" name="URL" pattern=".*\.hsoub\.com.*" title="يجب أن يكون الرابط لنطاقٍ فرعي لشركة حسوب">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

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

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

الخاصية value