Ejemplos de formularios HTML

Formularios HTML: 3 Ejemplos de Código Gratis

Un formulario HTML es un elemento de una página web que permite al usuario introducir y enviar información. Esta información puede ser de diferentes tipos, como texto, números, fechas, opciones, archivos, etc. Para ello, los formularios HTML puede contener varios componentes interactivos, como campos de entrada, casillas de verificación, botones, listas desplegables y otros.

El propósito de los formularios HTML es recopilar los datos de los usuarios que desean acceder a algún servicio o beneficio ofrecido por el sitio web. Estos datos se envían a un servidor web, donde se almacenan en una base de datos y se procesan según la lógica de negocio del sitio.

En este artículo compartimos 3 plantillas de formularios HTML, códigos que puede utilizar gratis en cualquier página web. Copie el código de cualquiera de los ejemplos de formularios HTML y péguelo en su sitio web. También está la instrucción de lo que hacen los formularios HTML paso a paso.

1. Ejemplo de formulario HTML para solicitar una cita médica.

Un formulario para solicitar una cita médica, con campos de texto, fecha, hora, correo electrónico y botones de opción.

Solicitar una cita médica

¿Tiene seguro médico?

Código HTML del formulario
<form action="/cita" method="post">
  <fieldset>
    <legend>Solicitar una cita médica</legend>
    <p>
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre" name="nombre" required>
    </p>
    <p>
      <label for="fecha">Fecha:</label>
      <input type="date" id="fecha" name="fecha" min="2023-08-25" max="2023-12-31" required>
    </p>
    <p>
      <label for="hora">Hora:</label>
      <input type="time" id="hora" name="hora" min="08:00" max="20:00" step="1800" required>
    </p>
    <p>
      <label for="email">Correo electrónico:</label>
      <input type="email" id="email" name="email" placeholder="ejemplo@dominio.com" required>
    </p>
    <p>
      <span>¿Tiene seguro médico?</span>
      <input type="radio" id="si" name="seguro" value="si">
      <label for="si">Sí</label>
      <input type="radio" id="no" name="seguro" value="no">
      <label for="no">No</label>
    </p>
    <p>
      <input type="submit" value="Enviar">
      <input type="reset" value="Limpiar">
    </p>
  </fieldset>
</form>
Explicación de lo que hace la plantilla de formulario HTML para solicitar cita medica
  • La etiqueta <form> define el inicio y el fin del formulario. Tiene dos atributos: action y method. El atributo action indica la dirección del servidor web al que se enviarán los datos del formulario cuando el usuario lo envíe. En este caso, es /cita, que es una ruta relativa al sitio web actual. El atributo method indica el método HTTP que se usará para enviar los datos. En este caso, es post, que significa que los datos se enviarán en el cuerpo de la solicitud HTTP, y no en la URL.
  • La etiqueta <fieldset> agrupa los elementos del formulario que están relacionados con un mismo tema. En este caso, el tema es solicitar una cita médica. Dentro de esta etiqueta, se puede usar la etiqueta <legend> para darle un título al grupo. En este caso, el título es “Solicitar una cita médica”.
  • La etiqueta <p> define un párrafo, que se usa para separar los elementos del formulario en líneas diferentes. Dentro de cada párrafo, se pueden usar las siguientes etiquetas:
    • La etiqueta <label> define una etiqueta para un elemento del formulario. Tiene un atributo for, que indica el identificador (id) del elemento al que se refiere. Por ejemplo, <label for="nombre">Nombre:</label> define una etiqueta para el elemento con id="nombre". Esto permite que al hacer clic en la etiqueta, se active el elemento correspondiente.
    • La etiqueta <input> define un campo de entrada para el usuario. Tiene varios atributos, dependiendo del tipo de entrada que se quiera. Algunos de los más comunes son:
      • El atributo type, que indica el tipo de entrada que se espera. Puede ser textdatetimeemailradiosubmitreset y otros. Cada tipo tiene sus propias características y validaciones. Por ejemplo, el tipo text permite introducir cualquier texto, el tipo date permite seleccionar una fecha en un calendario, el tipo email verifica que el texto tenga el formato de un correo electrónico, el tipo radio permite seleccionar una opción entre varias, el tipo submit crea un botón para enviar el formulario, y el tipo reset crea un botón para limpiar el formulario.
      • El atributo id, que asigna un identificador único al elemento. Esto sirve para referenciarlo desde otras partes del código, como las etiquetas <label>.
      • El atributo name, que asigna un nombre al elemento. Esto sirve para identificarlo cuando se envían los datos al servidor. Por ejemplo, si hay un elemento con name="nombre", los datos que introduzca el usuario en ese elemento se enviarán con el nombre “nombre”.
      • El atributo required, que indica si el elemento es obligatorio o no. Si tiene este atributo, el usuario no podrá enviar el formulario sin rellenar ese elemento.
      • El atributo min, que indica el valor mínimo que puede tener el elemento. Esto solo funciona para los tipos de entrada que admiten valores numéricos o de fecha y hora, como datetime y otros.
      • El atributo max, que indica el valor máximo que puede tener el elemento. Esto solo funciona para los tipos de entrada que admiten valores numéricos o de fecha y hora, como datetime y otros.
      • El atributo step, que indica el intervalo entre los valores posibles del elemento. Esto solo funciona para los tipos de entrada que admiten valores numéricos o de fecha y hora, como datetime y otros.
      • El atributo placeholder, que indica un texto de ejemplo o sugerencia que se muestra dentro del elemento cuando está vacío. Esto solo funciona para los tipos de entrada que admiten texto, como textemail y otros.
      • El atributo value, que indica el valor inicial o predeterminado del elemento. Esto funciona para todos los tipos de entrada, pero tiene un significado diferente según el tipo. Por ejemplo, para los tipos textdatetime y otros, indica el texto o valor que se muestra dentro del elemento; para los tipos radio y otros, indica el valor que se enviará al servidor si se selecciona esa opción; para los tipos submit y otros, indica el texto que se muestra en el botón.

2. Ejemplo de formulario para encuesta de satisfacción

Un formulario para realizar una encuesta de satisfacción, con campos de número, rango, color, lista desplegable y casillas de verificación.

Encuesta de satisfacción

Por favor, califique del 1 al 5 los siguientes aspectos de nuestro servicio:

¿Qué color le gustaría que tuviera nuestro logo?

¿Qué tipo de productos le gustaría que ofreciéramos?

¿Qué medios de comunicación usa para seguirnos?

Código HTML del formulario

<form action="/encuesta" method="get">
  <fieldset>
    <legend>Encuesta de satisfacción</legend>
    <p>Por favor, califique del 1 al 5 los siguientes aspectos de nuestro servicio:</p>
    <p>
      <label for="atencion">Atención al cliente:</label>
      <input type="number" id="atencion" name="atencion" min="1" max="5">
    </p>
    <p>
      <label for="calidad">Calidad del producto:</label>
      <input type="range" id="calidad" name="calidad" min="1" max="5">
    </p>
    <p>¿Qué color le gustaría que tuviera nuestro logo?</p>
    <p><input type="color" id="color" name="color"></p>
    <p>¿Qué tipo de productos le gustaría que ofreciéramos?</p>
    <p><select id="producto" name="producto">
      <option value="">Seleccione una opción</option>
      <option value="ropa">Ropa</option>
      <option value="zapatos">Zapatos</option>
      <option value="accesorios">Accesorios</option>
      <option value="otros">Otros</option> 
    </select></p> 
    <p>¿Qué medios de comunicación usa para seguirnos?</p> 
    <p><input type="checkbox" id="facebook" name="medio" value="facebook">
      <label for="facebook">Facebook</label>
      <input type="checkbox" id="twitter" name="medio" value="twitter">
      <label for="twitter">Twitter</label>
      <input type="checkbox" id="instagram" name="medio" value="instagram">
      <label for="instagram">Instagram</label>
      <input type="checkbox" id="youtube" name="medio" value="youtube">
      <label for="youtube">YouTube</label></p>
    <p><input type="submit" value="Enviar"></p>
  </fieldset>
</form>
Explicación de lo que hace la plantilla de formulario HTML para encuesta
  • La etiqueta <form> define el inicio y el fin del formulario. Tiene dos atributos: action y method. El atributo action indica la dirección del servidor web al que se enviarán los datos del formulario cuando el usuario lo envíe. En este caso, es /encuesta, que es una ruta relativa al sitio web actual. El atributo method indica el método HTTP que se usará para enviar los datos. En este caso, es get, que significa que los datos se enviarán en la URL de la solicitud HTTP, y no en el cuerpo.
  • La etiqueta <fieldset> agrupa los elementos del formulario que están relacionados con un mismo tema. En este caso, el tema es realizar una encuesta de satisfacción. Dentro de esta etiqueta, se puede usar la etiqueta <legend> para darle un título al grupo. En este caso, el título es “Encuesta de satisfacción”.
  • La etiqueta <p> define un párrafo, que se usa para separar los elementos del formulario en líneas diferentes. Dentro de cada párrafo, se pueden usar las siguientes etiquetas:
    • La etiqueta <label> define una etiqueta para un elemento del formulario. Tiene un atributo for, que indica el identificador (id) del elemento al que se refiere. Por ejemplo, <label for="atencion">Atención al cliente:</label> define una etiqueta para el elemento con id="atencion". Esto permite que al hacer clic en la etiqueta, se active el elemento correspondiente.
    • La etiqueta <input> define un campo de entrada para el usuario. Tiene varios atributos, dependiendo del tipo de entrada que se quiera. Algunos de los más comunes son:
      • El atributo type, que indica el tipo de entrada que se espera. Puede ser numberrangecolorcheckboxsubmit y otros. Cada tipo tiene sus propias características y validaciones. Por ejemplo, el tipo number permite introducir un número dentro de un rango especificado, el tipo range permite seleccionar un valor dentro de una barra deslizante, el tipo color permite elegir un color en una paleta, el tipo checkbox permite marcar o desmarcar una opción entre varias, y el tipo submit crea un botón para enviar el formulario.
      • El atributo id, que asigna un identificador único al elemento. Esto sirve para referenciarlo desde otras partes del código, como las etiquetas <label>.
      • El atributo name, que asigna un nombre al elemento. Esto sirve para identificarlo cuando se envían los datos al servidor. Por ejemplo, si hay un elemento con name="atencion", los datos que introduzca el usuario en ese elemento se enviarán con el nombre “atencion”.
      • El atributo min, que indica el valor mínimo que puede tener el elemento. Esto solo funciona para los tipos de entrada que admiten valores numéricos o de fecha y hora, como number y range.
      • El atributo max, que indica el valor máximo que puede tener el elemento. Esto solo funciona para los tipos de entrada que admiten valores numéricos o de fecha y hora, como number y range.
      • El atributo value, que indica el valor inicial o predeterminado del elemento. Esto funciona para todos los tipos de entrada, pero tiene un significado diferente según el tipo. Por ejemplo, para los tipos numberrange y otros, indica el valor numérico que se muestra dentro del elemento; para los tipos checkbox y otros, indica el valor que se enviará al servidor si se marca esa opción; para los tipos submit y otros, indica el texto que se muestra en el botón.
    • La etiqueta <select> define una lista desplegable para elegir una opción entre varias. Tiene dos atributos: id y name. El atributo id asigna un identificador único al elemento. El atributo name asigna un nombre al elemento. Dentro de esta etiqueta, se pueden usar varias etiquetas <option> para definir las opciones disponibles. Cada etiqueta <option> tiene un atributo value, que indica el valor que se enviará al servidor si se selecciona esa opción.

3. Ejemplo de formulario para registro en página web

Un formulario para registrarse en una página web, con campos de texto, contraseña, teléfono, archivo y botón.

Registrarse en la página web

Código HTML del formulario
<form action="/registro" method="post" enctype="multipart/form-data">
  <fieldset>
    <legend>Registrarse en la página web</legend>
    <p>
      <label for="usuario">Nombre de usuario:</label>
      <input type="text" id="usuario" name="usuario" pattern="[A-Za-z0-9_]{3,20}" title="Solo se permiten letras, números y guiones bajos. Mínimo 3 y máximo 20 caracteres." required>
    </p>
    <p>
      <label for="clave">Contraseña:</label>
      <input type="password" id="clave" name="clave" minlength="8" maxlength="32" required>
    </p>
    <p>
      <label for="telefono">Teléfono:</label>
      <input type="tel" id="telefono" name="telefono" placeholder="+57 123 456 7890">
    </p>
    <p>
      <label for="foto">Foto de perfil:</label>
      <input type="file" id="foto" name="foto" accept="image/*">
    </p>
    <p><input type="submit" value="Registrarse"></p>
  </fieldset>
</form>
Explicación de los que hace la plantilla de formulario HTML para registro en página web
  • La etiqueta <form> define el inicio y el fin del formulario. Tiene tres atributos: actionmethod y enctype. El atributo action indica la dirección del servidor web al que se enviarán los datos del formulario cuando el usuario lo envíe. En este caso, es /registro, que es una ruta relativa al sitio web actual. El atributo method indica el método HTTP que se usará para enviar los datos. En este caso, es post, que significa que los datos se enviarán en el cuerpo de la solicitud HTTP, y no en la URL. El atributo enctype indica el tipo de codificación que se usará para enviar los datos. En este caso, es multipart/form-data, que significa que los datos se enviarán como partes separadas, lo que permite incluir archivos como imágenes.
  • La etiqueta <fieldset> agrupa los elementos del formulario que están relacionados con un mismo tema. En este caso, el tema es registrarse en la página web. Dentro de esta etiqueta, se puede usar la etiqueta <legend> para darle un título al grupo. En este caso, el título es “Registrarse en la página web”.
  • La etiqueta <p> define un párrafo, que se usa para separar los elementos del formulario en líneas diferentes. Dentro de cada párrafo, se pueden usar las siguientes etiquetas:
    • La etiqueta <label> define una etiqueta para un elemento del formulario. Tiene un atributo for, que indica el identificador (id) del elemento al que se refiere. Por ejemplo, <label for="usuario">Nombre de usuario:</label> define una etiqueta para el elemento con id="usuario". Esto permite que al hacer clic en la etiqueta, se active el elemento correspondiente.
    • La etiqueta <input> define un campo de entrada para el usuario. Tiene varios atributos, dependiendo del tipo de entrada que se quiera. Algunos de los más comunes son:
      • El atributo type, que indica el tipo de entrada que se espera. Puede ser textpasswordtelfile y otros. Cada tipo tiene sus propias características y validaciones. Por ejemplo, el tipo text permite introducir cualquier texto, el tipo password permite introducir una contraseña oculta, el tipo tel permite introducir un número de teléfono, y el tipo file permite seleccionar un archivo desde el dispositivo del usuario.
      • El atributo id, que asigna un identificador único al elemento. Esto sirve para referenciarlo desde otras partes del código, como las etiquetas <label>.
      • El atributo name, que asigna un nombre al elemento. Esto sirve para identificarlo cuando se envían los datos al servidor. Por ejemplo, si hay un elemento con name="usuario", los datos que introduzca el usuario en ese elemento se enviarán con el nombre “usuario”.
      • El atributo required, que indica si el elemento es obligatorio o no. Si tiene este atributo, el usuario no podrá enviar el formulario sin rellenar ese elemento.
      • El atributo minlength, que indica la longitud mínima que debe tener el texto introducido en el elemento. Esto solo funciona para los tipos de entrada que admiten texto, como textpassword y otros.
      • El atributo maxlength, que indica la longitud máxima que puede tener el texto introducido en el elemento. Esto solo funciona para los tipos de entrada que admiten texto, como textpassword y otros.
      • El atributo pattern, que indica una expresión regular que debe cumplir el texto introducido en el elemento. Esto solo funciona para los tipos de entrada que admiten texto, como textpassword y otros. Una expresión regular es una forma de definir un patrón de caracteres usando símbolos especiales. Por ejemplo, la expresión regular [A-Za-z0-9_]{3,20} significa que solo se permiten letras mayúsculas o minúsculas, números y guiones bajos, y que la longitud debe estar entre 3 y 20 caracteres.
      • El atributo title, que indica un texto explicativo o informativo que se muestra cuando el usuario pasa el cursor sobre el elemento o cuando no cumple con las validaciones requeridas. Por ejemplo, el texto “Solo se permiten letras, números y guiones bajos. Mínimo 3 y máximo 20 caracteres.” se muestra cuando el usuario introduce un nombre de usuario inválido o cuando pasa el cursor sobre el elemento.
      • El atributo placeholder, que indica un texto de ejemplo o sugerencia que se muestra dentro del elemento cuando está vacío. Esto solo funciona para los tipos de entrada que admiten texto, como textpasswordtel y otros.
      • El atributo accept, que indica el tipo de archivo que se puede seleccionar en el elemento. Esto solo funciona para el tipo de entrada file. Por ejemplo, el valor image/* significa que solo se pueden seleccionar archivos de imagen.
      • El atributo value, que indica el valor inicial o predeterminado del elemento. Esto funciona para todos los tipos de entrada, pero tiene un significado diferente según el tipo. Por ejemplo, para los tipos textpasswordtel y otros, indica el texto o valor que se muestra dentro del elemento; para los tipos submit y otros, indica el texto que se muestra en el botón.
Su Calificación Nos Ayuda a Mejorar