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-7000" aria-labelledby="address-7000-legend address-7000-messages">
    <legend class="fr-sr-only" id="address-7000-legend">
        Adresse postale
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7001">
            <label class="fr-label" for="address-6995">
                Adresse
                <span class="fr-hint-text">Numéro et voie</span>
            </label>
            <input class="fr-input" aria-describedby="address-6995-messages" name="address-line1" autocomplete="address-line1" id="address-6995" type="text">
            <div class="fr-messages-group" id="address-6995-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7002">
            <label class="fr-label" for="complement-6996">
                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-6996-messages" name="address-line2" autocomplete="address-line2" id="complement-6996" type="text">
            <div class="fr-messages-group" id="complement-6996-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" id="input-group-7003">
            <label class="fr-label" for="postal-6997">
                Code postal
            </label>
            <input class="fr-input" aria-describedby="postal-6997-messages" name="postal-code" autocomplete="postal-code" id="postal-6997" type="text">
            <div class="fr-messages-group" id="postal-6997-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" id="input-group-7004">
            <label class="fr-label" for="city-6998">
                Ville ou commune
            </label>
            <input class="fr-input" aria-describedby="city-6998-messages" name="address-level2" autocomplete="address-level2" id="city-6998" type="text">
            <div class="fr-messages-group" id="city-6998-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="address-7000-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-7024" aria-labelledby="address-7024-legend address-7024-messages">
    <legend class="fr-sr-only" id="address-7024-legend">
        Adresse postale
    </legend>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7025">
            <label class="fr-label" for="address-7018">
                Adresse
                <span class="fr-hint-text">Numéro et voie</span>
            </label>
            <input class="fr-input" aria-describedby="address-7018-messages" name="address-line1" autocomplete="address-line1" id="address-7018" type="text">
            <div class="fr-messages-group" id="address-7018-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7026">
            <label class="fr-label" for="complement-7019">
                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-7019-messages" name="address-line2" autocomplete="address-line2" id="complement-7019" type="text">
            <div class="fr-messages-group" id="complement-7019-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7027">
            <label class="fr-label" for="locality-7020">
                Lieu-dit, commune déléguée ou boîte postale
            </label>
            <input class="fr-input" aria-describedby="locality-7020-messages" name="address-level3" autocomplete="address-line3" id="locality-7020" type="text">
            <div class="fr-messages-group" id="locality-7020-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" id="input-group-7028">
            <label class="fr-label" for="postal-7021">
                Code postal
            </label>
            <input class="fr-input" aria-describedby="postal-7021-messages" name="postal-code" autocomplete="postal-code" id="postal-7021" type="text">
            <div class="fr-messages-group" id="postal-7021-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" id="input-group-7029">
            <label class="fr-label" for="city-7022">
                Ville ou commune
            </label>
            <input class="fr-input" aria-describedby="city-7022-messages" name="address-level2" autocomplete="address-level2" id="city-7022" type="text">
            <div class="fr-messages-group" id="city-7022-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="address-7024-messages" aria-live="assertive">
    </div>
</fieldset>

Complément d'adresse

Complément d'adresse postale

<fieldset class="fr-fieldset" id="address-7052" aria-labelledby="address-7052-legend address-7052-messages">
    <legend class="fr-sr-only" id="address-7052-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-7053">
            <label class="fr-label" for="number-7046">
                Numéro
            </label>
            <input class="fr-input" aria-describedby="number-7046-messages" name="number" id="number-7046" type="text">
            <div class="fr-messages-group" id="number-7046-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" id="input-group-7054">
            <label class="fr-label" for="street-7047">
                Voie
            </label>
            <input class="fr-input" aria-describedby="street-7047-messages" name="street" id="street-7047" type="text">
            <div class="fr-messages-group" id="street-7047-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7055">
            <label class="fr-label" for="building-7048">
                Bâtiment
            </label>
            <input class="fr-input" aria-describedby="building-7048-messages" name="building" id="building-7048" type="text">
            <div class="fr-messages-group" id="building-7048-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7056">
            <label class="fr-label" for="block-7049">
                Immeuble
            </label>
            <input class="fr-input" aria-describedby="block-7049-messages" name="block" id="block-7049" type="text">
            <div class="fr-messages-group" id="block-7049-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7057">
            <label class="fr-label" for="stare-7050">
                Escalier
            </label>
            <input class="fr-input" aria-describedby="stare-7050-messages" name="stare" id="stare-7050" type="text">
            <div class="fr-messages-group" id="stare-7050-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-fieldset__element">
        <div class="fr-input-group" id="input-group-7058">
            <label class="fr-label" for="apartment-7051">
                Numéro d'appartement
            </label>
            <input class="fr-input" aria-describedby="apartment-7051-messages" name="apartment" id="apartment-7051" type="text">
            <div class="fr-messages-group" id="apartment-7051-messages" aria-live="assertive">
            </div>
        </div>
    </div>
    <div class="fr-messages-group" id="address-7052-messages" aria-live="assertive">
    </div>
</fieldset>

Paramètres d’affichage

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