Les formulaires

Exploitez toute la puissance des formulaires.

Dans les formulaires MDN Référence, tous les types de champs MDN Référence ont une largeur de 100%. Pour vous aider à mettre en page vos formulaires, vous pouvez utiliser les grilles et les utilitaires flex. Sass Swing fournit en sus une classe utilitaire .input-group-inline pour aligner une étiquette à un champ et son texte d'aide. Si vous placez un footer dans votre form Alors son contenu sera aligné à droite. Grâce à la classe .form-inline vous pourrez créer des formulaires inline.

Assurez-vous d'utiliser un attribut de type approprié sur tous les champs (par exemple, e-mail pour l'adresse e-mail ou number pour les informations numériques) pour bénéficier de la vérification de l'e-mail, d'un nombre, etc...

Specials characters are not allowed
We'll never share your email with anyone else. 
<form>
	<div class="grid md:cols-auto gap-1">
		<label for="firstname">
			Firstname :
			<input type="text" id="firstname">
		</label>
		<label for="lastname">
			Lastname :
			<input type="text" id="lastname">
		</label>
	</div>

	<div class="input-group-inline">
		<label for="pseudo">Pseudo :</label>
		<input type="text" id="pseudo" name="pseudo" placeholder="Pseudo" aria-describedby="pseudoHelp" autocomplete="off" required>
		<small id="pseudoHelp">Spécials characters are not allowed</small>
	</div>

	<label for="email1">Email address :</label>
	<input type="email" id="email1" name="email1" placeholder="Email address" aria-describedby="emailHelp" required>
	<small id="emailHelp">We'll never share your email with anyone else.</small>

	<footer>
		<button type="submit" value="Envoyer">Envoyer</button>
		<button type="reset" value="RAZ">RAZ</button>
	</footer>
</form>

<form class="form-inline">
	<label for="email">Email address :</label>
	<input type="email" id="email" name="email" placeholder="Email address" required>
	<label for="password">Password :</label>
	<input type="password" id="password" name="password" placeholder="Mot de passe" autocomplete="off" required>
	<input type="checkbox" id="remember" name="remember">
	<label for="remember">remember me</label>
	<footer>
		<button type="submit" value="">Envoyer</button>
	</footer>
</form>

Etats et validations

Les états

Le HTML nous fournit des attributs spécifiques pour désigner un champ désactivé, invalide, en lecture seule etc... 

<div class="grid t:cols-auto gap-2">
	<input type="text" placeholder="Valid" aria-invalid="false">
	<input type="text" placeholder="Invalid" aria-invalid="true">
	<input type="text" placeholder="Disabled" disabled>
	<input type="text" value="Readonly" readonly>
</div>

Les validations

Pour contrôler la validation des champs, nativement le HTML met à notre disposition plusieurs attributs comme required pour rendre le champ obligatoire, autocomplete="on/off" pour activer/désactiver l'autocomplétion du navigateur, pattern pour vérifier le contenu du champ avec une formule regEx. Les attributs minlength, maxlength, size pour contrôler le nombre de caractères.

Les champs de base

La langage HTML nous fournit nativement des types de champs pour des données spécifiques tels que les mots de passe, les emails, numéro de téléphone, url etc... 

<form>
	<label for="texte">
		Texte :
		<input type="text" id="texte" placeholder="un texte">
	</label>
	<div class="grid md:cols-auto gap-1">
		<label for="email2">
			Email :
			<input type="email" id="email2" placeholder="myemail@server.com">
		</label>
		<label for="pwd">
			Mot de passe :
			<input type="password" id="pwd" placeholder="mot de passe">
		</label>
	</div>
	<div class="grid md:cols-auto gap-1">
		<label for="url">
			URL :
			<input type="url" id="url" placeholder="https//www.monsite.com">
		</label>
		<label for="phone">
			Téléphone :
			<input type="tel" id="phone" placeholder="01 02 03 04 05">
		</label>
	</div>
</form>

Select, radio, checkbox et switch

Faites votre choix, des champs au style de votre thème ou entièrement personnalisables. Vous pouvez également grouper vos contrôles avec Utilisez le tag <fieldset>.

Size
Niveau 
<form>
	<label for="combobox">
		Role
		<select id="combobox" required>
			<option value="" selected>Select a role…</option>
			<option>Administrator</option>
			<option>Moderator</option>
			<option>Premium member</option>
			<option>Member</option>
		</select>
	</label>

	<label for="multiselect">
		Langage
		<select id="multiselect" multiple>
			<option value="1">Javascript</option>
			<option value="2">Python</option>
			<option value="3">PHP</option>
			<option value="4">C/C++/C#</option>
			<option value="5">Ruby on rail</option>
			<option value="6">Pascal</option>
		</select>
	</label>

	<fieldset>
		<legend>Size</legend>
		<input type="radio" id="small" name="size" value="small" checked>
		<label for="small">Small</label>
		<input type="radio" id="medium" name="size" value="medium">
		<label for="medium">Medium</label>
		<input type="radio" id="large" name="size" value="large">
		<label for="large">Large</label>
	</fieldset>

	<fieldset class="flex-container gap-1">
		<legend>Niveau</legend>
		<input type="radio" id="rookie" name="level" value="rookie">
		<label for="rookie">Débutant</label>
		<input type="radio" id="middle" name="level" value="middle"  checked>
		<label for="middle">Intermédiaire</label>
		<input type="radio" id="expert" name="level" value="expert">
		<label for="expert">Expert</label>
	</fieldset>

	<fieldset>
		<input type="checkbox" id="terms" name="terms">
		<label for="terms">J'accepte les termes et conditions</label>
	</fieldset>

	<fieldset>
		<label for="switch">
			<input type="checkbox" id="switch" name="switch" role="switch">
			Publier mon profil
		</label>
	</fieldset>

	<fieldset>
		<label for="switch1">
			Suivre les commentaires
			<input type="checkbox" id="switch1" name="switch1" role="switch" data-on-label="OUI" data-off-label="NON">
		</label>
	</fieldset>
</form>

Les autres types de champs

Il existe de nombreux autres types tels que des champs pour la recherche, choisir une date, une heure, une couleur, un nombre entre un interval défini, choisir un fichier sur son disque etc... 

<form>
<div class="grid md:cols-auto gap-1">
	<label for="number">Nombre
		<input type="number" id="number" name="number" value="100">
	</label>
	<label for="range">Range slider
		<input type="range" min="0" max="100" value="50" id="range" name="range">
	</label>
</div>

<div class="grid md:cols-auto gap-1">
	<label for="color">Color
		<input type="color" id="color" name="color" value="#0eaaaa">
	</label>
	<label for="search">Search
		<input type="search" id="search" name="search">
	</label>
</div>

<div class="grid md:cols-auto gap-1">
	<label for="date">Date
		<input type="date" id="date" name="date">
	</label>
	<label for="time">Time
		<input type="time" id="time" name="time">
	</label>
</div>

<label for="file">Choisir un fichier
	<input type="file" id="file" name="file">
</label>

<label for="customfile" class="btn btn--secondary">Choisir un fichier
	<input type="file" id="customfile" name="customfile" hidden>
</label>
</form>

Optimisez l'accessibilité et augmentez l'expérience utilisateur

Assurez-vous que tous les champs de votre formulaire soient nommés de façon claire, concise et appropriée afin d'en faciliter la transmission vers les utilisateurs de technologies d'assistance. Le moyen le plus simple d'y parvenir est d'utiliser un élément <label> et d'inclure un texte suffisamment descriptif.

Dans le cas où vous désirez utiliser un <span> qui agira comme une étiquette à la place d'un <label>, il vous faudra ajouter à votre champ l'attribut aria-labelledby.

Un texte d'information par exemple, associé à un champ, doit être explicitement lié au contrôle du formulaire auquel il se rapporte à l'aide de l'attribut aria-dedicatedby. Cela garantira que les technologies d'assistance, telles que les lecteurs d'écran, annoncent ce texte.

Dans le cas où vous ne fournissez pas de <label> ni d'étiquette alors, ajoutez un attribut title ou donnez une définition explicite sur votre élément à l'aide d'aria-label à votre champ. Pensez aussi à utiliser l'attribut placeholder sur vos champs en sus.

Pour améliorer encore plus l'expérience utilisateur, le HTML nous fournit également des attributs spécifiques comme autofocus, autocomplete, tabindex, value

Utilisateur Identifiant de connexion 
<form>
	<span id="userLabel" style="white-space: nowrap; display:inline-block">
		Utilisateur
		<input type="text" id="user" name="user" aria-labelledby="userLabel" tabindex="3">
	</span>

	<input type="text" id="user1" name="user1" title="Nom utilisateur" placeholder="Nom utilisateur" autocomplete="on" tabindex="1">

	<input type="text" id="user2" name="user2" aria-label="Nom utilisateur" placeholder="Nom utilisateur" tabindex="4" value="John">

	<label for="user3">Utilisateur :</label>
	<input type="text" id="user3" name="user3" placeholder="Nom utilisateur" aria-describedby="userHelp" tabindex="2">
	<small id="userHelp">Identifiant de connexion</small>
</form>

Retrouvez toutes les caractéristiques et types des champs de formulaire HTML sur le site de référence :

mdn web docs

Personnalisation

Vous pouvez personnaliser, les couleurs, bordures et états via des variables CSS ou SCSS.
Pour plus d'informations reportez-vous à la section Personnalisation

ATTENTION : Il est primordiale d'ajouter le mot-clef !important pour forcer l'application des variables. En effet, pour les input, Sass Swing les cible avec précision grâce à l'attribut type. De ce fait les règles de base l'emportent dans ce cas précis. 

<form>
	<label for="user4">Custom Input :</label>
	<input type="text" id="user4" name="user4" placeholder="Custom input" class="custom--input">
</form>
.custom--input {
  --spacing-v: 1em !important;
  --spacing-h: 1.2em !important;
  --background-color: #97af96 !important;
  --color: #2a2f25 !important;
  --border-width: 2px !important;
  --border-color: #669353 !important;
  --border-radius: 1em !important;
  /*--border: var(--border-width) solid var(--border-color) !important; */
  --box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px !important;

  --hover-background-color: #a2d574 !important;
  --hover-color: #27311d !important;
  --hover-border-color: #385b2c !important;
  --hover-box-shadow:  rgba(13, 44, 6, 0.4) 0px 0px 0px 2px, rgba(6, 44, 8, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset !important;

  --focus-background-color: #5c7c5c !important;
  --focus-color: #a0d273 !important;
  --focus-border-color: #52932d !important;
  --focus-box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px !important;
  --focus-outline-width: 3px !important;

  --placeholder-color: #373f36 !important;

  font-size:1.5em;
}