DSFR v1.13.0
La demande d’adresse postale permet d’aider un utilisateur à saisir son adresse.
<fieldset class="fr-fieldset" id="address-540" aria-labelledby="address-540-legend address-540-messages">
<legend class="fr-sr-only" id="address-540-legend">
Adresse postale
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-541">
<label class="fr-label" for="address-535">
Adresse
<span class="fr-hint-text">Indication : numéro et voie</span>
</label>
<input class="fr-input" aria-describedby="address-535-messages" name="address-line1" autocomplete="address-line1" id="address-535" type="text">
<div class="fr-messages-group" id="address-535-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-542">
<label class="fr-label" for="complement-536">
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-536-messages" name="address-line2" autocomplete="address-line2" id="complement-536" type="text">
<div class="fr-messages-group" id="complement-536-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-543">
<label class="fr-label" for="postal-537">
Code postal
<span class="fr-hint-text">Format attendu : 5 chiffres</span>
</label>
<input class="fr-input" aria-describedby="postal-537-messages" name="postal-code" autocomplete="postal-code" id="postal-537" type="text">
<div class="fr-messages-group" id="postal-537-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-544">
<label class="fr-label" for="city-538">
Ville ou commune
<span class="fr-hint-text">Exemple : Montpellier</span>
</label>
<input class="fr-input" aria-describedby="city-538-messages" name="address-level2" autocomplete="address-level2" id="city-538" type="text">
<div class="fr-messages-group" id="city-538-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="address-540-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="address-564" aria-labelledby="address-564-legend address-564-messages">
<legend class="fr-sr-only" id="address-564-legend">
Adresse postale
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-565">
<label class="fr-label" for="address-558">
Adresse
<span class="fr-hint-text">Indication : numéro et voie</span>
</label>
<input class="fr-input" aria-describedby="address-558-messages" name="address-line1" autocomplete="address-line1" id="address-558" type="text">
<div class="fr-messages-group" id="address-558-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-566">
<label class="fr-label" for="complement-559">
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-559-messages" name="address-line2" autocomplete="address-line2" id="complement-559" type="text">
<div class="fr-messages-group" id="complement-559-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-567">
<label class="fr-label" for="locality-560">
Lieu-dit, commune déléguée ou boîte postale
</label>
<input class="fr-input" aria-describedby="locality-560-messages" name="address-level3" autocomplete="address-line3" id="locality-560" type="text">
<div class="fr-messages-group" id="locality-560-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-568">
<label class="fr-label" for="postal-561">
Code postal
<span class="fr-hint-text">Format attendu : 5 chiffres</span>
</label>
<input class="fr-input" aria-describedby="postal-561-messages" name="postal-code" autocomplete="postal-code" id="postal-561" type="text">
<div class="fr-messages-group" id="postal-561-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-569">
<label class="fr-label" for="city-562">
Ville ou commune
<span class="fr-hint-text">Exemple : Montpellier</span>
</label>
<input class="fr-input" aria-describedby="city-562-messages" name="address-level2" autocomplete="address-level2" id="city-562" type="text">
<div class="fr-messages-group" id="city-562-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="address-564-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="address-592" aria-labelledby="address-592-legend address-592-messages">
<legend class="fr-sr-only" id="address-592-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-593">
<label class="fr-label" for="number-586">
Numéro
</label>
<input class="fr-input" aria-describedby="number-586-messages" name="number" id="number-586" type="text">
<div class="fr-messages-group" id="number-586-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-594">
<label class="fr-label" for="street-587">
Voie
</label>
<input class="fr-input" aria-describedby="street-587-messages" name="street" id="street-587" type="text">
<div class="fr-messages-group" id="street-587-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-595">
<label class="fr-label" for="building-588">
Bâtiment
</label>
<input class="fr-input" aria-describedby="building-588-messages" name="building" id="building-588" type="text">
<div class="fr-messages-group" id="building-588-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-596">
<label class="fr-label" for="block-589">
Immeuble
</label>
<input class="fr-input" aria-describedby="block-589-messages" name="block" id="block-589" type="text">
<div class="fr-messages-group" id="block-589-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-597">
<label class="fr-label" for="stare-590">
Escalier
</label>
<input class="fr-input" aria-describedby="stare-590-messages" name="stare" id="stare-590" type="text">
<div class="fr-messages-group" id="stare-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="apartment-591">
Numéro d'appartement
</label>
<input class="fr-input" aria-describedby="apartment-591-messages" name="apartment" id="apartment-591" type="text">
<div class="fr-messages-group" id="apartment-591-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="address-592-messages" aria-live="polite">
</div>
</fieldset>