عرض مصدر HTML/input/text

<noinclude>{{DISPLAYTITLE:الحقل <code>text</code>}}</noinclude>
عناصر <code>[[HTML/input|<input>]]</code> ذات النوع <code>text</code> تسمح بإنشاء حقول إدخال نصية بسيطة ذات سطرٍ وحيد.<syntaxhighlight lang="html">
<input type="text" name="name">

</syntaxhighlight>

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

يمكن الحصول على قيمة هذه الخاصية باستخدام الخاصية <code>HTMLInputElement.value</code> عبر JavaScript:<syntaxhighlight lang="javascript">
let theText = myTextInput.value;

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

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

=== حقل إدخال نصي بسيط ===
<syntaxhighlight lang="html">
<form>
  <div>
    <label for="uname">اختر اسمًا للمستخدم: </label>
    <input type="text" id="uname" name="name">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>
</syntaxhighlight>عند إرسال النموذج السابق، فستُرسَل البيانات على شكل أزواج من أسماء الحقول والقيم المرتبطة بها؛ ففي المثال السابق، لو أدخلنا القيمة Bashir في الحقل قبل الإرسال، فستُرسَل القيمة إلى الخادم بالشكل <code>uname=Bashir</code>. احرص على ضبط الخاصية <code>name</code> في عنصر <code>[[HTML/input|<input>]]</code> وإلا فلن تُضمَّن قيمة الحقل عند إرسال النموذج.

=== ضبط المحتوى النائب ===
يمكنك توفير محتوى نائب (placeholder) داخل الحقل النصي لتوفير تلمحية عن المحتوى الذي تريد من المستخدم إدخاله، وذلك باستعمال الخاصية placeholder. ألقِ نظرةً على المثال الآتي:<syntaxhighlight lang="html">
<form>
  <div>
    <label for="uname">اختر اسمًا للمستخدم: </label>
    <input type="text" id="uname" name="name" placeholder="أحرف صغيرة دون فراغات">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>
</syntaxhighlight>يعرض نص المحتوى المنائب عادةً باتسعمال خطٍ أكشف من خط العنصر، ويُعرَض عادةً داخل حقل التعديل عندما تكون قيمة الخاصية value فارغةً، وعند إدخال بيانات في مربع النص فسيختفي المحتوى النائب وإذا حُذِفَ محتوى الحقل النصي فسيظهر المحتوى النائب مرةً أخرى.

=== التحكم بحجم الحقل الفيزيائي ===
يمكن تعديل حجم الحقل باستخدام الخاصية size التي يمكنك عبرها تحديد عدد المحارف التي ستُعرَض في حقل الإدخال في وقتٍ واحد، مما يسمح بتحديد حجم العنصر بناءً على عدد الأحرف وليس على قياسٍ محدد بواحدة البكسل. فعلى سبيل المثال، الحقل الآتي عرضه يساوي 30 (محرفًا):<syntaxhighlight lang="html">
<form>
  <div>
    <label for="uname">اختر اسمًا للمستخدم: </label>
    <input type="text" id="uname" name="name"
      placeholder="أحرف صغيرة دون فراغات" size="30">
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>
</syntaxhighlight>

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

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

=== جعل هذا الحقل مطلوبًا ===
يمكنك استخدام الخاصية <code>required</code> لجعل إدخال قيمة بالحقل هو أمرٌ إلزامي كي يستطيع المتصفح أن يُرسِل النموذج:<syntaxhighlight lang="html">
<form>
  <div>
    <label for="uname">اختر اسمًا للمستخدم: </label>
    <input type="text" id="uname" name="name" required>
  </div>
  <div>
    <button>إرسال</button>
  </div>
</form>
</syntaxhighlight>وإذا حاول المستخدم إرسال النموذج دون إدخال معلومات في حقل النص فسيُظهِر المتصفح رسالة خطأ.

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

يجب أن يكون طول اسم المستخدم في المثال الآتي من 4 إلى 8 محارف:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>إذا حاولتَ إرسال النموذج بأقل من 4 محارف فستظهر رسالة خطأ (تختلف باختلاف المتصفح)، ولن يسمح لك المتصفح بكتابة أكثر من 8 محارف.

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

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

المثال الآتي لا يسمح إلا بإدخال 4-8 محارف لاتينية بالحالة الصغيرة (lowercase):<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable" style="width: 50%;"
 !| Chrome
 ! Firefox
 ! Edge
 ! Safari
 ! Opera
|-
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|}
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:HTML Forms|{{SUBPAGENAME}}]]
[[تصنيف:HTML Input Types|{{SUBPAGENAME}}]]