Formulario

Los campos en los que una persona escribe, en los estados en que los pone un formulario real. Cada uno va dentro de un rst-box con relleno, porque esa es la regla que estos parciales dan por hecha.

Cada ejemplo funciona de verdad, pero sus enlaces no llevan a ninguna parte. HTML muestra el marcado para copiar.

field

Etiqueta, campo, pista opcional, ayuda y error. El control de tipo texto general, con un ID explícito.

Sin adornos

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_bare">Título</label>
  <input rst-input type="text" id="f_bare" name="f_bare">
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field" dict "ID" "f_bare" "Name" "f_bare" "Label" "Título"}}

Con una pista

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_hint">Slug <span rst-field-hint>(en minúsculas, sin espacios)</span></label>
  <input rst-input type="text" id="f_hint" name="f_hint">
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_hint"
    "Name" "f_hint"
    "Label" "Slug"
    "Hint" "en minúsculas, sin espacios"}}

Con ayuda debajo del control

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_help">Correo electrónico</label>
  <input rst-input type="email" id="f_help" name="f_help" autocomplete="email" aria-describedby="f_help-help">
  <p rst-field-help id="f_help-help">Solo lo usamos para enviarte respuestas.</p>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_help"
    "Name" "f_help"
    "Label" "Correo electrónico"
    "Type" "email"
    "Help" "Solo lo usamos para enviarte respuestas."
    "Autocomplete" "email"}}

Obligatorio

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_required">Nombre completo</label>
  <input rst-input type="text" id="f_required" name="f_required" required>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_required"
    "Name" "f_required"
    "Label" "Nombre completo"
    "Required" true}}

Con un error

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_error">Correo electrónico</label>
  <input rst-input type="email" id="f_error" name="f_error" value="grace@" aria-invalid="true" aria-describedby="f_error-error">
  <p rst-field-error id="f_error-error" role="alert">Eso no parece una dirección de correo electrónico.</p>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_error"
    "Name" "f_error"
    "Label" "Correo electrónico"
    "Type" "email"
    "Error" "Eso no parece una dirección de correo electrónico."
    "Value" "grace@"}}

Corto

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_short">Código postal</label>
  <input rst-input="short" type="text" id="f_short" name="f_short" value="D02 XY45">
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_short"
    "Name" "f_short"
    "Label" "Código postal"
    "Short" true
    "Value" "D02 XY45"}}

El campo principal

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_primary">Título</label>
  <input rst-input="primary" type="text" id="f_primary" name="f_primary" value="Reunión trimestral del consejo">
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_primary"
    "Name" "f_primary"
    "Label" "Título"
    "Primary" true
    "Value" "Reunión trimestral del consejo"}}

field-text

Un campo de texto con etiqueta; los ids se derivan de Name. El asterisco del marcador de obligatorio es aria-hidden: la señal programática es el atributo required del campo.

Sin adornos

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_bare">Título</label>
  <input rst-input id="ft_bare" name="ft_bare" type="text">
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-text" dict "Name" "ft_bare" "Label" "Título"}}

Con una pista

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_hint">Titular</label>
  <input rst-input id="ft_hint" name="ft_hint" type="text" aria-describedby="ft_hint-hint">
  <small rst-field-hint id="ft_hint-hint">Se muestra en la lista.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_hint"
    "Label" "Titular"
    "Hint" "Se muestra en la lista."}}

Obligatorio

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_required">Nombre visible <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="ft_required" name="ft_required" type="text" autocomplete="nickname" required>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_required"
    "Label" "Nombre visible"
    "Required" true
    "Autocomplete" "nickname"}}

Con un error

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_error">Título</label>
  <input rst-input id="ft_error" name="ft_error" type="text" value="Notas de la versión" aria-invalid="true" aria-describedby="ft_error-error">
  <small rst-field-error id="ft_error-error">Ya existe una entrada con ese título.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_error"
    "Label" "Título"
    "Value" "Notas de la versión"
    "Error" "Ya existe una entrada con ese título."}}

El campo principal

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_primary">¿Qué es?</label>
  <input rst-input="primary" id="ft_primary" name="ft_primary" type="text" value="Reunión trimestral del consejo">
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_primary"
    "Label" "¿Qué es?"
    "Value" "Reunión trimestral del consejo"
    "Primary" true}}

Añade Primary al campo principal del formulario, por ejemplo un título o un nombre, para obtener un campo más destacado.

field-url

Un campo de dirección web que acepta example.com con o sin https://. Úsalo junto con form.URL en el servidor.

Sin adornos

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fu_bare">Sitio web</label>
  <input rst-input id="fu_bare" name="fu_bare" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false">
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-url" dict "Name" "fu_bare" "Label" "Sitio web"}}

Con una pista

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fu_hint">Sitio web de la empresa</label>
  <input rst-input id="fu_hint" name="fu_hint" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false" aria-describedby="fu_hint-hint">
  <small rst-field-hint id="fu_hint-hint">Puedes omitir el https.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-url" dict
    "Name" "fu_hint"
    "Label" "Sitio web de la empresa"
    "Hint" "Puedes omitir el https."}}

Con un error

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fu_error">Sitio web</label>
  <input rst-input id="fu_error" name="fu_error" type="text" inputmode="url" autocomplete="url" autocapitalize="none" autocorrect="off" spellcheck="false" value="brightwater" aria-invalid="true" aria-describedby="fu_error-error">
  <small rst-field-error id="fu_error-error">Introduce una dirección web, como example.com.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-url" dict
    "Name" "fu_error"
    "Label" "Sitio web"
    "Value" "brightwater"
    "Error" "Introduce una dirección web, como example.com."}}

field-money

Un importe en una sola moneda. El código de la moneda aparece junto a la etiqueta y se envía con el formulario, así que una moneda que cambió mientras alguien escribía se detecta al guardar. Úsalo junto con el Currency de form.Field en el servidor.

Sin adornos

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fm_bare">Precio de la entrada <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_bare" name="fm_bare" type="text" inputmode="decimal">
  <input type="hidden" name="fm_bare.locale" value="en">
  <input type="hidden" name="fm_bare.currency" value="EUR">
  <input type="hidden" name="fm_bare.seed" value="">
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-money" dict
    "Name" "fm_bare"
    "Label" "Precio de la entrada"
    "Locale" "en"
    "Currency" "EUR"}}

Con una pista

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fm_hint">Precio de la entrada <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_hint" name="fm_hint" type="text" inputmode="decimal" aria-describedby="fm_hint-hint">
  <input type="hidden" name="fm_hint.locale" value="en">
  <input type="hidden" name="fm_hint.currency" value="EUR">
  <input type="hidden" name="fm_hint.seed" value="">
  <small rst-field-hint id="fm_hint-hint">Por ejemplo, 12.50 o €12.50.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-money" dict
    "Name" "fm_hint"
    "Label" "Precio de la entrada"
    "Locale" "en"
    "Currency" "EUR"
    "Hint" "Por ejemplo, 12.50 o €12.50."}}

Con un error

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fm_error">Precio de la entrada <span class="rst-mono">EUR</span></label>
  <input rst-input id="fm_error" name="fm_error" type="text" inputmode="decimal" value="12,.50" aria-invalid="true" aria-describedby="fm_error-error">
  <input type="hidden" name="fm_error.locale" value="en">
  <input type="hidden" name="fm_error.currency" value="EUR">
  <input type="hidden" name="fm_error.seed" value="">
  <small rst-field-error id="fm_error-error">Usa un punto para los decimales, como en 12.50.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-money" dict
    "Name" "fm_error"
    "Label" "Precio de la entrada"
    "Value" "12,.50"
    "Locale" "en"
    "Currency" "EUR"
    "Error" "Usa un punto para los decimales, como en 12.50."}}

field-textarea

La envoltura de field-text alrededor de un textarea.

Sin adornos

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_bare">Notas</label>
  <textarea rst-textarea id="ta_bare" name="ta_bare" rows="3"></textarea>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-textarea" dict "Name" "ta_bare" "Label" "Notas" "Rows" 3}}

Con una pista

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_hint">Biografía</label>
  <textarea rst-textarea id="ta_hint" name="ta_hint" rows="3" aria-describedby="ta_hint-hint"></textarea>
  <small rst-field-hint id="ta_hint-hint">Se muestra en tu perfil.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-textarea" dict
    "Name" "ta_hint"
    "Label" "Biografía"
    "Rows" 3
    "Hint" "Se muestra en tu perfil."}}

Con un error

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_error">Resumen</label>
  <textarea rst-textarea id="ta_error" name="ta_error" rows="3" aria-invalid="true" aria-describedby="ta_error-error">…</textarea>
  <small rst-field-error id="ta_error-error">Un resumen necesita al menos veinte caracteres.</small>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-textarea" dict
    "Name" "ta_error"
    "Label" "Resumen"
    "Value" "…"
    "Rows" 3
    "Error" "Un resumen necesita al menos veinte caracteres."}}

Obligatorio

Escritorio Móvil HTML Plantilla

Pon esto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_required">Motivo del reembolso <span rst-field-required aria-hidden="true">*</span></label>
  <textarea rst-textarea id="ta_required" name="ta_required" rows="3" required></textarea>
</div>

Pon esto dentro de <section rst-box><form rst-form>.

{{template "field-textarea" dict
    "Name" "ta_required"
    "Label" "Motivo del reembolso"
    "Rows" 3
    "Required" true}}