Que onda Explorers, vamos a empezar con las entradas en páginas web, estas entradas son muy útiles para tener nuestra interfaz con los usuarios.
En el siguiente video les explico un poco más
⬇️⬇️⬇️⬇️⬇️⬇️ VIDEO ⬇️⬇️⬇️⬇️⬇️⬇️
LINK DE VIDEO
El código de ejemplo está en el siguiente link
⬇️⬇️⬇️⬇️⬇️⬇️ CÓDIGO ⬇️⬇️⬇️⬇️⬇️⬇️
LINK DE CÓDIGO
Recuerda que para ver el video tienes que iniciar tu sesión de innovaccion
¡Hola Explorers! Bienvenidos a otra sesión de HTML.
El día de hoy hablaremos de los elementos compuestos, específicamente de los formularios. Los formularios son pieza clave de muchas páginas y aplicaciones web, un ejemplo sencillo de estos, son los formularios de contacto, de inicio de sesión, de selección, entre muchos otros, su principal característica es que tienen entradas que recaban información de nuestro usuario y de igual forma tiene botones que capturan o enviar esta información.
Pregúntate en que páginas o aplicaciones has visto estos formularios, revísalas, seguro llenaste algunos campos como por ejemplo tu correo o número de teléfono para que te contactaran. Incluso, WhatsApp tiene un campo de texto en donde tu escribes y envías información, un tweet, una foto en Instagram, piensa en cosas simples que usas en el día a día. Como podrás notar, nuestros teléfonos y computadoras tienen formularios en todos lados, únicamente varía el estilo y la forma de interacción.
Tipos de entradas (inputs)
Entrada de tipo texto
<input type="text" id="Input1" name="Input1">Los atributos id y nombre nos van a permitir identificarlos, y es de suma importancia para saber a qué campo nos estamos refiriendo, para cuando tengamos más de un input, y tengamos que utilizar su información en el backend o para procesarlos después. Estos atributos también pueden colocarse en cualquier otro elemento.
Etiquetas (labels) Permite etiquetar un elemento Las etiquetas usualmente se colocan antes del elemento que deseas etiquetar. Y puedes colocarlo en la posición que tú quieras, al frente de tu input, arriba, abajo, etc., pero no te olvides de pensar siempre en el usuario en la legibilidad de lectura.
<label for="Input1">Ejemplo de input de texto</label>De esta forma estas indicando que el input de texto identificado como "Input1" tendrá una etiqueta llamada "Ejemplo de input de texto".
El código en orden queda de la siguiente manera:
<label for="Input1">Ejemplo de input de texto</label>
<input type="text" id="Input1" name="Input1">Aquí más ejemplos de inputs de tipo de texto
Input de correo
<h2>Input De Texto</h2>
<label for="correo1">Input de Correo</label><br>
<input type="email" id="correo1" name="correo1"><br><br>El input de correo va a validar que la información dentro del input tenga un formato de correo, es decir que contenga elementos vitales como una arroba, un punto, etc. De lo contrario le indicara al usuario que es un correo inválido, esta última funcionalidad se usa con Javascript y estilos.
Input de número
<label for="numero1">Input de número</label><br>
<input type="number" id="numero1" name="numero1"><br><br>Valida que solo puedas ingresar datos de tipo número y no letras.
Input de password
<label for="psw1">Input de Password</label><br>
<input type="password" id="psw1" name="psw1"><br><br>El input de tipo password oculta la información para que no se muestre.
Input de teléfono
<label for="tel1">Input de Teléfono</label><br>
<input type="tel" id="tel1" name="tel1" maxlength="10"><br><br>El input de teléfono valida que únicamente puedas ingresar 10 dígitos, por medio del maxlength="10".
Input de URL
<label for="url1">Input de URL</label><br>
<input type="url" id="url1" name="url1"><br><br>Valida que la URL tenga ciertas características, identifica que sea una URL válida.
La importancia de usar de forma correcta estas validaciones dentro de cada tipo de formulario nos va a permitir protegernos de la información que llega a nuestra base de datos y evitar tener información "sucia" o incluso ataques por medio de la información ingresada.
Recuerda, únicamente se valida si cumple con el formato que estableciste en el código, más no si el número existe o la URL.
¡Vámonos hasta el espacio y más allá Explorers!