إنشاء مربعات نص ديناميكية باستخدام جافا سكريبت

تُعدّ مربعات النص، أو حقول الإدخال، عناصر واجهة مستخدم أساسية. وبينما توفر HTML الأساسيات، فإن JavaScript يُمكّن من التحكم والتلاعب الديناميكيين. تُبيّن هذه المقالة إنشاء وإدارة مربعات النص باستخدام كل من HTML و JavaScript، مع تغطية مربعات النص المفردة، والمتعددة، والمتولدة ديناميكيًا.

جدول المحتويات

1. إنشاء مربع نص باستخدام HTML
2. إنشاء مربع نص باستخدام JavaScript
3. إنشاء مربعات نص متعددة باستخدام JavaScript
4. تنسيق مربعات النص
5. الخاتمة

إنشاء مربع نص باستخدام HTML

أبسط نهج هو مباشرةً داخل HTML الخاص بك. هذا مناسب لمربعات النص الثابتة.

<input type="text" id="myTextBox" placeholder="أدخل النص هنا">

هذا يُنشئ مربع نص بمعرّف “myTextBox” وعلامة مكان. type="text" يُحددها كمدخل نص.

إنشاء مربع نص باستخدام JavaScript

يوفر JavaScript إنشاءً ديناميكيًا، وهو مثالي لأعداد مربعات النص المحددة وقت التشغيل أو التلاعب الديناميكي.

function createTextBox() {
  const textBox = document.createElement("input");
  textBox.type = "text";
  textBox.id = "dynamicTextBox";
  textBox.placeholder = "أدخل النص الديناميكي هنا";
  document.body.appendChild(textBox);
}

createTextBox();

document.createElement("input") يُنشئ العنصر. نقوم بتعيين السمات وإضافتها إلى جسم المستند.

إنشاء مربعات نص متعددة باستخدام JavaScript

بإمكاننا توسيع المثال السابق لإنشاء مربعات نص متعددة. هذا مفيد للنماذج ذات الحقول المتغيرة أو واجهات المستخدم الديناميكية.

function createMultipleTextBoxes(numTextBoxes) {
  const container = document.createElement('div'); // إنشاء حاوية لتنظيم أفضل
  for (let i = 0; i < numTextBoxes; i++) {
    const textBox = document.createElement("input");
    textBox.type = "text";
    textBox.id = `dynamicTextBox${i}`;
    textBox.placeholder = `مربع النص ${i + 1}`;
    container.appendChild(textBox);
    container.appendChild(document.createElement('br')); 
  }
  document.body.appendChild(container);
}

createMultipleTextBoxes(3);

تُنشئ حلقة for مربعات نص متعددة. تُستخدم حاوية div لتنظيم وهيكلة أفضل.

تنسيق مربعات النص

يمكنك تنسيق مربعات النص باستخدام CSS. إليك بعض الأمثلة:

input[type="text"] {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

يضيف هذا CSS العرض، والتباعد، والحدود، والزوايا المُدورة إلى جميع مربعات النص.

الخاتمة

يُوفر JavaScript تحكمًا قويًا في مربعات النص، مما يُمكّن تطبيقات الويب الديناميكية والمتجاوبة. اجمع هذا مع CSS للتنسيق لإنشاء واجهات مستخدم سهلة الاستخدام. تذكر أفضل ممارسات إمكانية الوصول عند تصميم النماذج.