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;
}