Explorer le système

Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Adresse

Un formulaire qui se remplit automatiquement pour recueillir des informations sur l’adresse.

Conseils

Le fait de demander une adresse de manière cohérente offre une meilleure expérience à vos utilisateurs. Cela peut les aider à éviter les erreurs et les données que vous recueillerez seront plus précises.

Ce modèle de formulaire utilise plusieurs points de saisie pour recueillir des informations sur l’adresse canadienne. La fonction de remplissage automatique de l’élément <form> doit être activée autocomplete="on" pour permettre aux utilisateurs de réutiliser une adresse déjà saisie.

Nous recommandons l’utilisation d’AddressComplete de Postes Canadaafin de vérifier les adresses en temps réel. Cela simplifie la tâche des utilisateurs et garantit l’exactitude des données d’adresse que vous recevez.

Si vous utilisez AdresseComplète avec ce formulaire, la fonction de remplissage automatique doit être désactivée autocomplete="off" pour que la saisie automatique du navigateur ne chevauche pas la recherche d’adresse de Postes Canada.

Formulaire d'adresse

HTML

	<!-- Formulaire d'adresse canadienne -->
		<form autocomplete="on">
		<label for="address">Adresse</label>
		<input id="address" name="address" type="text" autocomplete="address-line1"
			placeholder="Adresse ou boîte postale" required>
	
		<label for="address-line2"><span class="sr-only">Ligne d’adresse 2</span></label>
		<input id="address-line2" name="address-line2" type="text"
			placeholder="Facultatif : Appartement, suite, bâtiment, etc.">
	
		<label for="community">Ville ou communauté</label>
		<input id="community" name="address-level2" autocomplete="address-level2" class="gnb-field-md"
			type="text">
	
		<!-- Choisissez votre province -->
		<label for="province-fr">Choisissez votre province :</label>
		<select name="address-level1" id="province-fr" class="gnb-provinces-select">
			<option value="AB">Alberta</option>
			<option value="BC">Colombie-Britannique</option>
			<option value="PE">Île-du-Prince-Édouard</option>
			<option value="MB">Manitoba</option>
			<option value="NB" selected>Nouveau-Brunswick</option>
			<option value="NS">Nouvelle-Écosse</option>
			<option value="NU">Nunavut</option>
			<option value="ON">Ontario</option>
			<option value="QC">Québec</option>
			<option value="SK">Saskatchewan</option>
			<option value="NL">Terre-Neuve-et-Labrador</option>
			<option value="NT">Territoires du Nord-Ouest</option>
			<option value="YT">Yukon</option>
		</select>
	
		<!-- Champ code postal de base avec validation -->
		<div class="gnb-form-input">
			<label for="postal-code">Code postal<span class="required">*</span><span
					class="sr-only">obligatoire</span></label>
			<input id="postal-code" class="gnb-postal-code-field" name="postal-code" autocomplete="postal-code"
				type="text" maxlength="7" required placeholder="A1A 1A1" oninput="formatPostalCode(this)">
			<div class="gnb-form-validation" id="postal-code-error" style="display: none;">
			</div>
		</div>
	</form>
	
	<!-- N'oubliez pas d'ajouter gnb-forms-validation-1.0.0.js au bas de votre page avant la balise de fermeture </body> -->