architectureOrganización de formularios
Los formularios complejos requieren una estructura clara para mejorar la usabilidad y accesibilidad. El marcado HTML permite organizar los controles de forma lógica.
widgetsElementos estructurales
view_quilt
<div>
Contenedores genéricos para agrupar elementos relacionados y aplicar estilos
format_list_bulleted
<ul> y <li>
Listas para organizar opciones como casillas de verificación o botones de radio
title
<h1>-<h6>
Títulos para secciones del formulario y jerarquía visual
segment
<section>
Secciones semánticas para agrupar contenido relacionado
codeEjemplo de estructura
<form action="/procesar" method="post">
<section>
<h2>Información personal</h2>
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
</section>
<section>
<h2>Preferencias</h2>
<fieldset>
<legend>Notificaciones</legend>
<ul>
<li>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Recibir newsletter</label>
</li>
</ul>
</fieldset>
</section>
</form>
<section>
<h2>Información personal</h2>
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
</section>
<section>
<h2>Preferencias</h2>
<fieldset>
<legend>Notificaciones</legend>
<ul>
<li>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Recibir newsletter</label>
</li>
</ul>
</fieldset>
</section>
</form>