Cómo hacer un formulario HTML para tu página web
Con la ayuda de los formularios HTML podrás comunicarte con los usuarios de tu página web de una forma directa y sencilla. Además, estos formularios cuentan con una serie de elementos y atributos que te permiten adaptarlos a tus necesidades.
¿Qué es un formulario HTML?
Los formularios HTML, también conocidos como HTML Forms en inglés, son formularios interactivos a través de los cuales los usuarios de tu página web pueden comunicarse contigo, enviándote datos individuales. Los datos introducidos se envían al servidor web correspondiente para ser procesados. Si quieres integrar esta forma de interacción en tus documentos HTML, necesitarás la etiqueta <form> de HTML. Puedes personalizar esta etiqueta HTML con diferentes elementos y atributos para que se adapte a tus objetivos. Para ello, se pueden utilizar diferentes tipos de entrada como texto, números, correo electrónico, contraseñas, botones y casillas de verificación.
Es importante tener en cuenta que si recopilas datos personales en tu página web mediante un formulario HTML, deberás mencionarlo explícitamente en tu política de privacidad y garantizar una conexión cifrada mediante SSL/TLS.
- 3x más rápido, ahora un 60 % de ahorro
- Alta disponibilidad >99.99 %
- Solo en IONOS: hasta 500 GB incluidos
¿Para qué sirve la etiqueta <form>?
Los formularios HTML son muy versátiles y, gracias al gran número de opciones de introducción de datos que te ofrecen, podrás utilizarlos para diferentes propósitos. Algunos de estos propósitos son:
- Formularios de contacto para consultas o pedidos
- Formularios de suscripción a una cuenta o a una newsletter
- Funciones de retroalimentación
- Encuestas
- Formularios de asistencia y servicio técnico
- Inicio de sesión para acceder a zonas protegidas de la página
En teoría, con los formularios HTML es posible gestionar cualquier forma de interacción entre una página web y sus usuarios.
Sintaxis de la etiqueta <form>
Los formularios HTML se inician con la etiqueta de apertura <form> y se cierran con la etiqueta de cierre correspondiente </form>. A su vez, estas dos etiquetas pueden contener otros elementos y atributos. Te lo explicaremos mejor más adelante. La sintaxis general de estos formularios es la siguiente:
<form> Elementos </form>¿Qué elementos pueden aparecer en un formulario HTML?
Existen diferentes elementos HTML, con los que puedes personalizar tu formulario HTML según tus preferencias. En la siguiente tabla encontrarás una breve descripción de los principales elementos:
| Elemento HTML | Descripción |
|---|---|
<button>
|
Botón simple sobre el que se puede hacer clic |
<datalist>
|
Opciones para el elemento <input> en forma de lista desplegable
|
<fieldset>
|
Agrupar datos relacionados |
<input>
|
Recoger datos, personalizado con el atributo type
|
<label>
|
La etiqueta HTML <label> crea una descripción visible
|
<legend>
|
Título o encabezado para la etiqueta <fieldset>
|
<optgroup>
|
Agrupar elementos <option> dentro de <select>
|
<option>
|
Definir una opción para <datalist> o <select>
|
<output>
|
Indicar el resultado de un cálculo o script |
<select>
|
Crear una lista desplegable |
<textarea>
|
Definir un campo de texto con varias líneas |
Los principales atributos de los formularios HTML
Existen numerosos atributos HTML, con los que puedes incluir diferentes funciones en tu formulario. Los principales atributos son los siguientes:
action: especifica la URL a la que deben enviarse los datos del formularioautocomplete: indica al navegador si un campo de entrada se debe completar automáticamenteenctype: determina cómo se codifican los datos que se envían al servidormethod: determina si los datos se enviarán con el métodoGEToPOSTtarget: define dónde debe abrirse un documento vinculadoname: asigna un nombre al formulario que se puede utilizar en JavaScript para acceder a élaccept-charset: especifica la codificación de caracteres que debe utilizarse al enviar los datos del formulario
Ejemplos de formularios HTML
A continuación, te mostramos un par de ejemplos de formularios HTML para que entiendas mejor cómo funcionan exactamente. Para empezar, crearemos un formulario simple en el que los usuarios de la página web puedan introducir su nombre y apellido y enviar esos datos al servidor. El código correspondiente sería el siguiente:
<!DOCTYPE html>
<html>
<body>
<h2>Ejemplo de un formulario HTML</h2>
<form action="/action_page.php">
<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre" value="Pedro"><br>
<label for="apellido">Apellido:</label><br>
<input type="text" id="apellido" name="apellido" value="López"><br><br>
<input type="submit" value="Enviar">
</form>
<p>Al hacer clic en "Enviar", tus datos se enviarán a una página llamada "/action_page.php".</p>
</body>
</html>En la página web, el formulario correspondiente al código anterior tendría el siguiente aspecto:
En el siguiente ejemplo, se utilizarán las etiquetas <select>, <option> y <optgroup>, para crear un campo de formulario en el que los usuarios pueden seleccionar diferentes ciudades en una lista desplegable:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de un formulario HTML</title>
</head>
<body>
<label for="ciudad">Ciudades:</label>
<select id="ciudad">
<optgroup label="Estados Unidos">
<option value="chicago">Chicago</option>
<option value="denver">Denver</option>
</optgroup>
<optgroup label="México">
<option value="guadalajara">Guadalajara</option>
<option value="tijuana">Tijuana</option>
</optgroup>
<optgroup label="Canadá">
<option value="toronto">Toronto</option>
</optgroup>
</select>
</body>
</html>- Tu dominio protegido con Certificado SSL Wildcard gratis
- Función Domain Connect para una configuración DNS simplificada gratis
- Registro privado y gratis para mayor seguridad