No existe un solo molde para formularios HTML. Cada uno se adapta a la tarea específica para la que se diseñó. Por ejemplo, un formulario para enviar mensajes será diferente a uno para introducir datos de una tarjeta bancaria.

Además, el diseño del formulario importa mucho. En ocasiones, un diseñador puede optar por un solo campo de texto con un botón, mientras que en otros casos, puede incluir una docena de casillas de verificación.

En esta guía, te mostraremos un formulario completo como punto de partida, y luego desglosaremos cada uno de los elementos que lo componen.

También puedes leer sobre la Etiqueta FORM

¡Con este conocimiento, podrás adaptar el ejemplo a tus propios proyectos!

HTML
<form action="#" method="post" target="_blank">
  <h2>Plantilla de Formulario</h2>
  <fieldset>
    <legend>Datos Personales</legend>
    <ul>
      <li>
        <label for="name">Nombre:*</label>
        <input type="text" name="name" placeholder="Juan Pérez" id="name" required>
      </li>
      <li>
        <label for="age">Edad:</label>
        <input type="number" name="age" placeholder="27" id="age" min="0" max="125">
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Contactos</legend>
    <ul>
      <li>
        <label for="email">E-mail:*</label>
        <input type="email" name="mail" placeholder="perez@gmail.com" id="email" required>
      </li>
      <li>
        <label for="number">Teléfono:*</label>
        <input type="tel" name="phone" placeholder="+52 000 000-00-00" id="number" maxlength="21" required>
      </li>
    </ul>
  </fieldset>
  <div>
    <label for="message">Aficiones</label>
    <textarea name="comment" placeholder="Cuéntanos todo lo que sea importante para ti" id="message"></textarea>
  </div>
  <fieldset>
    <legend>Estudios</legend>
    <ul>
      <li>
        <input type="checkbox" name="intensive-courses" id="courses" checked>
        <label for="courses">Estoy tomando cursos</label>
      </li>
      <li>
        <input type="checkbox" name="books" id="books">
        <label for="books">Leo libros</label>
      </li>
      <li>
        <input type="checkbox" name="video" id="video">
        <label for="video">Veo videos</label>
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Preferencias</legend>
    <ul>
      <li>
        <input type="radio" name="preference" id="front" value="frontend" checked>
        <label for="front">Desarrollo Frontend</label>
      </li>
      <li>
        <input type="radio" name="preference" id="back" value="backend">
        <label for="back">Desarrollo Backend</label>
      </li>
    </ul>
  </fieldset>
  <div>
    <button type="submit">Enviar</button>
    <p>* — Campos obligatorios</p>
  </div>
</form>

Los Componentes de un Formulario

<form> y <fieldset>

El elemento <form> actúa como contenedor para todos los campos del formulario y el botón de envío. Se le añaden dos atributos: action y method.

  • action: define la URL a la que se enviarán los datos del formulario.
  • method: define el método de envío.
  • post: envía los datos en el cuerpo de la solicitud HTTP. Se utiliza cuando se necesitan enviar muchos datos y no se requiere una referencia al resultado de su procesamiento. Por ejemplo, al editar un perfil personal.
  • get: es el método predeterminado. Envía los datos del formulario en la cadena de consulta, es decir, son visibles en la barra de direcciones del navegador. Se utiliza, por ejemplo, en formularios de búsqueda.

El elemento <fieldset> sirve para agrupar campos relacionados dentro del formulario. A menudo se utiliza con <legend>, que añade una etiqueta de texto para cada grupo. En el ejemplo, hemos usado <fieldset> para separar los campos en tres secciones: “Datos Personales”, “Contactos”, “Estudios” y “Preferencias”.

<label>

Es el título o la etiqueta para los campos de entrada. Se vincula a los elementos de dos maneras:

  • Mediante el atributo for con un valor que coincida con el id del elemento:
HTML
<label for="name">Nombre:*</label>
<input type="text" name="name" placeholder="Juan Pérez" id="name" required>
  • Encerrando el elemento entre las etiquetas de apertura y cierre de <label>
HTML
<label>
  <input type="checkbox" checked>Acepto el procesamiento de datos personales
</label>

<select>

Crea un menú desplegable.

HTML
<label for="education">Nivel de educación</label>
<select id="education">
  <option value="secondary">Secundaria</option>
  <option value="secondary vocational">Bachillerato Técnico</option>
  <option value="higher" selected>Superior</option>
  <option value="incomplete higher" selected>Superior incompleto</option>
</select>

Se utiliza la etiqueta <option> para añadir elementos al menú desplegable.

Atributos del elemento <select>:

  • autocomplete: si el campo se autocompleta.
  • disabled: si no se puede seleccionar nada del menú.
  • form: vincula <select> a un formulario si no está dentro del elemento <form>.
  • multiple: crea un “multiselección”, es decir, un menú donde se pueden elegir varios valores.
  • name: el nombre del elemento, utilizado para enviar el formulario.
  • required: se debe seleccionar al menos un elemento del menú.
  • size: el tamaño del elemento.

<textarea>

Agrega un campo para escribir mensajes. El usuario puede dejar un comentario, una pregunta para el soporte técnico o cualquier otro tipo de mensaje.

HTML
<label for="message">Aficiones</label>
<textarea name="comment" placeholder="Cuéntanos todo lo que sea importante para ti" id="message"></textarea>

<textarea> tiene una característica: los usuarios pueden estirar el campo de texto horizontal y verticalmente directamente en el navegador, lo que puede afectar el diseño y el diseño original. Para evitar esto, usa la propiedad CSS resize: none.

Atributos principales de <textarea>:

  • name: el nombre del campo.
  • id: vincula el campo a <label>.
  • maxlength y minlength: establecen la longitud máxima o mínima del texto.
  • required: indica que el campo es obligatorio.
  • placeholder: muestra una breve sugerencia para los usuarios sobre qué introducir.
  • disabled: bloquea el campo de entrada.
  • readonly: hace que el campo solo se pueda leer, la escritura está prohibida.

<input>

Crea elementos interactivos para obtener datos del usuario. Se puede usar para añadir campos de entrada para el nombre, el número de teléfono, el correo electrónico, el nombre de usuario y la contraseña. Incluso las casillas de verificación y los botones de radio se implementan mediante este elemento.

HTML
<label for="email">E-mail:*</label>
<input type="email" name="mail" placeholder="perez@gmail.com" id="email" required>

Para que los usuarios introduzcan datos en el formato correcto, es necesario añadir al elemento <input> el atributo type con un valor adecuado:

  • text: solo se puede introducir texto.
  • number: solo se pueden introducir números.
  • tel: para números de teléfono.
  • email: para introducir un correo electrónico.
  • submit: convierte el campo en un botón para enviar los datos al servidor.
  • password: campo para introducir contraseñas.
  • date: para introducir fechas.
  • checkbox: convierte el campo en una casilla de verificación.
  • radio: crea botones de opción.

El atributo type tiene más de 20 valores, la lista completa está disponible en el sitio web de MDN.

Atributos principales de <input>:

  • id: vincula <input> a <label>.
  • name: el nombre del campo.
  • maxlength o minlength: longitud máxima o mínima del texto.
  • max o min: valor máximo o mínimo de un número o fecha.
  • required: el campo es obligatorio.
  • placeholder: muestra una sugerencia en el campo de entrada sobre qué introducir.
  • disabled: bloquea el campo de entrada.
  • autocomplete: autocompletar.
  • checked: para las casillas de verificación y los botones de opción, selecciona el campo.
  • pattern: establece un patrón para la introducción de datos, se utiliza a menudo en los tipos tel y email.
  • value: el valor del elemento.
  • enctype: indica cómo se envían los datos al servidor.

<button>

Crea un botón para enviar el formulario:

HTML
<button type="submit">Enviar</button>

En proyectos antiguos, todavía se pueden encontrar botones creados con <input type="button">. Pero este método tiene limitaciones: por ejemplo, en <button> se puede añadir una imagen o un pseudoelemento, mientras que en <input> no.

Qué Elegir

  • <textarea>: cuando se necesita un campo para escribir mensajes.
  • <select>: para menús desplegables.
  • <input>: para casillas de verificación, botones de opción, campos para cargar archivos y para introducir datos.
  • <button>: para el botón de envío del formulario.

See the Pen Formulario Template HTML by Alex (@htmldesdecero) on CodePen.

Espero que esta información te haya sido útil. Si tienes alguna duda, no dudes en preguntar!

5/5 - (1 voto)