Retour

Modèle de formulaire d'adresse (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-1619" aria-labelledby="address-1619-legend address-1619-messages">
    <legend class="fr-sr-only" id="address-1619-legend">
        Adresse postale
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="address-1614">
                Adresse
                <span class="fr-hint-text">Numéro et voie</span>
            </label>
            <input class="fr-input" aria-describedby="address-1614-messages" name="address-line1" id="address-1614" type="text">
            <div class="fr-messages-group" id="address-1614-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="complement-1615">
                Complément d’adresse (optionnel)
                <span class="fr-hint-text">Bâtiment, immeuble, escalier et numéro d’appartement</span>
            </label>
            <input class="fr-input" aria-describedby="complement-1615-messages" name="address-line2" id="complement-1615" type="text">
            <div class="fr-messages-group" id="complement-1615-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--postal">
        <div class="fr-input-group">
            <label class="fr-label" for="postal-1616">
                Code postal
            </label>
            <input class="fr-input" aria-describedby="postal-1616-messages" name="postal-code" id="postal-1616" type="text">
            <div class="fr-messages-group" id="postal-1616-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline@md fr-fieldset__element--inline-grow">
        <div class="fr-input-group">
            <label class="fr-label" for="city-1617">
                Ville ou commune
            </label>
            <input class="fr-input" aria-describedby="city-1617-messages" name="address-level2" id="city-1617" type="text">
            <div class="fr-messages-group" id="city-1617-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="address-1619-messages" aria-live="assertive">
    </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-1634" aria-labelledby="address-1634-legend address-1634-messages">
    <legend class="fr-sr-only" id="address-1634-legend">
        Adresse postale
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="address-1628">
                Adresse
                <span class="fr-hint-text">Numéro et voie</span>
            </label>
            <input class="fr-input" aria-describedby="address-1628-messages" name="address-line1" id="address-1628" type="text">
            <div class="fr-messages-group" id="address-1628-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="complement-1629">
                Complément d’adresse (optionnel)
                <span class="fr-hint-text">Bâtiment, immeuble, escalier et numéro d’appartement</span>
            </label>
            <input class="fr-input" aria-describedby="complement-1629-messages" name="address-line2" id="complement-1629" type="text">
            <div class="fr-messages-group" id="complement-1629-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="locality-1630">
                Lieu-dit, commune déléguée ou boîte postale
            </label>
            <input class="fr-input" aria-describedby="locality-1630-messages" name="address-level3" id="locality-1630" type="text">
            <div class="fr-messages-group" id="locality-1630-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--postal">
        <div class="fr-input-group">
            <label class="fr-label" for="postal-1631">
                Code postal
            </label>
            <input class="fr-input" aria-describedby="postal-1631-messages" name="postal-code" id="postal-1631" type="text">
            <div class="fr-messages-group" id="postal-1631-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline@md fr-fieldset__element--inline-grow">
        <div class="fr-input-group">
            <label class="fr-label" for="city-1632">
                Ville ou commune
            </label>
            <input class="fr-input" aria-describedby="city-1632-messages" name="address-level2" id="city-1632" type="text">
            <div class="fr-messages-group" id="city-1632-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="address-1634-messages" aria-live="assertive">
    </div>
</fieldset>

Complément d'adresse

Complément d'adresse postale

<fieldset class="fr-fieldset" id="address-1651" aria-labelledby="address-1651-legend address-1651-messages">
    <legend class="fr-sr-only" id="address-1651-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">
            <label class="fr-label" for="number-1645">
                Numéro
            </label>
            <input class="fr-input" aria-describedby="number-1645-messages" name="number" id="number-1645" type="text">
            <div class="fr-messages-group" id="number-1645-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element fr-fieldset__element--inline fr-fieldset__element--inline-grow">
        <div class="fr-input-group">
            <label class="fr-label" for="street-1646">
                Voie
            </label>
            <input class="fr-input" aria-describedby="street-1646-messages" name="street" id="street-1646" type="text">
            <div class="fr-messages-group" id="street-1646-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="block-1647">
                Immeuble
            </label>
            <input class="fr-input" aria-describedby="block-1647-messages" name="block" id="block-1647" type="text">
            <div class="fr-messages-group" id="block-1647-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="building-1648">
                Bâtiment
            </label>
            <input class="fr-input" aria-describedby="building-1648-messages" name="building" id="building-1648" type="text">
            <div class="fr-messages-group" id="building-1648-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="stare-1649">
                Escalier
            </label>
            <input class="fr-input" aria-describedby="stare-1649-messages" name="stare" id="stare-1649" type="text">
            <div class="fr-messages-group" id="stare-1649-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group">
            <label class="fr-label" for="apartment-1650">
                Numéro d'appartement
            </label>
            <input class="fr-input" aria-describedby="apartment-1650-messages" name="apartment" id="apartment-1650" type="text">
            <div class="fr-messages-group" id="apartment-1650-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="address-1651-messages" aria-live="assertive">
    </div>
</fieldset>

Paramètres d’affichage

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