Elementos de formularios HTML

Elementos de formularios HTML para formularios accesibles y útiles.

Elija el control adecuado, conéctelo a una etiqueta clara y valide los datos antes de que lleguen al backend de formularios. Use los generadores y las guías siguientes como puntos de partida prácticos.

Referencia de campos

Cree cada campo con intención.

Cada control afecta a la finalización, la accesibilidad, la validación y la forma del envío que recibe su flujo de trabajo.

Campos de entrada

Use tipos semánticos de entrada para nombres, correos electrónicos, teléfonos, URL, fechas, números, búsquedas y contraseñas. El tipo define el comportamiento del navegador; el nombre define la clave enviada a su endpoint de formularios.

<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required />

Campos de área de texto

Elija textarea para mensajes, comentarios, detalles de soporte y resúmenes de proyectos. Defina rows para una altura inicial útil, use maxlength para establecer un límite claro y dé siempre un nombre al control.

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" maxlength="2000" required></textarea>

Menús de selección

Use select cuando el visitante elija de una lista conocida y los botones de opción ocuparían demasiado espacio. Empiece con una opción vacía en los campos obligatorios y use valores de máquina estables para cada opción.

<label for="topic">Topic</label>
<select id="topic" name="topic" required>
  <option value="">Choose a topic</option>
  <option value="sales">Sales</option>
</select>

Botones de opción

Los botones de opción sirven para elegir una respuesta de una lista corta. Mantenga un mismo nombre en todo el grupo, asigne un valor distinto a cada opción y use fieldset y legend para que la pregunta siga disponible para la tecnología de asistencia.

<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email" required /> Email</label>
  <label><input type="radio" name="contact" value="phone" /> Phone</label>
</fieldset>

Casillas de verificación

Las casillas representan elecciones independientes, como intereses, preferencias de producto o consentimiento. Use un fieldset compartido para un grupo relacionado y mantenga separada la casilla de consentimiento obligatorio de las preferencias opcionales.

<fieldset>
  <legend>Topics to receive</legend>
  <label><input type="checkbox" name="topics[]" value="product" /> Product updates</label>
  <label><input type="checkbox" name="topics[]" value="security" /> Security notices</label>
</fieldset>

Etiquetas y agrupación

Una etiqueta visible indica qué significa un campo y proporciona a los lectores de pantalla su nombre accesible. Haga coincidir label for con el id de una entrada y use fieldset más legend para preguntas con botones de opción o casillas.

<label for="company">Company</label>
<input id="company" name="company" autocomplete="organization" />

<fieldset>
  <legend>Choose a plan</legend>
  <!-- related controls -->
</fieldset>

Validación

La validación HTML ofrece comentarios rápidos con required, type, minlength, maxlength, min, max y pattern. Trátela como una capa de usabilidad y repita la validación en el endpoint, porque las comprobaciones del navegador no son un límite de seguridad.

<label for="website">Website</label>
<input id="website" name="website" type="url"
  minlength="10" maxlength="2048" required />

Indicaciones de autocompletado

Los tokens de autocompletado ayudan a los navegadores a completar correctamente los datos conocidos, especialmente en móviles. Use tokens como name, email, tel, organization y street-address cuando el campo recopile ese valor.

<label for="full-name">Full name</label>
<input id="full-name" name="full_name"
  autocomplete="name" required />

<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" />