FORMULARIOS

Los formularios permiten que el usuario interatúe con la página. Pudiendo introducir información en diversos campos que podrá ser procesados por la misma pagina y/o enviada a un servidor.


Los datos los tendrán que proporcionar los usuarios mediante una serie de elementos que podemos utilizar para crear formularios.

CODIGO BASE PARA PRUEBAS 
<!DOCTYPE html>
<html lang="es-MX">
<head>
  <meta charset="UTF-8">    
  <meta name="viewport" content="width=device-width, initial-scale=1.0">           
</head>
<style> 
  body { background-color:#000; color:#FFF;  font-family:Arial, sans-serif;  }
</style>      
<body>
<!--En esta seccion puedes ESCRIBIR/PEGAR el codigo HTML para realizar pruebas -->
</body>
</html>

Etiqueta input type="text"

Configura el atributo type, con el valor text, para aceptar textos

Codigo

Campo de texto : <input type="text">

Visualizacion

Campo de texto :

Para procesar la información de cada campo es necesario darle un IDENTIFICADOR UNICO (No puede duplicarse). Para ello debes usar el atributo id, para este ejemplo se identificara como campo_nombre


Consejos prácticos para los atributos id :

Codigo

Nombre:<input type="text" id="campo_nombre">

Además, también puedes usar el atributo placeholder para que se muestre texto en el campo. Este texto se mostrará en gris cuando el campo esté vacío, pudiendo así dar alguna sugerencia, pista o consejo al usuario acerca del contenido que debe introducir:

Codigo

Nombre del usuario : 
<input 
  type="text" 
  id="campo_nombre_2" 
  placeholder="Introduce tu nombre">

Visualizacion

Nombre del usuario :

ACTIVIDADES A REALIZAR

Crea una pagina HTML muestre lo siguiente

  • Titulo H4:Introduzca los datos
  • Campo de texto 1
    • Leyenda : Nombre
    • Tipo : text
    • Identificador : Usuario_Nombre
    • Frase de sugerencia : Nombre de usuario
  • Campo de texto 2
    • Leyenda : Dir. calle
    • Tipo : text
    • Identificador : Usuario_Direccion_Calle
    • Frase de sugerencia : Solo calle
  • Campo de texto 3
    • Leyenda : Dir. Col.
    • Tipo : text
    • Identificador : Usuario_Direccion_Colonia
    • Frase de sugerencia : Solo Colonia

Procura no copiar directamente desde una IA


Etiqueta input otros tipos

Mail: Usando el atributo type="email" el campo validará la introducción de una dirección de email en el navegador, verificando que la dirección de correo sea válida antes de enviar el formulario:

Codigo

  <input 
    type="email" 
    id="campo_email" 
    placeholder="Introduce tu email">

Tel :Para crear un campo input que acepte un número de teléfono debes usar el atributo type="tel". En navegadores de escritorio funcionará como un campo de texto, pero en navegadores móviles es posible mostrar un teclado numérico.

Codigo

<input type="tel" id="campo_telefono">

Password: Mediante el atributo type="password" el campo representará con asteriscos todos los caracteres que introduzcamos en él, algo que resulta muy útil cuando quieres ocultar contraseñas

Codigo

<input 
  type="password" 
  id="campo_password" 
  placeholder="Introduce tu contraseña">

Number: Mediante el atributo type="number" el campo solo aceptará números. En la mayor parte de los navegadores, este campo mostrará dos flechas que sirven para aumentar o reducir el valor del número en una unidad:

Codigo

<input type="number" id="campo_edad" placeholder="Introduce tu edad">
ACTIVIDADES A REALIZAR

Añade al codigo de la pagina HTML que creaste lo siguiente

  • Campo numerico
    • Leyenda : Numero de casa
    • Tipo : number
    • Identificador : Usuario_Direccion_No
    • Frase de sugerencia : Num casa
  • Campo de fecha
    • Leyenda : Visita
    • Tipo : date
    • Identificador : Usuario_Fecha_Visita

Procura no copiar directamente desde una IA


Etiqueta Button

La etiqueta de HTML <button> representa un elemento presionable tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar.


Para procesar la acción de cada boton es necesario darle un IDENTIFICADOR UNICO (No puede duplicarse). Para ello debes usar el atributo id, para este ejemplo se identificara como Btn_Accion_01

Usando el atributo type = button el boton permitira desencadenara el evento click [presionable] SIN ENVIAR AUTOMATICAMENTE los datos a algun servidor.

Explicado de otra manera se crea un botón interactivo. El atributo type="button" indica que al hacer clic en el botón no se enviará el formulario (lo que haría type="submit"). Esto es necesario para ejecutar una función personalizada al hacer clic en el botón, sin enviar los datos a un servidor inmediatamente.

Mas adelante veremos como procesar este comportamiento en JavaScript

Codigo

<button 
      id="Btn_Accion_01" 
      type="button" >
      Presiona aqui
</button>

Visualizacion

ACTIVIDADES A REALIZAR

Añade al codigo de la pagina HTML que creaste lo siguiente

  • Boton
    • Leyenda del boton: procesar datos
    • Identificador : Btn_Procesar_Datos

Procura no copiar directamente desde una IA