Creación dinámica de cuadros de texto con JavaScript

Los cuadros de texto, o campos de entrada, son elementos fundamentales de la interfaz de usuario. Si bien HTML proporciona lo básico, JavaScript permite un control y manipulación dinámicos. Este artículo muestra cómo crear y administrar cuadros de texto usando HTML y JavaScript, cubriendo cuadros de texto únicos, múltiples y generados dinámicamente.

Tabla de contenido

1. Crear un cuadro de texto usando HTML
2. Crear un cuadro de texto usando JavaScript
3. Crear múltiples cuadros de texto usando JavaScript
4. Estilo de los cuadros de texto
5. Conclusión

Crear un cuadro de texto usando HTML

El enfoque más simple es directamente dentro de su HTML. Esto es adecuado para cuadros de texto estáticos.

<input type="text" id="myTextBox" placeholder="Introduzca texto aquí">

Esto crea un cuadro de texto con el ID «myTextBox» y un marcador de posición. type="text" lo especifica como una entrada de texto.

Crear un cuadro de texto usando JavaScript

JavaScript proporciona creación dinámica, ideal para la cantidad de cuadros de texto determinada en tiempo de ejecución o manipulación dinámica.

function createTextBox() {
  const textBox = document.createElement("input");
  textBox.type = "text";
  textBox.id = "dynamicTextBox";
  textBox.placeholder = "Introduzca texto dinámico aquí";
  document.body.appendChild(textBox);
}

createTextBox();

document.createElement("input") crea el elemento. Establecemos los atributos y lo agregamos al cuerpo del documento.

Crear múltiples cuadros de texto usando JavaScript

Extendiendo el ejemplo anterior, podemos crear múltiples cuadros de texto. Esto es útil para formularios con campos variables o interfaces de usuario dinámicas.

function createMultipleTextBoxes(numTextBoxes) {
  const container = document.createElement('div'); // Crear un contenedor para una mejor organización
  for (let i = 0; i < numTextBoxes; i++) {
    const textBox = document.createElement("input");
    textBox.type = "text";
    textBox.id = `dynamicTextBox${i}`;
    textBox.placeholder = `Cuadro de texto ${i + 1}`;
    container.appendChild(textBox);
    container.appendChild(document.createElement('br')); 
  }
  document.body.appendChild(container);
}

createMultipleTextBoxes(3);

Un bucle for genera múltiples cuadros de texto. Se utiliza un contenedor div para una mejor estructura y estilo.

Estilo de los cuadros de texto

Puede aplicar estilo a los cuadros de texto usando CSS. Aquí hay algunos ejemplos:

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

Este CSS agrega ancho, relleno, borde y esquinas redondeadas a todos los cuadros de texto.

Conclusión

JavaScript ofrece un potente control sobre los cuadros de texto, permitiendo aplicaciones web dinámicas y receptivas. Combine esto con CSS para el estilo para crear interfaces fáciles de usar. Recuerde las mejores prácticas de accesibilidad al diseñar formularios.