HTML/input/text

عناصر <input> ذات النوع text تسمح بإنشاء حقول إدخال نصية بسيطة ذات سطرٍ وحيد.

<input type="text" name="name">

الخاصية value

تحتوي الخاصية value في الحقل text على سلسلة نصية (DOMString) التي تمثل المحتوى الحالي النصي الموجود في حقل الإدخال.

يمكن الحصول على قيمة هذه الخاصية باستخدام الخاصية HTMLInputElement.value عبر JavaScript:

let theText = myTextInput.value;

لا توجد شروط للتحقق من صحة هذا الحقل (راجع قسم «التحقق من الحقل» لمزيدٍ من التفاصيل)، يمكن أن تكون القيمة سلسلةً نصيةً أو قيمةً فارغةً.

استخدام حقل الإدخال النصي

عناصر <input> ذات النوع text تُنشِئ حقول إدخال أساسية تسمح بإدخال سطر وحيد من النص. يمكنك استخدام حقل الإدخال النصي في أي مكان تريد فيه من المستخدم إدخال قيمة ذات سطرٍ واحد، ولم يكن بالإمكان تمثيل هذه القيمة باستخدام حقل إدخال من نوع آخر (فلو كان ما تريد من المستخدم إدخاله بريدًا إلكترونيًا فيجدر بك استخدام الحقل email، أو إذا كان حقلًا للبحث فاستخدم الحقل search، وإذا كان تاريخًا فاستخدم date، وهلم جرًا).

حقل إدخال نصي بسيط

<form>
  <div>
    <label for="uname">اختر اسمًا للمستخدم: </label>
    <input type="text" id="uname" name="name">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

عند إرسال النموذج السابق، فستُرسَل البيانات على شكل أزواج من أسماء الحقول والقيم المرتبطة بها؛ ففي المثال السابق، لو أدخلنا القيمة Bashir في الحقل قبل الإرسال، فستُرسَل القيمة إلى الخادم بالشكل uname=Bashir. احرص على ضبط الخاصية name في عنصر <input> وإلا فلن تُضمَّن قيمة الحقل عند إرسال النموذج.

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

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

<form>
  <div>
    <label for="uname">اختر اسمًا للمستخدم: </label>
    <input type="text" id="uname" name="name" placeholder="أحرف صغيرة دون فراغات">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

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

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

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

<form>
  <div>
    <label for="uname">اختر اسمًا للمستخدم: </label>
    <input type="text" id="uname" name="name"
      placeholder="أحرف صغيرة دون فراغات" size="30">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

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

عناصر <input> ذات النوع text ليس فيها آلية للتحقق التلقائي من قيمة الحقل، ذلك لأنها قادرة على قبول أي سلسلة نصية بغض النظر عن الغرض منها. لكن هنالك بعض الخيارات التي نستطيع عبرها التحكم بالحقل، والتي سنناقشها لاحقًا.

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

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

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

<form>
  <div>
    <label for="uname">اختر اسمًا للمستخدم: </label>
    <input type="text" id="uname" name="name" required>
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

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

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

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

يجب أن يكون طول اسم المستخدم في المثال الآتي من 4 إلى 8 محارف:

<form>
  <div>
    <label for="uname">اختر اسمًا للمستخدم: </label>
    <input type="text" id="uname" name="name" required size="10"
      minlength="4" maxlength="8">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

إذا حاولتَ إرسال النموذج بأقل من 4 محارف فستظهر رسالة خطأ (تختلف باختلاف المتصفح)، ولن يسمح لك المتصفح بكتابة أكثر من 8 محارف.

ملاحظة: إذا حددت قيمةً للخاصية minlength لكنك لم تضبط الخاصية required، فسيعدّ الحقل صالحًا، لأن المستخدم ليس مجبرًا على تحديد قيمة.

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

يمكنك استخدام الخاصية pattern لتحديد تعبير نمطي الذي يجب أن يُطابِق المدخلات لكي تُعتبَر صالحة).

المثال الآتي لا يسمح إلا بإدخال 4-8 محارف لاتينية بالحالة الصغيرة (lowercase):

<form>
  <div>
    <label for="uname">اختر اسمًا للمستخدم: </label>
    <input type="text" id="uname" name="name" required pattern="[a-z]{4,8}">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>

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

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