الحقل `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>

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

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

الخاصية value