dsfr_email_field

Génère un champ de saisie d'email <input type="email"> au DSFR.

Documentation DSFR - Champ de saisie

Usage basique

<%= f.dsfr_email_field :email %>

<div class="fr-input-group">
  <label class="fr-label" for="usage-basique_email">Adresse email</label>
  <input class="fr-input" type="email" name="usage-basique[email]" id="usage-basique_email" />
</div>

Options disponibles

Les mêmes options que dsfr_text_field sont disponibles.

Avec texte d'aide

<%= f.dsfr_email_field :email, hint: "exemple@domaine.fr" %>

<div class="fr-input-group">
  <label class="fr-label" for="hint_email">Adresse email<span class="fr-hint-text">exemple@domaine.fr</span></label>
  <input class="fr-input" type="email" name="hint[email]" id="hint_email" />
</div>

Champ obligatoire

<%= f.dsfr_email_field :email, required: true %>

<div class="fr-input-group">
  <label class="fr-label" for="obligatoire_email">Adresse email</label>
  <input class="fr-input" required="required" type="email" name="obligatoire[email]" id="obligatoire_email" />
</div>

Champ en erreur

Affiche le champ avec un message d'erreur lorsque le modèle contient des erreurs de validation.

Adresse email Ce champ est obligatoireAdresse email L'adresse email n'est pas valide

<%= f.dsfr_email_field :email %>

<div class="fr-input-group fr-input-group--error">
  <div class="field_with_errors">
    <label class="fr-label" for="erreur_email">Adresse email</label>
  </div>
  <div class="field_with_errors">
    <input class="fr-input" type="email" name="erreur[email]" id="erreur_email" />
  </div>
  <p class="fr-messages-group">
    <span class="fr-message fr-message--error">Adresse email Ce champ est obligatoire</span>
    <span class="fr-message fr-message--error">Adresse email L'adresse email n'est pas valide</span>
  </p>
</div>