FormsFort
EN ES
← Todos los artículos
HTMLCampos de formularioAccesibilidad

Botones de opción HTML en formularios: guía lista para producción

Equipo de FormsFort ·

Los botones de opción son el control correcto cuando un visitante debe elegir exactamente una opción de una lista corta. Funcionan bien para la selección de planes, preferencias de contacto, rangos de presupuesto, preguntas de sí o no y respuestas a encuestas.

The common mistake is treating radio buttons as small visual widgets instead of form data. A production radio group needs a clear question, accessible labels, stable name and value attributes, validation, and a backend that receives the selected value cleanly.

Formulario de botón de opción básico

Use the same name for every option in the group. Use a different value for each option.

<form action="https://api.formsfort.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />


  <fieldset>
    <legend>Preferred contact method</legend>


    <label>
      <input type="radio" name="contact_method" value="email" required />
      Email
    </label>


    <label>
      <input type="radio" name="contact_method" value="phone" />
      Phone
    </label>


    <label>
      <input type="radio" name="contact_method" value="text" />
      Text message
    </label>
  </fieldset>


  <input type="checkbox" name="botcheck" style="display:none" />
  <button type="submit">Send preference</button>
</form>

Si el visitante selecciona “Correo electrónico”, el backend recibe:

contact_method=email

Ese es el objetivo completo de un grupo de radio: un nombre de campo, un valor seleccionado.

Botones de opción frente a casillas de verificación frente a menús desplegables de selección

Elige el input en función de la decisión que le pides al visitante que tome.

ControlMejor paraEvitar cuando
Botones de opciónUna elección entre 2 y 5 opciones visiblesLa lista es larga
Casillas de verificaciónMúltiples opciones independientesSolo se permite una respuesta
Seleccionar menú desplegableUna elección entre muchas opcionesLas opciones deben compararse de un vistazo

Los botones de opción suelen ser mejores que un menú desplegable cuando las opciones son pocas. Los visitantes pueden escanear todas las opciones sin abrir un menú.

Usar conjunto de campos y leyenda para accesibilidad

Labels identify individual options. A legend identifies the question the options answer.

<fieldset>
  <legend>Which plan are you interested in?</legend>
  <label><input type="radio" name="plan" value="free" required /> Free</label>
  <label><input type="radio" name="plan" value="pro" /> Pro</label>
  <label><input type="radio" name="plan" value="business" /> Business</label>
</fieldset>

. Esta estructura ayuda a los usuarios de lectores de pantalla a comprender que “Gratis”, “Pro” y “Business” son todas respuestas a la misma pregunta del plan.

Grupos de radio requeridos

To require an answer, add required to one radio input in the group. You can add it to every option, but one is enough because the browser validates the group by name.

<label>
  <input type="radio" name="budget" value="under-1000" required />
  Under $1,000
</label>
<label>
  <input type="radio" name="budget" value="1000-5000" />
  $1,000 to $5,000
</label>

No confíe únicamente en la validación del lado del cliente. El backend de su formulario también debe aceptar solo los valores esperados cuando el campo controla enrutamiento importante o lógica de negocios.

Selecciones predeterminadas

Utilice una selección predeterminada sólo cuando sea realmente segura.

<label>
  <input type="radio" name="newsletter_frequency" value="weekly" checked />
  Weekly
</label>
<label>
  <input type="radio" name="newsletter_frequency" value="monthly" />
  Monthly
</label>

Un valor predeterminado puede reducir la fricción con preferencias inofensivas. Evite valores predeterminados de consentimiento, intención de fijación de precios, donaciones, encuestas o cualquier cosa en la que la preselección de una respuesta pueda sesgar la respuesta.

Aplicar estilo a los botones de opción sin romperlos

Mantenga la entrada nativa en el DOM y mantenga la etiqueta en la que se puede hacer clic. Esto le brinda compatibilidad con teclado y lector de pantalla sin JavaScript personalizado.

<fieldset class="radio-cards">
  <legend>Project type</legend>


  <label>
    <input type="radio" name="project_type" value="website" required />
    <span>Website</span>
  </label>


  <label>
    <input type="radio" name="project_type" value="saas" />
    <span>SaaS app</span>
  </label>
</fieldset>
.radio-cards {
  display: grid;
  gap: 12px;
  border: 0;
  padding: 0;
}


.radio-cards label {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
}


.radio-cards label:has(input:checked) {
  border-color: #059669;
  background: #ecfdf5;
}

Ejemplo completo con un backend de formularios alojado

<form action="https://api.formsfort.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="hidden" name="subject" value="New project inquiry" />


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


  <fieldset>
    <legend>What do you need?</legend>
    <label><input type="radio" name="need" value="website" required /> Website</label>
    <label><input type="radio" name="need" value="automation" /> Automation</label>
    <label><input type="radio" name="need" value="support" /> Support</label>
  </fieldset>


  <fieldset>
    <legend>Budget range</legend>
    <label><input type="radio" name="budget" value="under-1000" required /> Under $1,000</label>
    <label><input type="radio" name="budget" value="1000-5000" /> $1,000 to $5,000</label>
    <label><input type="radio" name="budget" value="5000-plus" /> $5,000+</label>
  </fieldset>


  <textarea name="message" rows="5" placeholder="Add context"></textarea>
  <input type="checkbox" name="botcheck" style="display:none" />


  <button type="submit">Send inquiry</button>
</form>

Esta versión proporciona valores normalizados al backend, proporciona a los usuarios etiquetas legibles y mantiene el formulario utilizable sin JavaScript.

Para un punto de partida más amplio, consulte Ejemplos de formularios HTML página. Si necesita respuestas de varias líneas, use Guía del área de texto HTML. Para conocer los patrones de validación generales, lea Guía de validación de formularios HTML.

Preguntas frecuentes

¿Cómo agrupo botones de opción en HTML?

Asigne a cada opción del mismo grupo de opciones el mismo atributo de nombre. Luego, el navegador permite solo un valor seleccionado para ese campo.

¿Los botones de opción necesitan un atributo de valor?

Sí. El atributo de valor es lo que recibe el backend de su formulario cuando se selecciona esa opción de radio. Sin un valor, los datos enviados son más difíciles de entender.

¿Cómo hago para que se requiera un grupo de radio?

Agregar requerido a al menos una entrada de radio en el grupo. El navegador requerirá que el visitante elija una opción antes de enviarla.

¿Los botones de radio deben usar conjunto de campos y leyenda?

Sí para la mayoría de las opciones agrupadas. El conjunto de campos y la leyenda brindan a los lectores de pantalla el contexto de la pregunta antes de cada opción de radio.

Comience gratis

¿Listo para agregar formularios a su sitio estático?

No se requiere backend. Apunte su formulario HTML a FormsFort y comience a recibir envíos en minutos.

Comience gratis Ver ejemplos