dsfr_url_field

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

Documentation DSFR - Champ de saisie

Usage basique

<%= f.dsfr_url_field :url %>

<div class="fr-input-group">
  <label class="fr-label" for="usage-basique_url">Site web</label>
  <input class="fr-input" type="url" name="usage-basique[url]" id="usage-basique_url" />
</div>

Options disponibles

Les mêmes options que dsfr_text_field sont disponibles.

Avec texte d'aide

<%= f.dsfr_url_field :url, hint: "https://example.com" %>

<div class="fr-input-group">
  <label class="fr-label" for="hint_url">Site web<span class="fr-hint-text">https://example.com</span></label>
  <input class="fr-input" type="url" name="hint[url]" id="hint_url" />
</div>

Champ en erreur

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

Site web Ce champ est obligatoireSite web L'URL n'est pas valide

<%= f.dsfr_url_field :url %>

<div class="fr-input-group fr-input-group--error">
  <div class="field_with_errors">
    <label class="fr-label" for="erreur_url">Site web</label>
  </div>
  <div class="field_with_errors">
    <input class="fr-input" type="url" name="erreur[url]" id="erreur_url" />
  </div>
  <p class="fr-messages-group">
    <span class="fr-message fr-message--error">Site web Ce champ est obligatoire</span>
    <span class="fr-message fr-message--error">Site web L'URL n'est pas valide</span>
  </p>
</div>