# Formularios

Las reglas para el formulario completo, antes de cualquier campo: pregunte poco, una columna, la etiqueta en vista y el error debajo del campo.

## Reglas para el formulario completo

-   **Pregunta solo lo necesario.** Cada campo extra es trabajo para la persona. Si puedes averiguarlo tú mismo, no preguntes.
-   **Una columna.** Campos uno debajo del otro, en el orden que piensa la persona. Lado a lado solo cuando son una cosa (hora y minuto).
-   **Etiqueta siempre visible**, arriba del campo. El texto de marcador de posición nunca ocupa su lugar.
-   **Todo es obligatorio**, excepto lo que dice "(opcional)". Marcar lo opcional es más corto que dispersar asteriscos.
-   **Cuanto más cerca, más juntos.** Dentro de un campo, `space-1`; entre opciones en un grupo, `space-2`; entre un campo y el siguiente, `space-5`.
-   **El error va debajo del campo**, con icono y palabra, y un resumen arriba cuando hay más de uno. Abajo, no rompe un formulario de dos columnas.
-   **El servidor siempre valida.** El error vuelve con los valores rellenos; nada lo que escribió la persona se pierde.
-   **Un botón principal al final**, diciendo qué pasa: "Guardar recordatorio". La retroalimentación muestra en el formulario mismo.

## Un formulario completo

Nombre del recordatorioShows in the notificationWrite a name

¿Cuándo recordar?

Nota (opcional)

Time format:

Intentar guardar con un nombre vacío: el error aparece debajo del campo y el foco se traslada a él. Con un nombre, la retroalimentación muestra en el formulario mismo.

## Texto de marcador de posición

-   Permitido como un ejemplo extra breve, bajo una etiqueta que permanece: "por ejemplo. Regar las plantas", "Buscar tareas".
-   Nunca en lugar de la etiqueta o la pista: desaparece cuando la persona escribe, y lo que dice va con ella.
-   Nunca con información necesaria (formato requerido, límites): eso va en la pista, que permanece.
-   En el color de texto suave, que pasa la relación de contraste 4.5.

## Hacer y no hacer

Do

Subject

La etiqueta permanece visible, y el ejemplo solo ayuda.

Don’t

El ejemplo en lugar de la etiqueta, con una regla dentro: todo desaparece cuando la persona escribe.

Do

Note (optional)

Solo el campo opcional está marcado, en palabras.

Don’t

Name \*

Asteriscos en todo, con la clave abajo.

Do

NameWrite a name

El error debajo del campo, con icono y palabra.

Don’t

Invalid fieldName

El error arriba, vago, y solo por color.

## Escribiendo

-   Etiqueta: un sustantivo corto o una pregunta directa ("Nombre del recordatorio", "¿Cuándo recordar?"). Sin dos puntos al final.
-   Sugerencia: solo si ayuda a acertar la primera vez. Si cada campo tiene una sugerencia, ninguna se leerá.
-   Error: qué hacer, no qué está mal ("Escribe un nombre", no "Campo inválido").

## Componentes

-   [Campo, TextInput, TimeInput, Select, Checkbox, Radios, Switch](../formulario.html): las piezas.
-   [Mensaje de error y Resumen de errores](../feedback.html): los errores.
-   [Retroalimentación en el lugar](/es/design/retorno/): lo que ocurre después de Guardar.