Formularios en HTML y CSS
Bienvenido a está guía sobre formularios en HTML y CSS. En este curso, aprenderás desde los conceptos básicos hasta la personalización avanzada de formularios. Los formularios son una parte esencial de cualquier página web interactiva, ya que permiten a los usuarios proporcionar datos, realizar búsquedas, registrarse en plataformas, enviar mensajes y mucho más. Este curso está diseñado para personas que desean aprender desde cero, explicando cada concepto de forma detallada y práctica.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario Simple</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="form-container">
<h1>Registro</h1>
<form>
<label for="name">Nombre</label>
<input type="text" id="name" placeholder="Ingresa tu nombre" required>
<label for="email">Correo</label>
<input type="email" id="email" placeholder="Ingresa tu correo" required>
<label for="password">Contraseña</label>
<input type="password" id="password" placeholder="Contraseña" required>
<button type="submit">Enviar</button>
</form>
</div>
</body>
</html>
style.css
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
width: 300px;
}
h1 {
font-size: 1.5rem;
margin-bottom: 20px;
text-align: center;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #0056b3;
}
</style>
¿Qué es un formulario?
Un formulario es un conjunto de controles en una página web que permite a los usuarios ingresar y enviar información a un servidor. Los datos pueden ser tan simples como un mensaje o tan complejos como un formulario de registro con múltiples campos. Los formularios son cruciales en el desarrollo web porque son el medio principal para la interacción entre el usuario y la aplicación.Elemento HTML <form>
El elemento <form> es el contenedor principal de un formulario en HTML. Este elemento encapsula todos los controles y define cómo se envían los datos. Aquí tienes un ejemplo básico:
<form action="/submit" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<button type="submit">Enviar</button>
</form>
En este ejemplo:
🔸<form> : Es el contenedor del formulario.
🔸action y method : Son atributos que especifican cómo y dónde se envían los datos.
Contiene elementos como <label>, <input>, y <button>que facilitan la interacción del usuario.
Estructura básica de los formularios en html y css
Un formulario básico incluye varios elementos clave:
🔸Etiqueta <form>: Define el inicio y el final del formulario.
🔸Controles de formulario:
🔹Etiquetas <label>: Describen los campos para que el usuario sepa qué información proporcionar.
🔹Campos de entrada <input>: Permiten al usuario ingresar datos.
🔹Botones <button> o <input type=»submit»>: Permiten enviar el formulario.
Atributos del formulario: Controlan cómo se envían los datos.
<form>
<label for="name">Nombre</label>
<input type="text" id="name" placeholder="Ingresa tu nombre" required>
<label for="email">Correo</label>
<input type="email" id="email" placeholder="Ingresa tu correo" required>
<label for="password">Contraseña</label>
<input type="password" id="password" placeholder="Contraseña" required>
<button type="submit">Enviar</button>
</form>
Nota:
El código anterior es un ejemplo de formulario de registro HTML. En este caso se pide un nombre, un correo electrónico, una contraseña y un botón para enviar el formulario.
Atributos comunes del elemento <form>
Action
Define la URL donde se enviarán los datos del formulario. Si se omite, el formulario enviará los datos a la misma página en la que está. Ejemplo:
<form action="/registro">
Method
Especifica el método HTTP para enviar los datos.
Valores comunes:
🔸GET : Envía los datos en la URL, visible en el navegador. Ideal para búsquedas.
🔸POST : Envía los datos de manera más segura en el cuerpo de la solicitud. Recomendado para datos sensibles.
<form method="post">
Id
Identifica el formulario de manera única en la página. Se utilizan para enlazar con JavaScript o CSS. Es importante respetar los nombres de cada id ya que no deben de repetirse, estos deben de ser únicos para cada formulario.
<form id="loginForm">
Atributos Generales (aplicables a múltiples elementos como <input>, <textarea>, etc
🔸name : Asocia un nombre al campo para que pueda ser identificado en el envío de datos.
<input type="text" name="username">
🔸id : Proporciona un identificador único para enlazar con etiquetas <label> o para manipular con CSS/JavaScript.
<input type="text" id="email">
🔸value : Define un valor por defecto para el campo.
<input type="text" value="John Doe">
🔸placeholder : Muestra un texto de ejemplo dentro del campo, que desaparece al escribir.
<input type="text" placeholder="Ingresa tu nombre">
🔸required : Obliga al usuario a completar el campo antes de enviar el formulario.
<input type="email" required>
🔸disable : Desactiva el campo, evitando que sea editable.
<input type="text" disabled>
🔸readonly : Hace que el campo sea de solo lectura (se puede copiar pero no editar).
<input type="text" readonly>
🔸maxlength : Define la cantidad máxima de caracteres permitidos en un campo.
<input type="text" maxlength="50">
🔸pattern : Especifica una expresión regular para validar el formato de los datos ingresados.
<input type="text" pattern="[A-Za-z]{3,}">
🔸autofocus: Coloca automáticamente el cursor en el campo al cargar la página.
<input type="text" autofocus>
🔸autocomplete: Controla si el navegador debe auto-completar el campo. Tiene dos valores, on (por defecto) y off.
<input type="text" autocomplete="off">
Personalizar Formularios con CSS
CSS permite modificar el aspecto de los controles de un formulario. Por ejemplo, podemos cambiar el estilo de un botón:
.boton {
border: 0;
padding: 0;
background-color: transparent;
color: red;
border-bottom: 1x solid red;
}
Por defecto, los campos de texto de los formularios no incluyen ningún espacio de relleno, por lo que el texto introducido por el usuario aparece pegado a los bordes del cuadro del texto. Añadiendo un pequeño padding a cada elemento <input>, se mejora notablemente el aspecto del formulario. Por ejemplo, podríamos escribir:
form.elegante input { padding: .2em; }
CSS permite resaltar el campo en el que el usuario está introduciendo datos mediante la pseudo-clase :focus. A continuación, se muestra un ejemplo:
input :focus{
border: 2px solid #000;
background: #F3F3F3;
}