JavaScript ile Dinamik Metin Kutusu Oluşturma

Metin kutuları veya giriş alanları, temel UI öğeleridir. HTML temelini sağlarken, JavaScript dinamik kontrol ve manipülasyon yeteneği kazandırır. Bu makale, tek, çoklu ve dinamik olarak oluşturulan metin kutularını kapsayarak hem HTML hem de JavaScript kullanarak metin kutuları oluşturmayı ve yönetmeyi göstermektedir.

İçindekiler

1. HTML Kullanarak Metin Kutusu Oluşturma
2. JavaScript Kullanarak Metin Kutusu Oluşturma
3. JavaScript Kullanarak Çoklu Metin Kutusu Oluşturma
4. Metin Kutularının Stilini Ayarlama
5. Sonuç

HTML Kullanarak Metin Kutusu Oluşturma

En basit yaklaşım, doğrudan HTML’nizdedir. Bu, statik metin kutuları için uygundur.

<input type="text" id="myTextBox" placeholder="Buraya metin girin">

Bu, “myTextBox” kimliğine ve bir yer tutucuya sahip bir metin kutusu oluşturur. type="text", bunun bir metin girişi olduğunu belirtir.

JavaScript Kullanarak Metin Kutusu Oluşturma

JavaScript, çalışma zamanında belirlenen metin kutusu sayıları veya dinamik manipülasyon için ideal olan dinamik oluşturma sağlar.

function createTextBox() {
  const textBox = document.createElement("input");
  textBox.type = "text";
  textBox.id = "dynamicTextBox";
  textBox.placeholder = "Dinamik metin girin";
  document.body.appendChild(textBox);
}

createTextBox();

document.createElement("input") öğeyi oluşturur. Öznitelikleri ayarlar ve belge gövdesine ekleriz.

JavaScript Kullanarak Çoklu Metin Kutusu Oluşturma

Önceki örneği genişleterek, birden fazla metin kutusu oluşturabiliriz. Bu, değişken alanlara veya dinamik UI’lara sahip formlar için yararlıdır.

function createMultipleTextBoxes(numTextBoxes) {
  const container = document.createElement('div'); // Daha iyi düzenleme için bir kapsayıcı oluşturun
  for (let i = 0; i < numTextBoxes; i++) {
    const textBox = document.createElement("input");
    textBox.type = "text";
    textBox.id = `dynamicTextBox${i}`;
    textBox.placeholder = `Metin Kutusu ${i + 1}`;
    container.appendChild(textBox);
    container.appendChild(document.createElement('br')); 
  }
  document.body.appendChild(container);
}

createMultipleTextBoxes(3);

Bir for döngüsü birden fazla metin kutusu oluşturur. Daha iyi yapı ve stil için bir kapsayıcı div kullanılır.

Metin Kutularının Stilini Ayarlama

CSS kullanarak metin kutularının stilini ayarlayabilirsiniz. İşte birkaç örnek:

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

Bu CSS, tüm metin kutularına genişlik, dolgu, kenarlık ve yuvarlak köşeler ekler.

Sonuç

JavaScript, dinamik ve duyarlı web uygulamaları sağlayan metin kutuları üzerinde güçlü bir kontrol sunar. Stil için CSS ile birleştirerek kullanıcı dostu arayüzler oluşturun. Formları tasarlarken erişilebilirlik en iyi uygulamalarını unutmayın.