Cuadros de texto JavaScript
- Crear un cuadro de texto usando HTML
- Crear un cuadro de texto usando JavaScript
- Crear múltiples cuadros de texto usando JavaScript
- Conclusión
Podemos elegir y usar muchos lenguajes de secuencias de comandos en el desarrollo web, pero JavaScript es uno de los mejores lenguajes de secuencias de comandos que podemos usar.
JavaScript hace que las páginas web sean interactivas y dinámicas y, por lo general, los programadores y desarrolladores lo utilizan junto con lenguajes de marcado como HTML (Lenguaje de marcado de hipertexto), XHTML (Lenguaje de marcado de hipertexto extensible) y lenguajes de hojas de estilo como CSS (Hojas de estilo en cascada).
Un cuadro de texto es una característica crucial que podemos ver en muchos programas, como navegadores web, clientes de correo electrónico, etc. En términos simples, un cuadro de texto es un área gráfica donde los usuarios pueden ingresar texto, principalmente utilizado para obtener información del usuario. .
Por lo general, podemos crear cuadros de texto con HTML, pero también podemos usar JavaScript para crearlos. A través de este artículo, discutimos cómo crear cuadros de texto usando JavaScript con la ayuda de HTML.
Antes de crear cuadros de texto usando JavaScript, veamos cómo podemos crear un cuadro de texto simple usando HTML.
Crear un cuadro de texto usando HTML
Podemos construir cuadros de texto en HTML usando la etiqueta <input>. Como atributo damos tipo, y como valor del mismo damos texto.
La sintaxis para crear un cuadro de texto se encuentra a continuación.
<input type = "text">
Veamos cómo podemos crear un cuadro de texto usando el fragmento de código anterior. Consulte el siguiente código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML text box</title>
</head>
<body>
<input type="text", placeholder="type something..">
</body>
</html>
El fragmento de código anterior es un fragmento de código simple que crea un cuadro de texto simple usando la etiqueta <input>. Para verlo con más precisión, agregamos el atributo marcador de posición con algunas palabras como su valor.
Nos dará la siguiente salida.
Como se muestra arriba, obtenemos un cuadro de texto simple, como se esperaba.
Crear un cuadro de texto usando JavaScript
En lugar de usar HTML, podemos usar JavaScript para crear un cuadro de texto. A continuación se muestran los tres pasos que seguiremos para lograr esto.
-
Cree el elemento de entrada utilizando la función
createElement()y asígnelo a una variable. -
Establezca el
tipocomo atributo ytextocomo el valor del elemento de entrada. -
Agrega el elemento
inputdentro de la etiqueta<body>.
Construyamos el código para los pasos anteriores.
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>JavaScript text box</title>
</head>
<body>
<script>
const textBox = document.createElement("input");
textBox.setAttribute("type", "text");
document.body.appendChild(textBox);
</script>
</body>
</html>
En el código anterior, hemos convertido los tres pasos mencionados anteriormente en un fragmento de código. Dentro de la etiqueta <body>, hemos usado la función createElement() para crear un elemento input y asignar esa función a una variable llamada textbox.
Luego establecemos el tipo como atributo y texto como el valor de la variable recién declarada. Luego, agregamos la variable textbox (elemento input) a la etiqueta <body>.
Ahora, si ejecutamos el código implementado, obtendremos un cuadro de texto simple como lo obtuvimos anteriormente. Vea la siguiente salida.
Crear múltiples cuadros de texto usando JavaScript
Hay algunas ocasiones en las que necesitamos crear más de un cuadro de texto. A veces agregamos una sección en un formulario para obtener la fecha de nacimiento de un usuario en particular.
En tales situaciones, los desarrolladores desean obtener la fecha, el mes y el año por separado. Para eso, usan múltiples cuadros de texto.
Hay varias formas de crear más de un cuadro de texto; la forma más sencilla es utilizar un bucle for. Veamos cómo podemos crear múltiples cuadros de texto usando un bucle for.
En primer lugar, crearemos una etiqueta <div>, y dentro de ella haremos los cuadros de texto. Además, le daremos una ID a la etiqueta <div> de la siguiente manera.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>JavaScript multiple text boxes</title>
</head>
<body>
<div id="textBoxes"> </div>
<script src="main.js"></script>
</body>
</html>
A continuación, podemos implementar el código JavaScript. Podemos escribirlo en un archivo separado o como código JavaScript en línea.
Para este ejemplo, implementaremos un archivo JavaScript separado. Consulte el siguiente código.
function createTextBoxes(number) {
var string = '';
var i;
for (i = 0; i < number; i++) {
string += '<input type = "text" placeholder = "type something..">';
}
document.getElementById('textBoxes').innerHTML = string;
}
createTextBoxes(4);
En el fragmento de código anterior, hemos creado una función llamada createTextBoxes y le hemos dado el número como parámetro. El número es el número de cuadros de texto que necesitamos.
Entonces hemos dado una cadena vacía como una cadena y i como el iterador. Debajo de esa declaración, hemos usado un bucle for, que itera hasta que alcanza el valor del parámetro number.
Luego, dentro del bucle for, hemos creado un cuadro de texto usando la etiqueta <input>. Le hemos dado el atributo tipo junto con el valor texto para identificarlo como un cuadro de texto y un atributo marcador de posición junto con algo de texto.
Después de eso, lo asignamos al componente relevante en la etiqueta HTML <cuerpo> usando su ID.
Finalmente, hemos llamado a la función pasando 4 a la función createTextBoxes() como parámetro.
Después de ejecutar el código, se generará el siguiente resultado.
Como puede ver, tenemos cuatro cuadros de texto con los marcadores de posición que le dimos.
Conclusión
En este artículo, discutimos qué es un cuadro de texto y por qué lo necesitamos. Además, aprendimos a crear un cuadro de texto usando JavaScript y HTML.
En primer lugar, creamos un cuadro de texto simple usando JavaScript y luego demostramos cómo crear varios cuadros de texto con un bucle for a través de un ejemplo.
Hay más métodos para crear cuadros de texto usando JavaScript, pero los métodos discutidos anteriormente son las formas más simples y fáciles de lograr el objetivo.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.