Funcionamiento del Formulario
- Acción al Enviar (
actionymethod):- Cuando el usuario hace clic en el botón “Registrar”, los datos se envían a la URL especificada en el atributo
action. - El método
POSTenvía los datos de forma segura, no visibles en la URL.
- Cuando el usuario hace clic en el botón “Registrar”, los datos se envían a la URL especificada en el atributo
- Validación HTML:
- El atributo
requiredasegura que el usuario complete los campos antes de enviar el formulario.
- El atributo
- Personalización:
placeholderbrinda un texto guía dentro de los campos.namees el identificador clave que permite al servidor procesar los datos.
1. Campo de Texto (type="text")
Un campo de entrada para texto libre.
Descripción:
Permite al usuario ingresar texto en una sola línea.
Ejemplo:
<input type="text" name="nombre" placeholder="Escribe tu nombre">
2. Contraseña (type="password")
Campo para contraseñas que oculta los caracteres ingresados.
Ejemplo:
<input type="password" name="password" placeholder="Escribe tu contraseña">
3. Correo Electrónico (type="email")
Valida que el valor ingresado sea una dirección de correo válida.
Ejemplo:
<input type="email" name="correo" placeholder="ejemplo@correo.com">
4. Número (type="number")
Campo para valores numéricos, con opción de definir rangos.
Ejemplo:
<input type="number" name="edad" min="0" max="120" step="1">
5. Fecha (type="date")
Muestra un selector para elegir una fecha.
Ejemplo:
<input type="date" name="fecha_nacimiento">
6. Hora (type="time")
Permite seleccionar una hora específica.
Ejemplo:
<input type="time" name="hora">
7. Fecha y Hora Local (type="datetime-local")
Combina un selector de fecha y hora.
Ejemplo:
<input type="datetime-local" name="cita">
8. Teléfono (type="tel")
Campo para números de teléfono.
Ejemplo:
<input type="tel" name="telefono" placeholder="+123456789">
9. URL (type="url")
Valida que el valor ingresado sea una URL válida.
Ejemplo:
<input type="url" name="sitio_web" placeholder="https://www.ejemplo.com">
10. Color (type="color")
Muestra un selector de colores.
Ejemplo:
<input type="color" name="color_favorito">
11. Casilla de Verificación (type="checkbox")
Permite seleccionar una o más opciones de un grupo.
Ejemplo:
<input type="checkbox" name="preferencias[]" value="noticias"> Noticias<br>
<input type="checkbox" name="preferencias[]" value="promociones"> Promociones
12. Botón de Opción (type="radio")
Permite seleccionar solo una opción de un grupo.
Ejemplo:
<input type="radio" name="genero" value="masculino"> Masculino<br>
<input type="radio" name="genero" value="femenino"> Femenino
13. Rango (type="range")
Control deslizante para seleccionar un valor dentro de un rango.
Ejemplo:
<input type="range" name="volumen" min="0" max="100" step="10">
14. Archivo (type="file")
Permite cargar un archivo desde el dispositivo del usuario.
Ejemplo:
<input type="file" name="documento">
15. Buscar (type="search")
Campo optimizado para búsquedas.
Ejemplo:
<input type="search" name="buscar" placeholder="Buscar...">
16. Oculto (type="hidden")
Campo no visible que almacena datos.
Ejemplo:
<input type="hidden" name="token" value="123456">
17. Botón (type="button")
Crea un botón sin acción predeterminada.
Ejemplo:
<button type="button" onclick="alert('¡Hola!')">Haz clic</button>
18. Enviar (type="submit")
Botón que envía el formulario.
Ejemplo:
<input type="submit" value="Enviar">
19. Restablecer (type="reset")
Botón que reinicia los valores del formulario.
Ejemplo:
<input type="reset" value="Limpiar">
20. Imagen (type="image")
Envía el formulario al hacer clic en la imagen.
Ejemplo:
<input type="image" src="enviar.png" alt="Enviar">Formulario Completo con Todos los Tipos de Campos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario Completo</title>
</head>
<body>
<h1>Formulario de Prueba Completo</h1>
<form action="/submit" method="POST" enctype="multipart/form-data">
<!-- Campo de texto -->
<label for="nombre">Nombre Completo:</label>
<input type="text" id="nombre" name="nombre" placeholder="Escribe tu nombre completo" required>
<br><br>
<!-- Campo de correo electrónico -->
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email" placeholder="ejemplo@correo.com" required>
<br><br>
<!-- Campo de contraseña -->
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" placeholder="Crea una contraseña" required>
<br><br>
<!-- Campo de número -->
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" min="0" max="120" step="1" required>
<br><br>
<!-- Campo de URL -->
<label for="website">Sitio Web Personal:</label>
<input type="url" id="website" name="website" placeholder="https://www.ejemplo.com">
<br><br>
<!-- Campo de teléfono -->
<label for="telefono">Teléfono:</label>
<input type="tel" id="telefono" name="telefono" placeholder="+123456789">
<br><br>
<!-- Campo de fecha -->
<label for="fecha">Fecha de Nacimiento:</label>
<input type="date" id="fecha" name="fecha_nacimiento">
<br><br>
<!-- Campo de hora -->
<label for="hora">Hora de la Cita:</label>
<input type="time" id="hora" name="hora">
<br><br>
<!-- Campo de fecha y hora -->
<label for="fecha_hora">Fecha y Hora del Evento:</label>
<input type="datetime-local" id="fecha_hora" name="fecha_hora">
<br><br>
<!-- Selector de color -->
<label for="color">Elige tu color favorito:</label>
<input type="color" id="color" name="color">
<br><br>
<!-- Casilla de verificación -->
<fieldset>
<legend>Preferencias:</legend>
<input type="checkbox" id="noticias" name="preferencias[]" value="noticias">
<label for="noticias">Quiero recibir noticias</label>
<br>
<input type="checkbox" id="promociones" name="preferencias[]" value="promociones">
<label for="promociones">Quiero recibir promociones</label>
</fieldset>
<br>
<!-- Botones de opción -->
<fieldset>
<legend>Género:</legend>
<input type="radio" id="masculino" name="genero" value="masculino">
<label for="masculino">Masculino</label>
<br>
<input type="radio" id="femenino" name="genero" value="femenino">
<label for="femenino">Femenino</label>
<br>
<input type="radio" id="otro" name="genero" value="otro">
<label for="otro">Otro</label>
</fieldset>
<br>
<!-- Selector desplegable -->
<label for="pais">País:</label>
<select id="pais" name="pais" required>
<option value="">Seleccione...</option>
<option value="mexico">México</option>
<option value="espana">España</option>
<option value="argentina">Argentina</option>
</select>
<br><br>
<!-- Rango -->
<label for="rango">Nivel de satisfacción (1-10):</label>
<input type="range" id="rango" name="satisfaccion" min="1" max="10" step="1">
<br><br>
<!-- Carga de archivo -->
<label for="archivo">Sube tu archivo:</label>
<input type="file" id="archivo" name="archivo">
<br><br>
<!-- Campo de búsqueda -->
<label for="buscar">Buscar:</label>
<input type="search" id="buscar" name="buscar" placeholder="Escribe tu búsqueda">
<br><br>
<!-- Campo oculto -->
<input type="hidden" name="token" value="123456">
<!-- Botones -->
<button type="submit">Enviar</button>
<button type="reset">Restablecer</button>
</form>
</body>
</html>
Descripción del Formulario
Acción del Botón Reset: Limpia todos los campos del formulario.
Atributos Clave del Formulario:
action: URL donde se enviarán los datos.
method: Define el método de envío (POST o GET).
enctype: Necesario para cargar archivos (multipart/form-data).
Interacción del Usuario:
Validación HTML5: Los atributos como required, min, max y step garantizan que los datos ingresados cumplan ciertos criterios antes de enviar el formulario.