DSFR v1.14.1
La demande d’adresse postale permet d’aider un utilisateur à saisir son adresse.
Documentation<fieldset class="fr-fieldset" id="address-7251" aria-labelledby="address-7251-legend address-7251-messages">
<legend class="fr-sr-only" id="address-7251-legend">
Adresse postale
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7252">
<label class="fr-label" for="address-7246">
Adresse
<span class="fr-hint-text">Indication : numéro et voie</span>
</label>
<input class="fr-input" aria-describedby="address-7246-messages" name="address-line1" autocomplete="address-line1" id="address-7246" type="text">
<div class="fr-messages-group" id="address-7246-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7253">
<label class="fr-label" for="complement-7247">
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-7247-messages" name="address-line2" autocomplete="address-line2" id="complement-7247" type="text">
<div class="fr-messages-group" id="complement-7247-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-7254">
<label class="fr-label" for="postal-7248">
Code postal
<span class="fr-hint-text">Format attendu : 5 chiffres</span>
</label>
<input class="fr-input" aria-describedby="postal-7248-messages" name="postal-code" autocomplete="postal-code" id="postal-7248" type="text">
<div class="fr-messages-group" id="postal-7248-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-7255">
<label class="fr-label" for="city-7249">
Ville ou commune
<span class="fr-hint-text">Exemple : Montpellier</span>
</label>
<input class="fr-input" aria-describedby="city-7249-messages" name="address-level2" autocomplete="address-level2" id="city-7249" type="text">
<div class="fr-messages-group" id="city-7249-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="address-7251-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="address-7275" aria-labelledby="address-7275-legend address-7275-messages">
<legend class="fr-sr-only" id="address-7275-legend">
Adresse postale
</legend>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7276">
<label class="fr-label" for="address-7269">
Adresse
<span class="fr-hint-text">Indication : numéro et voie</span>
</label>
<input class="fr-input" aria-describedby="address-7269-messages" name="address-line1" autocomplete="address-line1" id="address-7269" type="text">
<div class="fr-messages-group" id="address-7269-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7277">
<label class="fr-label" for="complement-7270">
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-7270-messages" name="address-line2" autocomplete="address-line2" id="complement-7270" type="text">
<div class="fr-messages-group" id="complement-7270-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7278">
<label class="fr-label" for="locality-7271">
Lieu-dit, commune déléguée ou boîte postale
</label>
<input class="fr-input" aria-describedby="locality-7271-messages" name="address-level3" autocomplete="address-line3" id="locality-7271" type="text">
<div class="fr-messages-group" id="locality-7271-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-7279">
<label class="fr-label" for="postal-7272">
Code postal
<span class="fr-hint-text">Format attendu : 5 chiffres</span>
</label>
<input class="fr-input" aria-describedby="postal-7272-messages" name="postal-code" autocomplete="postal-code" id="postal-7272" type="text">
<div class="fr-messages-group" id="postal-7272-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-7280">
<label class="fr-label" for="city-7273">
Ville ou commune
<span class="fr-hint-text">Exemple : Montpellier</span>
</label>
<input class="fr-input" aria-describedby="city-7273-messages" name="address-level2" autocomplete="address-level2" id="city-7273" type="text">
<div class="fr-messages-group" id="city-7273-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="address-7275-messages" aria-live="polite">
</div>
</fieldset>
<fieldset class="fr-fieldset" id="address-7303" aria-labelledby="address-7303-legend address-7303-messages">
<legend class="fr-sr-only" id="address-7303-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-7304">
<label class="fr-label" for="number-7297">
Numéro
</label>
<input class="fr-input" aria-describedby="number-7297-messages" name="number" id="number-7297" type="text">
<div class="fr-messages-group" id="number-7297-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-7305">
<label class="fr-label" for="street-7298">
Voie
</label>
<input class="fr-input" aria-describedby="street-7298-messages" name="street" id="street-7298" type="text">
<div class="fr-messages-group" id="street-7298-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7306">
<label class="fr-label" for="building-7299">
Bâtiment
</label>
<input class="fr-input" aria-describedby="building-7299-messages" name="building" id="building-7299" type="text">
<div class="fr-messages-group" id="building-7299-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7307">
<label class="fr-label" for="block-7300">
Immeuble
</label>
<input class="fr-input" aria-describedby="block-7300-messages" name="block" id="block-7300" type="text">
<div class="fr-messages-group" id="block-7300-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7308">
<label class="fr-label" for="stare-7301">
Escalier
</label>
<input class="fr-input" aria-describedby="stare-7301-messages" name="stare" id="stare-7301" type="text">
<div class="fr-messages-group" id="stare-7301-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-fieldset__element">
<div class="fr-input-group" id="input-group-7309">
<label class="fr-label" for="apartment-7302">
Numéro d'appartement
</label>
<input class="fr-input" aria-describedby="apartment-7302-messages" name="apartment" id="apartment-7302" type="text">
<div class="fr-messages-group" id="apartment-7302-messages" aria-live="polite">
</div>
</div>
</div>
<div class="fr-messages-group" id="address-7303-messages" aria-live="polite">
</div>
</fieldset>