Formularios HTML: 3 Ejemplos de Código Gratis

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

• 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 text, date, time, email, radio, submit, reset 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 date, time 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 date, time 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 date, time 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 text, email 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 text, date, time 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.

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

• 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 number, range, color, checkbox, submit 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 number, range 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.

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

• La etiqueta <form> define el inicio y el fin del formulario. Tiene tres atributos: action, method 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 text, password, tel, file 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 text, password 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 text, password 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 text, password 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 text, password, tel 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 text, password, tel 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.