¿Cómo crear un formulario con HTML, CSS y JavaScript? - Tutorial paso a paso
Aprende cómo crear un formulario básico en HTML, CSS y JavaScript a través de un ejemplo práctico que te permitirá entender el funcionamiento de los formularios en la programación web.
¿Quieres aprender a crear formularios en HTML, CSS y JavaScript? Este artículo te mostrará paso a paso cómo hacerlo a través de un ejemplo práctico que te permitirá entender el funcionamiento de los formularios en la programación web.
Ejemplo práctico:
El ejercicio consiste en leer el nombre y la edad de cualquier persona e imprimir la edad.
Para comenzar, en un editor de texto se debe crear la estructura básica de HTML. En el body se creará el formulario con las etiquetas form. Aunque la etiqueta center está obsoleta debido al uso de archivos de estilo CSS, en este ejemplo se pueden implementar sin problemas.
Con la etiqueta p se coloca el mensaje que se quiera transmitir, en este caso la solicitud del nombre y edad de la persona.
Luego se crean los input. Se les asigna un id único, el tipo de entrada (en este caso text) y un placeholder. Como se puede apreciar, en este ejemplo hay dos entradas de texto.
Finalmente, se crea un botón que activará la función que permitirá mostrar la edad de la persona que esté ingresando sus datos, y un párrafo donde se mostrará el mensaje de salida.
<body>
<form>
<center> <p>Insertar Nombre</p> </center> <center>
<input id="Name" type="text" placeholder="Nombre">
</center>
</form>
<center> <p>Insertar Edad</p>
</center>
<center>
<input id="Age" type="text" placeholder="Edad">
</center>
<br/>
<center>
<button id="Send" onclick="Send()">Enviar</button>
</center>
<center>
<p id="Out"></p>
</center>
</body>
Después de haber creado el formulario, es necesario programar el botón para que realice la acción deseada. Para facilitar su comprensión, el código estará debidamente comentado.
<head>
<script>
//Se inicializa la función utilizando el mismo nombre de Botón
function Send() {
//Se inicializan la variables
var Name,Age,Text;
//Se obtiene el valor del nombre y la Edad mediante document.getElementById
Age = document.getElementById("Age").value;
Name = document.getElementById("Name").value;
//Se crea un condicional que evite mostrar mensaje
//En caso de que los datos ingresados estén incompletos
if (Age==0 && Name==0 || Name==0 || Age==0){
Text = " ";
}else {
Text = "Su Edad Es " + Age;
}
document.getElementById("Out").innerHTML = Text;
}
</script>
</head>
.jpeg)
Comentarios
Publicar un comentario