Guía Completa de Formularios HTML
Cargado por
jose angelGuía Completa de Formularios HTML
Cargado por
jose angelCreación de
Formularios
Por: Andres Felipe León Zapata
Desarrollador Web Full Stack
CREACIÓN DE FORMULARIOS
Un formulario en HTML se define con la etiqueta <form>. Dentro de esta etiqueta,
puedes incluir diversos elementos de entrada como campos de texto, botones,
áreas de texto, y otros controles.
ETIQUETA USO
Este es un campo donde puedes escribir información. Hay diferentes tipos, como
<input> un cuadro de texto para escribir tu nombre, un campo para ingresar
contraseñas, o una casilla para seleccionar una opción.
Es un área grande donde puedes escribir mucho texto, como si fuera un
<textarea>
cuaderno donde puedes escribir comentarios largos o descripciones.
Este es un menú desplegable donde puedes seleccionar una opción de una lista
<select>
de opciones predefinidas. Es como elegir un sabor de helado de un menú.
ELEMENTOS DEL Un botón en el formulario que puedes usar para enviar información, restablecer
FORMULARIO <button> campos, o hacer alguna acción que necesites. Es como un botón en un
videojuego que realizas una acción específica.
Se usa para asociar una etiqueta de texto con un control de formulario, como un
campo de entrada (<input>), un área de texto (<textarea>), o una opción en un
<label> menú desplegable (<select>). Esto mejora la accesibilidad y la usabilidad de los
formularios, ya que permite que los usuarios hagan clic en la etiqueta para
activar el control asociado.
Imagina una caja dentro de la caja principal del formulario. Agrupa y organiza
<fieldset> campos relacionados, como todos los datos personales en una sección
separada.
Es una lista de opciones sugeridas que puedes seleccionar mientras escribes en
<datalist> un campo de entrada. Es útil para autocompletar información como ciudades o
nombres
TIPOS DE <input>
ETIQUETA USO ETIQUETA USO
type="text Para escribir texto normal. type="radio" Para elegir una opción entre varias disponibles.
Para escribir contraseñas, que se ocultan Para seleccionar varias opciones al mismo
type="password" type="checkbox"
con puntos o asteriscos. tiempo.
Para ingresar una dirección de correo Para seleccionar y subir archivos desde tu
type="email" type="file"
electrónico. computadora.
Para ingresar números, como la cantidad type="url" para escribir direcciones URL
type="number"
de productos.
type="tel" Para ingresar números de teléfono. type="color" para seleccionar un color
Para seleccionar una fecha de un pide al usuario que indique el valor en un
type="date"
calendario. rango numérico sin que tenga que
type="range"
preocuparse qué valor numérico específico
está seleccionado.
ATRIBUTOS PARA ELEMENTOS DEL FORMULARIO
Atributos USOS
Define el número de filas visibles en el área de texto. Por ejemplo, rows="4" hará que el área
rows y cols de texto tenga cuatro filas de alto del mismo modo cols="50" hará que el área de texto
tenga 50 columnas de ancho.
Proporciona un texto de ejemplo o una indicación de lo que debe escribirse en el área de
placeholder
texto cuando está vacío. Por ejemplo, placeholder="Escribe tu mensaje aquí".
Asigna un nombre al área de texto, que se utiliza para identificar el campo cuando se envía
name
el formulario. Por ejemplo, name="apellido".
Asigna un identificador único al área de texto para que pueda ser referenciado por CSS o
id
JavaScript. Por ejemplo, id="telefono".
Indica que el campo debe ser completado antes de enviar el formulario. Si se usa este
required
atributo, el formulario no se enviará si el campo está vacío.
Hace que el área de texto sea de solo lectura, es decir, el usuario no puede modificar su
readonly
contenido. Se usa cuando solo se quiere mostrar información.
Desactiva el área de texto, impidiendo que el usuario interactúe con él y que el valor sea
disabled
enviado con el formulario.
value Define el contenido inicial del área de texto
VALIDACION DE FORMULARIOS
HTML5 introdujo varios atributos de validación que se pueden usar
directamente en los elementos del formulario. Estos atributos permiten definir
reglas básicas de validación que el navegador aplicará automáticamente
cuando el formulario se envíe.
Required: Descripción: Marca el Minlength y maxlength:
campo como obligatorio. El Descripción: Especifican el número
formulario no se enviará si el campo mínimo y máximo de caracteres
está vacío. permitidos.
Type: Descripción: Define el tipo de
datos esperados en el campo, lo que Pattern: Descripción: Define una
también aplica ciertas validaciones. expresión regular que el valor del
Ejemplos incluyen email, number, url, campo debe cumplir.
entre otros.
Min y max: Descripción: Especifican Step: Descripción: Define el
el valor mínimo y máximo permitido intervalo de incremento para
para campos de tipo number, date, campos de tipo number, range,
range, etc. etc.
TIPOS DE <button>
type
Descripción: Define el tipo de botón. Los valores posibles son:
Submit: Envía el formulario.
Reset: Restablece los campos del formulario.
Button: Un botón genérico que no realiza ninguna acción por sí mismo.
Crear un formulario de registro para un sitio web que incluya varios tipos de campos
de entrada, validaciones básicas de HTML y botones funcionales.
Requisitos del Formulario:
Campos de Texto:
EJERCICIO Nombre completo: Campo de texto obligatorio.
FORMULARIOS Correo electrónico: Campo de correo electrónico obligatorio.
Contraseña: Campo de contraseña con validación para al menos 8 caracteres.
Confirmar contraseña: Campo de contraseña que debe coincidir con el campo
de contraseña.
Campos de Selección:
Género: Menú desplegable con opciones "Masculino" y "Femenino".
Fecha de nacimiento: Campo para seleccionar una fecha.
Campos de Opción:
Intereses: Casillas de verificación para seleccionar intereses, por ejemplo,
"Deportes", "Música", "Tecnología".
Campo de Texto Multilínea:
EJERCICIO Descripción: Área de texto para una breve descripción personal.
FORMULARIOS
Botones:
Enviar: Botón para enviar el formulario.
Restablecer: Botón para restablecer todos los campos del formulario.
Información adicional: Botón que no realiza ninguna acción especial (tipo
button).
Gracias