DSFR v1.13.1

Retour

Bloc fonctionnel d'adresse postale (address)

La demande d’adresse postale permet d’aider un utilisateur à saisir son adresse.

Demande d’une adresse postale nationale

Adresse postale

<fieldset class="fr-fieldset" id="address-543" aria-labelledby="address-543-legend address-543-messages">
    <legend class="fr-sr-only" id="address-543-legend">
        Adresse postale
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-544">
            <label class="fr-label" for="address-538">
                Adresse
                <span class="fr-hint-text">Indication : numéro et voie</span>
            </label>
            <input class="fr-input" aria-describedby="address-538-messages" name="address-line1" autocomplete="address-line1" id="address-538" type="text">
            <div class="fr-messages-group" id="address-538-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-545">
            <label class="fr-label" for="complement-539">
                Complément d’adresse (optionnel)
                <span class="fr-hint-text">Indication : bâtiment, immeuble, escalier et numéro d’appartement</span>
            </label>
            <input class="fr-input" aria-describedby="complement-539-messages" name="address-line2" autocomplete="address-line2" id="complement-539" type="text">
            <div class="fr-messages-group" id="complement-539-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--postal">
        <div class="fr-input-group" id="input-group-546">
            <label class="fr-label" for="postal-540">
                Code postal
                <span class="fr-hint-text">Format attendu : 5 chiffres</span>
            </label>
            <input class="fr-input" aria-describedby="postal-540-messages" name="postal-code" autocomplete="postal-code" id="postal-540" type="text">
            <div class="fr-messages-group" id="postal-540-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline@md fr-fieldset__element--inline-grow">
        <div class="fr-input-group" id="input-group-547">
            <label class="fr-label" for="city-541">
                Ville ou commune
                <span class="fr-hint-text">Exemple : Montpellier</span>
            </label>
            <input class="fr-input" aria-describedby="city-541-messages" name="address-level2" autocomplete="address-level2" id="city-541" type="text">
            <div class="fr-messages-group" id="city-541-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="address-543-messages" aria-live="polite">
    </div>
</fieldset>

Demande d’une adresse postale nationale + Lieu-dit, commune déléguée ou boîte postale

Adresse postale

<fieldset class="fr-fieldset" id="address-567" aria-labelledby="address-567-legend address-567-messages">
    <legend class="fr-sr-only" id="address-567-legend">
        Adresse postale
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-568">
            <label class="fr-label" for="address-561">
                Adresse
                <span class="fr-hint-text">Indication : numéro et voie</span>
            </label>
            <input class="fr-input" aria-describedby="address-561-messages" name="address-line1" autocomplete="address-line1" id="address-561" type="text">
            <div class="fr-messages-group" id="address-561-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-569">
            <label class="fr-label" for="complement-562">
                Complément d’adresse (optionnel)
                <span class="fr-hint-text">Indication : bâtiment, immeuble, escalier et numéro d’appartement</span>
            </label>
            <input class="fr-input" aria-describedby="complement-562-messages" name="address-line2" autocomplete="address-line2" id="complement-562" type="text">
            <div class="fr-messages-group" id="complement-562-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-570">
            <label class="fr-label" for="locality-563">
                Lieu-dit, commune déléguée ou boîte postale
            </label>
            <input class="fr-input" aria-describedby="locality-563-messages" name="address-level3" autocomplete="address-line3" id="locality-563" type="text">
            <div class="fr-messages-group" id="locality-563-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--postal">
        <div class="fr-input-group" id="input-group-571">
            <label class="fr-label" for="postal-564">
                Code postal
                <span class="fr-hint-text">Format attendu : 5 chiffres</span>
            </label>
            <input class="fr-input" aria-describedby="postal-564-messages" name="postal-code" autocomplete="postal-code" id="postal-564" type="text">
            <div class="fr-messages-group" id="postal-564-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline@md fr-fieldset__element--inline-grow">
        <div class="fr-input-group" id="input-group-572">
            <label class="fr-label" for="city-565">
                Ville ou commune
                <span class="fr-hint-text">Exemple : Montpellier</span>
            </label>
            <input class="fr-input" aria-describedby="city-565-messages" name="address-level2" autocomplete="address-level2" id="city-565" type="text">
            <div class="fr-messages-group" id="city-565-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="address-567-messages" aria-live="polite">
    </div>
</fieldset>

Complément d'adresse

Complément d'adresse postale

<fieldset class="fr-fieldset" id="address-595" aria-labelledby="address-595-legend address-595-messages">
    <legend class="fr-sr-only" id="address-595-legend">
        Complément d'adresse postale
    </legend>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--inline-grow fr-fieldset__element--number">
        <div class="fr-input-group" id="input-group-596">
            <label class="fr-label" for="number-589">
                Numéro
            </label>
            <input class="fr-input" aria-describedby="number-589-messages" name="number" id="number-589" type="text">
            <div class="fr-messages-group" id="number-589-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--inline-grow">
        <div class="fr-input-group" id="input-group-597">
            <label class="fr-label" for="street-590">
                Voie
            </label>
            <input class="fr-input" aria-describedby="street-590-messages" name="street" id="street-590" type="text">
            <div class="fr-messages-group" id="street-590-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-598">
            <label class="fr-label" for="building-591">
                Bâtiment
            </label>
            <input class="fr-input" aria-describedby="building-591-messages" name="building" id="building-591" type="text">
            <div class="fr-messages-group" id="building-591-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-599">
            <label class="fr-label" for="block-592">
                Immeuble
            </label>
            <input class="fr-input" aria-describedby="block-592-messages" name="block" id="block-592" type="text">
            <div class="fr-messages-group" id="block-592-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-600">
            <label class="fr-label" for="stare-593">
                Escalier
            </label>
            <input class="fr-input" aria-describedby="stare-593-messages" name="stare" id="stare-593" type="text">
            <div class="fr-messages-group" id="stare-593-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-601">
            <label class="fr-label" for="apartment-594">
                Numéro d'appartement
            </label>
            <input class="fr-input" aria-describedby="apartment-594-messages" name="apartment" id="apartment-594" type="text">
            <div class="fr-messages-group" id="apartment-594-messages" aria-live="polite">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="address-595-messages" aria-live="polite">
    </div>
</fieldset>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.