الفرق بين المراجعتين ل"HTML/input/url"

من موسوعة حسوب
< HTML‏ | input
اذهب إلى التنقل اذهب إلى البحث
(إنشاء الصفحة مع البنية الأساسية لها)
 
(إكمال محتوى الصفحة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:الحقل <code>url</code>}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:الحقل <code>url</code>}}</noinclude>
−
محتوى الصفحة
+
عناصر <code><input></code> ذات النوع <code>url</code> تستخدم للسماح للمستخدم بإدخال وتعديل رابط URL، وسيتحقق المتصفح تلقائيًا من المدخلات للحرص على أنها فارغة أو رابط URL بصيغة سليمة.<syntaxhighlight lang="html">
 +
<input type="url" name="url">
 +
 
 +
</syntaxhighlight>إذا لم يكن المتصفح يدعم الحقل <code>url</code> فسيستخدم المتصفح الحقل <code>[[HTML/input/text|text]]</code> الافتراضي.
 +
 
 +
== الخاصية <code>value</code> ==
 +
تحتوي الخاصية <code>value</code> في الحقل <code>url</code> على سلسلة نصية (<code>DOMString</code>) التي تمثل المحتوى الحالي النصي الموجود في حقل الإدخال والذي جرى التحقق من صيغته على أنه رابط URL صحيح. هنالك ثلاث صيغ صحيحة لقيمة هذا الحقل:
 +
* سلسلة نصية فارغة <code>""</code> تشير إلى أنَّ المستخدم لم يدخل قيمةً أو أنَّه القيمة التي أدخلها قد حذفها.
 +
* عنوان URL وحيد مطلق مصاغ صياغةً صحيحةً، وهذا لا يعني بالضرورة أنَّ رابط URL موجود، لكن المهم أن يكون بصياغة سليمة. وهذا يعني أنَّه بالشكل الآتي <code>urlscheme://restofurl</code>.
 +
* عنوان URL وحيد نسبي مصاغ صياغةً صحيحةً.
 +
راجع قسم «التحقق من الحقل» لمزيدٍ من التفاصيل.
 +
 
 +
== استخدام حقل روابط URL ==
 +
عندما تُنشِئ عنصر <code>[[HTML/input|<input>]]</code> من النوع <code>url</code>، فسيتحقق المتصفح تلقائيًا أنَّ النص المدخل فيه مصاغٌ بصيغةٍ صحيحة تماثل صياغة روابط URL؛ وهذا ما يساعد في تفادي الحالات التي يكتب فيها المستخدم عنوان URL بطريقة خطأ.
 +
 
 +
من المهم ملاحظة أنَّ استخدام هذا الحقل لا يعني أنَّ عنوان URL المُحدَّد هو عنوانٌ لمورد موجود، أو يشير إلى موقع المستخدم، أو أنَّه مناسبٌ لاحتياجاتك، وإنما يتحقق من أنَّه رابط URL صالح فقط.
 +
 
 +
=== حقل إدخال روابط URL بسيط ===
 +
<syntaxhighlight lang="html">
 +
<form>
 +
  <div>
 +
    <label for="URL">أدخل رابطًا: </label>
 +
    <input type="url" id="URL" name="URL">
 +
  </div>
 +
  <div>
 +
    <button>إرسال</button>
 +
  </div>
 +
</form>
 +
</syntaxhighlight>لاحظ أنَّ الحقل سيكون صالحًا إذا كان فارغًا أو يحتوي على عنوان URL وحيد صالح. إذا أضفنا الخاصية <code>required</code> فسنمنع إرسال النموذج إذا كان فارغًا.
 +
 
 +
لا يوجد أي شيء غريب في الحقل السابق، فعند إرسال النموذج فسيرسل الحقل كما في <code>myURL=http%3A%2F%2Fwww.example.com</code>.
 +
 
 +
=== ضبط المحتوى النائب ===
 +
يمكنك توفير محتوى نائب (placeholder) داخل الحقل لتوفير تلمحية عن المحتوى الذي تريد من المستخدم إدخاله، وذلك باستعمال الخاصية <code>placeholder</code>. ألقِ نظرةً على المثال الآتي:<syntaxhighlight lang="html">
 +
<form>
 +
  <div>
 +
    <label for="URL">أدخل رابطًا: </label>
 +
    <input type="url" id="URL" name="URL"
 +
      placeholder="http://www.example.com">
 +
  </div>
 +
  <div>
 +
    <button>إرسال</button>
 +
  </div>
 +
</form>
 +
</syntaxhighlight>
 +
 
 +
=== التحكم بحجم الحقل الفيزيائي ===
 +
يمكن تعديل حجم الحقل باستخدام الخاصية <code>size</code> التي يمكنك عبرها تحديد عدد المحارف التي ستُعرَض في حقل الإدخال في وقتٍ واحد، مما يسمح بتحديد حجم العنصر بناءً على عدد الأحرف وليس على قياسٍ محدد بواحدة البكسل. فعلى سبيل المثال، الحقل الآتي عرضه يساوي 30 (محرفًا):<syntaxhighlight lang="html">
 +
<form>
 +
  <div>
 +
    <label for="URL">أدخل رابطًا: </label>
 +
    <input type="url" id="URL" name="URL" size="30">
 +
  </div>
 +
  <div>
 +
    <button>إرسال</button>
 +
  </div>
 +
</form>
 +
</syntaxhighlight>
  
 
== دعم المتصفحات ==
 
== دعم المتصفحات ==

مراجعة 14:10، 28 فبراير 2018

عناصر <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
مدعوم مدعوم مدعوم مدعوم مدعوم
مجلوبة من "https://wiki.hsoub.com/index.php?title=HTML/input/url&oldid=2865"