Formulário

Os campos em que uma pessoa escreve, nos estados em que um formulário a sério os põe. Cada um fica dentro de um rst-box com espaçamento, porque é essa a regra que estes parciais assumem.

Cada exemplo funciona de verdade, mas as suas ligações não levam a lado nenhum. HTML mostra a marcação para copiar.

field

Etiqueta, campo, dica opcional, ajuda e erro. O controlo geral do tipo texto, com um ID explícito.

Simples

Computador Telemóvel HTML Template

Coloque isto 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>

Coloque isto dentro de <section rst-box><form rst-form>.

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

Com uma dica

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_hint">Slug <span rst-field-hint>(em minúsculas, sem espaços)</span></label>
  <input rst-input type="text" id="f_hint" name="f_hint">
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_hint"
    "Name" "f_hint"
    "Label" "Slug"
    "Hint" "em minúsculas, sem espaços"}}

Com ajuda por baixo do controlo

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_help">E-mail</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">Só o usamos para lhe enviar respostas.</p>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_help"
    "Name" "f_help"
    "Label" "E-mail"
    "Type" "email"
    "Help" "Só o usamos para lhe enviar respostas."
    "Autocomplete" "email"}}

Obrigatório

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

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

Coloque isto dentro de <section rst-box><form rst-form>.

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

Com um erro

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="f_error">E-mail</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">Isso não parece um endereço de e-mail.</p>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_error"
    "Name" "f_error"
    "Label" "E-mail"
    "Type" "email"
    "Error" "Isso não parece um endereço de e-mail."
    "Value" "grace@"}}

Curto

Computador Telemóvel HTML Template

Coloque isto 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>

Coloque isto 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"}}

O campo principal

Computador Telemóvel HTML Template

Coloque isto 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ão trimestral da direção">
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field" dict
    "ID" "f_primary"
    "Name" "f_primary"
    "Label" "Título"
    "Primary" true
    "Value" "Reunião trimestral da direção"}}

field-text

Um campo de texto com etiqueta; os ids derivam de Name. O asterisco do marcador de obrigatório é aria-hidden: o sinal programático é o atributo required do campo.

Simples

Computador Telemóvel HTML Template

Coloque isto 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>

Coloque isto dentro de <section rst-box><form rst-form>.

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

Com uma dica

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_hint">Título principal</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">Aparece na lista.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_hint"
    "Label" "Título principal"
    "Hint" "Aparece na lista."}}

Obrigatório

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

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

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_required"
    "Label" "Nome a apresentar"
    "Required" true
    "Autocomplete" "nickname"}}

Com um erro

Computador Telemóvel HTML Template

Coloque isto 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 da versão" aria-invalid="true" aria-describedby="ft_error-error">
  <small rst-field-error id="ft_error-error">Já existe uma publicação com esse título.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_error"
    "Label" "Título"
    "Value" "Notas da versão"
    "Error" "Já existe uma publicação com esse título."}}

O campo principal

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ft_primary">O que é?</label>
  <input rst-input="primary" id="ft_primary" name="ft_primary" type="text" value="Reunião trimestral da direção">
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-text" dict
    "Name" "ft_primary"
    "Label" "O que é?"
    "Value" "Reunião trimestral da direção"
    "Primary" true}}

Adiciona Primary ao campo principal do formulário, por exemplo um título ou um nome, para obteres um campo mais destacado.

field-url

Um campo de endereço web que aceita example.com com ou sem https://. Use-o com form.URL no servidor.

Simples

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

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

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-url" dict "Name" "fu_bare" "Label" "Site"}}

Com uma dica

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fu_hint">Site da 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">Pode omitir o https.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-url" dict
    "Name" "fu_hint"
    "Label" "Site da empresa"
    "Hint" "Pode omitir o https."}}

Com um erro

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fu_error">Site</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">Introduza um endereço web, como example.com.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-url" dict
    "Name" "fu_error"
    "Label" "Site"
    "Value" "brightwater"
    "Error" "Introduza um endereço web, como example.com."}}

field-money

Um valor numa só moeda. O código da moeda aparece junto ao rótulo e é enviado com o formulário, por isso uma moeda que mudou enquanto alguém escrevia é detetada ao guardar. Use-o com o Currency de form.Field no servidor.

Simples

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fm_bare">Preço do bilhete <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>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-money" dict
    "Name" "fm_bare"
    "Label" "Preço do bilhete"
    "Locale" "en"
    "Currency" "EUR"}}

Com uma dica

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fm_hint">Preço do bilhete <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 exemplo, 12.50 ou €12.50.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-money" dict
    "Name" "fm_hint"
    "Label" "Preço do bilhete"
    "Locale" "en"
    "Currency" "EUR"
    "Hint" "Por exemplo, 12.50 ou €12.50."}}

Com um erro

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="fm_error">Preço do bilhete <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">Use um ponto para as casas decimais, como em 12.50.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-money" dict
    "Name" "fm_error"
    "Label" "Preço do bilhete"
    "Value" "12,.50"
    "Locale" "en"
    "Currency" "EUR"
    "Error" "Use um ponto para as casas decimais, como em 12.50."}}

field-textarea

O invólucro do field-text à volta de um textarea.

Simples

Computador Telemóvel HTML Template

Coloque isto 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>

Coloque isto dentro de <section rst-box><form rst-form>.

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

Com uma dica

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_hint">Biografia</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">Aparece no seu perfil.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-textarea" dict
    "Name" "ta_hint"
    "Label" "Biografia"
    "Rows" 3
    "Hint" "Aparece no seu perfil."}}

Com um erro

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

<div rst-field>
  <label rst-field-label for="ta_error">Resumo</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">Um resumo precisa de pelo menos vinte carateres.</small>
</div>

Coloque isto dentro de <section rst-box><form rst-form>.

{{template "field-textarea" dict
    "Name" "ta_error"
    "Label" "Resumo"
    "Value" "…"
    "Rows" 3
    "Error" "Um resumo precisa de pelo menos vinte carateres."}}

Obrigatório

Computador Telemóvel HTML Template

Coloque isto dentro de <section rst-box><form rst-form>.

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

Coloque isto dentro de <section rst-box><form rst-form>.

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