Vérification des champs obligatoires. Champs obligatoires et facultatifs lors du remplissage des formulaires Abandonner, tous les champs sont obligatoires.

14.08.2024Titre: Conseil

Il semblerait qu'il n'y ait rien de compliqué dans la conception des champs de saisie : dessinez des rectangles vides pour saisir les données, l'utilisateur fera le reste lui-même. Pourtant, tout n’est pas si simple. À en juger par la longueur de l'article, il est clair qu'il existe de nombreuses règles et fonctionnalités. L'utilisateur doit être soigneusement « guidé par la main », tout montrer, expliquer et aider. Alors et seulement alors, nous pourrons obtenir de lui les données souhaitées. Eh bien, commençons !

7+ règles de champ de saisie

La règle la plus élémentaire, comme partout ailleurs, est de se mettre à la place du visiteur. Est-ce que tout est clair ? Est-il possible de comprendre au premier coup d’œil ce qu’il faut saisir dans le champ ? Le champ répond-il adéquatement aux informations saisies ?

Rédiger des descriptions et des conseils

Des conseils et des descriptions sont nécessaires pour montrer quelles données doivent être saisies, comment les saisir correctement et comment le site utilisera ces informations à l'avenir.

Il existe plusieurs types d'indices :

1) Icônes

Les icônes sont un langage visuel universel. Ils vous aident à comprendre quoi saisir, même d’un simple coup d’œil. Et oui, les icônes sont un fétichisme du design =)

Mais il ne faut pas oublier qu’il faut toujours les expliquer.

2) Exemples

La façon la plus simple de savoir comment remplir un champ est de montrer un exemple. Exemple d'exemple : " [email protégé]»

3) Explications

Ce type de description sert à expliquer comment le site utilisera les données et à quoi elles sont nécessaires. Par exemple : « Nous avons besoin d’un courrier pour vous informer de l’état de votre commande. Nous n'enverrons pas de spam."

Utiliser des masques

Pour les champs nécessitant des données formatées d'une certaine manière (par exemple, un numéro de carte bancaire ou un numéro de téléphone), des masques doivent être utilisés. Ainsi, nous déplaçons le travail de formatage des informations des épaules du visiteur vers une machine sans âme.

Voici quelques exemples de différents masques :

Mettre en surbrillance les champs obligatoires

Si parmi les champs facultatifs, il y a des champs qui doivent être remplis, alors ils doivent être mis en évidence parmi d'autres et l'accent doit être mis sur leur remplissage obligatoire. En règle générale, les champs obligatoires sont indiqués par un astérisque - *.

Il est préférable de regrouper tous les champs obligatoires et de les placer au début du formulaire.

D’ailleurs, l’exemple ci-dessus montre également 2 types d’astuces : des exemples et des explications.

Focus et clavier

Le champ actif dans lequel est positionné le curseur doit avoir une particularité. En règle générale, les navigateurs mettent en évidence indépendamment les champs actifs. Cependant, vous ne devez pas tout laisser au hasard et vérifier vous-même le fonctionnement de cette fonction.

Lorsque la page se charge, le premier champ de saisie devrait automatiquement devenir actif. Comme pour vous inviter à remplir l’intégralité du formulaire. Lorsque vous remplissez un formulaire, il devrait être possible de basculer entre les champs de saisie sans utiliser la souris. Cela se produit généralement en appuyant sur le bouton Tab.

Lors de l'utilisation d'indices avec saisie semi-automatique (par exemple, dans une recherche), il devrait être possible de sélectionner un élément à l'aide des flèches et de le confirmer en appuyant sur la touche Entrée.

Lors de la saisie de données secrètes (par exemple un mot de passe), il doit être possible de masquer et d'afficher ces données à la demande de l'utilisateur.

Utiliser les données déjà saisies

Les champs de saisie doivent mémoriser des choses que les gens ordinaires oublient. Il est impoli de demander deux fois la même information. Si vous vous êtes abonné une fois à la liste de diffusion du site, lors de votre inscription, le site doit se souvenir de vous et saisir votre e-mail dans le champ approprié.

Champs de saisie de groupe

Pour faciliter le remplissage, il est préférable de regrouper les champs similaires. Par exemple, les champs de saisie d'informations personnelles (prénom, nom, email) constituent un bloc, les champs avec une adresse de livraison constituent un autre bloc.

Soyez conscient de la taille du champ

La taille du champ sert dans la plupart des cas à estimer la quantité de données requise de la part de l'utilisateur. Ceux. là où vous devez saisir une adresse longue, le champ est grand. Ainsi, lorsqu'un index à 6 chiffres est nécessaire, le champ est petit.

En conclusion

La conception des champs de saisie n’est pas aussi simple qu’il y paraît à première vue. Vous devez vous rappeler de nombreuses nuances et vous poser constamment la question : « tout sera-t-il clair pour l'utilisateur ?

Beaucoup de gars méticuleux diront qu’il n’y avait pas du tout 7 règles (et certains ne l’ont même pas remarqué, ha ha ha). Cependant, la plupart des règles sont petites, je les ai donc comptées pour la moitié. Et en général, j'aime juste le chiffre 7 =)

Formulaires HTML sont des contrôles utilisés pour collecter des informations auprès des visiteurs du site Web.

Les formulaires Web consistent en un ensemble de champs de texte, de boutons, de listes et d'autres contrôles activés par un clic de souris. Techniquement, les formulaires transmettent les données de l'utilisateur à un serveur distant.

Pour recevoir et traiter les données des formulaires, les langages de programmation Web tels que PHP, Perl.

Avant l'avènement du HTML5, les formulaires Web étaient un ensemble de plusieurs éléments , se terminant par un bouton . Il a fallu beaucoup d'efforts pour styliser les formulaires dans différents navigateurs. De plus, les formulaires nécessitaient JavaScript pour valider la saisie et manquaient de types de champs de saisie spécifiques pour spécifier des informations quotidiennes telles que des dates, des adresses e-mail et des URL.

Formulaires HTML5 résolu la plupart de ces problèmes courants grâce à la présence de nouveaux attributs, offrant la possibilité de modifier l'apparence des éléments de formulaire en CSS3.

Riz. 1. Formulaires Web améliorés avec HTML5

Création d'un formulaire HTML5

1. Élément

La base de toute forme est l'élément .... Il ne nécessite aucune entrée car il s’agit d’un conteneur regroupant tous les contrôles du formulaire ensemble : champs. Les attributs de cet élément contiennent des informations communes à tous les champs du formulaire. Les champs logiquement combinés doivent donc être inclus dans un seul formulaire.

Tableau 1. Attributs de balise

Attribut	Signification/Description
accepter-jeu de caractères	La valeur de l'attribut est un espace séparé liste des encodages de caractères, qui sera utilisé pour soumettre le formulaire, par exemple, .
action	Attribut obligatoire, qui spécifie l'URL du gestionnaire de formulaire sur le serveur auquel les données sont envoyées. Il s'agit d'un fichier (par exemple, action.php) qui décrit ce qui doit être fait avec les données du formulaire. Si la valeur de l'attribut n'est pas spécifiée, une fois la page rechargée, les éléments du formulaire prendront leurs valeurs par défaut. Si tout le travail sera effectué côté client par des scripts JavaScript, vous pouvez alors spécifier la valeur # pour l'attribut action. Vous pouvez également faire en sorte que le formulaire rempli par le visiteur vous soit envoyé par email. Pour ce faire, vous devez effectuer la saisie suivante :
saisie semi-automatique
enctype	Utilisé pour indiquer MIME-type de données envoyées avec le formulaire, par exemple, enctype="multipart/form-data" . Spécifié uniquement dans le cas de method="post" . application/x-www-form-urlencoded est le type de contenu par défaut, indiquant que les données transmises représentent une liste de variables de formulaire codées en URL. Les caractères espace (ASCII 32) seront codés comme + , et un caractère spécial tel que ! sera codé en hexadécimal comme %21 . multipart/form-data - utilisé pour soumettre des formulaires contenant des fichiers, des données non-ASCII et des données binaires, se compose de plusieurs parties, chacune représentant le contenu d'un élément de formulaire distinct. text/plain - indique que du texte brut (et non HTML) est transmis.
méthode	Spécifie comment les données du formulaire sont soumises. La méthode get transmet les données au serveur via la barre d'adresse du navigateur. Lors de la génération d'une requête au serveur, toutes les variables et leurs valeurs forment une séquence comme www.anysite.ru/form.php?var1=1&var2=2 . Les noms et valeurs des variables sont-ils ajoutés à l'adresse du serveur après le signe ? et sont séparés par &. Tous les caractères spéciaux et lettres non latines sont codés au format %nn, l'espace est remplacé par +. Cette méthode doit être utilisée si vous ne transférez pas de grandes quantités d’informations. Si vous êtes censé envoyer un fichier avec le formulaire, cette méthode ne fonctionnera pas. La méthode post est utilisée pour envoyer de grandes quantités de données, ainsi que des informations confidentielles et des mots de passe. Les données envoyées à l'aide de cette méthode ne sont pas visibles dans l'en-tête de l'URL car elles sont contenues dans le corps du message.
nom	Ensembles nom du formulaire, qui sera utilisé pour accéder aux éléments du formulaire via des scripts, tels que name="opros" .
novalider	Désactive la validation dans le bouton Soumettre du formulaire. L'attribut est utilisé sans spécifier de valeur
cible	Spécifie la fenêtre à laquelle les informations seront envoyées : _blank - nouvelle fenêtre _self - le même cadre _parent — cadre parent (s'il existe, sinon, alors à celui actuel) _top est la fenêtre de niveau supérieur par rapport à ce cadre. Si l'appel ne provient pas d'une trame enfant, alors vers la même trame.

2. Regroupement des éléments du formulaire

Élément

...

conçu pour regrouper des éléments liés les uns aux autres, divisant ainsi la forme en fragments logiques.

Chaque groupe d'éléments peut être nommé à l'aide de l'élément , qui vient immédiatement après la balise

. Le nom du groupe apparaît dans la bordure supérieure gauche

. Par exemple, si dans un élément

Les informations de contact sont stockées :

Riz. 2. Regrouper les éléments du formulaire à l'aide

Tableau 2. Attributs de balise

Attribut	Signification/Description
désactivé	Si l'attribut est présent, alors un groupe d'éléments de formulaire associés situés à l'intérieur du conteneur , désactivé pour le remplissage et l'édition. Utilisé pour restreindre l'accès à certains champs de formulaire contenant des données précédemment saisies. L'attribut est utilisé sans spécifier de valeur - .
formulaire	dans le même document. Indique une ou plusieurs formes auxquelles appartient ce groupe d'éléments. L’attribut n’est actuellement pris en charge par aucun navigateur.
nom	Définit Nom, qui sera utilisé pour référencer des éléments en JavaScript, ou pour référencer des données de formulaire une fois le formulaire rempli et soumis. C'est analogue à l'attribut id.

3. Créez des champs de formulaire

Élément crée la plupart des champs de formulaire. Les attributs d'un élément diffèrent selon le type de champ que l'élément est utilisé pour créer.

À l'aide des styles CSS, vous pouvez modifier la taille de la police, le type de police, la couleur et d'autres propriétés du texte, ainsi qu'ajouter des bordures, une couleur d'arrière-plan et une image d'arrière-plan. La largeur du champ est spécifiée par la propriété width.

Tableau 3. Attributs de balise

Attribut	Signification/Description
accepter	Détermine le type de fichier autorisé à être envoyé au serveur. Indiqué uniquement pour . Valeurs possibles : file_extension - permet de télécharger des fichiers avec l'extension spécifiée, par exemple accept=".gif" , accept=".pdf" , accept=".doc" audio/* - permet de télécharger des fichiers audio video/* - permet de télécharger des fichiers vidéo image/* - permet de charger des images media_type - indique le type de média des fichiers téléchargés.
alt	Définit texte alternatif pour les images, indiqué uniquement pour .
saisie semi-automatique	Responsable de mémoriser les valeurs saisies dans le champ de texte et de les remplacer automatiquement la prochaine fois que vous les saisirez : on - signifie que le champ n'est pas protégé et que sa valeur peut être stockée et récupérée, off - désactive le remplissage automatique des champs de formulaire.
mise au point automatique	Permet de s'assurer que dans le formulaire chargé l'un ou l'autre champ de saisie a déjà le focus (a été sélectionné), étant prêt à saisir une valeur.
à carreaux	L'attribut vérifie si la case par défaut est cochée lors du chargement de la page pour des champs tels que type="checkbox" et type="radio" .
désactivé
formulaire	La valeur de l'attribut doit être égale à l'attribut id de l'élément dans le même document. Identifie un ou plusieurs formulaires auxquels appartient ce champ de formulaire.
formation	Spécifie l'url du fichier qui traitera les données saisies dans les champs lors de la soumission du formulaire. Défini uniquement pour les champs type="submit" et type="image" . L'attribut remplace la valeur de l'attribut action du formulaire lui-même.
type de forme	Détermine la manière dont les données des champs de formulaire seront codées lorsqu'elles seront envoyées au serveur. Remplace la valeur de l'attribut enctype du formulaire. Défini uniquement pour les champs type="submit" et type="image" . Possibilités : application/-x-www-form-urlencoded est la valeur par défaut. Tous les caractères sont encodés avant l'envoi (les espaces sont remplacés par le caractère +, les caractères spéciaux sont convertis en valeurs ASCII HEX) multipart/form-data - les caractères ne sont pas codés text/plain - les espaces sont remplacés par le symbole + et les caractères spéciaux ne sont pas codés.
méthode de forme	L'attribut spécifie la méthode que le navigateur utilisera pour soumettre les données du formulaire au serveur. Défini uniquement pour les champs type="submit" et type="image" . Remplace la valeur de l'attribut de méthode du formulaire. Possibilités : get est la valeur par défaut. Les données du formulaire (paire nom/valeur) sont ajoutées à l'url et envoyées au serveur : URL?name=value&name=value Les données post-formulaire sont envoyées sous forme de requête http.
formulairenovalider	Spécifie que les données des champs du formulaire ne doivent pas être validées lorsque le formulaire est soumis. Remplace la valeur de l'attribut novalidate du formulaire. Peut être utilisé sans spécifier de valeur d'attribut.
formulairecible	Détermine où afficher la réponse reçue après la soumission du formulaire. Défini uniquement pour les champs type="submit" et type="image" . Remplace la valeur de l'attribut cible du formulaire. _parent – charge la réponse dans le cadre parent _top – charge la réponse en plein écran framename – charge la réponse dans un cadre avec le nom spécifié.
hauteur	La valeur de l'attribut contient le nombre de pixels sans spécifier d'unité de mesure. Définit la hauteur d'un champ de formulaire de type type="image" , par exemple : . Il est recommandé de définir simultanément la hauteur et la largeur du champ.
liste	Est une référence à un élément , contient son identifiant . Permet de proposer à l'utilisateur plusieurs options parmi lesquelles choisir lorsqu'il commence à saisir une valeur dans le champ correspondant.
maximum	Vous permet de limiter la saisie autorisée de données numériques à une valeur maximale ; la valeur de l'attribut peut contenir un nombre entier ou fractionnaire. Il est recommandé d'utiliser cet attribut conjointement avec l'attribut min. Fonctionne avec les types de champs suivants : nombre, plage, date, dateheure, dateheure-locale, mois, heure et semaine.
longueur maximale	L'attribut spécifie le nombre maximum de caractères saisis dans le champ. La valeur par défaut est de 524 288 caractères.
min	Vous permet de limiter la saisie numérique autorisée à une valeur minimale.
multiple	Permet à l'utilisateur de saisir plusieurs valeurs d'attribut, séparées par une virgule. S'applique aux fichiers et aux adresses e-mail. Spécifié sans valeur d'attribut.
nom	Spécifie le nom qui sera utilisé pour accéder à l'élément , par exemple, dans les feuilles de style CSS. C'est analogue à l'attribut id.
modèle	Vous permet de déterminer en utilisant expression régulière la syntaxe des données qui doivent pouvoir être saisies dans un champ particulier. Par exemple, pattern="(3)-(3)" - les crochets définissent la plage de caractères autorisés, dans ce cas - toutes les lettres minuscules, le nombre entre accolades indique que trois lettres minuscules sont nécessaires, suivies d'un tiret, puis trois chiffres compris entre 0 et 9.
espace réservé	Contient le texte qui est affiché dans le champ de saisie avant d'être rempli (il s'agit le plus souvent d'une info-bulle).
lecture seule	Ne permet pas à l'utilisateur de modifier les valeurs des éléments du formulaire ; la sélection et la copie de texte sont toujours disponibles. Spécifié sans valeur d'attribut.
requis	Affiche un message indiquant que ce champ est obligatoire. Si l'utilisateur tente de soumettre le formulaire sans saisir la valeur requise dans ce champ, un message d'avertissement s'affichera à l'écran. Spécifié sans valeur d'attribut.
taille	Définit la largeur visible du champ en caractères. La valeur par défaut est 20. Fonctionne avec les types de champs suivants : texte, recherche, tel, url, email et mot de passe.
src	Spécifie l'URL de l'image utilisée comme bouton d'envoi du formulaire. Indiqué uniquement pour le terrain .
étape	Utilisé pour les éléments qui nécessitent la saisie de valeurs numériques, indique le montant par lequel les valeurs sont augmentées ou diminuées pendant le processus de réglage de la plage (étape).
taper	bouton - crée un bouton.
	case à cocher - transforme un champ de saisie en une case à cocher qui peut être cochée ou décochée, par ex. j'ai une voiture
	couleur - Génère des palettes de couleurs dans les navigateurs pris en charge, permettant aux utilisateurs de sélectionner des valeurs de couleur au format hexadécimal.
	date — vous permet de saisir une date au format jj.mm.aaaa. Anniversaire:
	datetime-local - vous permet de saisir une date et une heure séparées par une lettre anglaise majuscule T en utilisant le modèle jj.mm.aaaa hh:mm. Anniversaire - jour et heure :
	email - Les navigateurs qui prennent en charge cet attribut s'attendront à ce que l'utilisateur saisisse des données qui correspondent à la syntaxe des adresses e-mail. E-mail:
	fichier - vous permet de télécharger des fichiers depuis l'ordinateur de l'utilisateur. Sélectionnez le fichier :
	masqué - Masque le contrôle qui n'est pas affiché par le navigateur et empêche l'utilisateur de modifier les valeurs par défaut.
	image - crée un bouton, vous permettant d'insérer une image au lieu du texte sur le bouton.
	mois - Permet à l'utilisateur de saisir le numéro de l'année et du mois en utilisant le modèle aaaa-mm.
	nombre - destiné à saisir des valeurs entières. Ses attributs min , max et step spécifient respectivement les limites supérieure et inférieure et le pas entre les valeurs. Ces attributs sont supposés pour tous les éléments qui ont des indicateurs numériques. Leurs valeurs par défaut dépendent du type d'élément. Merci d'indiquer la quantité (de 1 à 5) :
	mot de passe - crée des champs de texte dans le formulaire, tandis que les caractères saisis par l'utilisateur sont remplacés par des astérisques, des puces ou d'autres icônes installées par le navigateur. Entrez le mot de passe :
	radio - crée un interrupteur - une commande en forme de petit cercle qui peut être allumé ou éteint. Végétarien:
	range - vous permettra de créer un élément d'interface tel qu'un curseur, min / max - vous permettra de définir la plage de sélection
	réinitialiser - crée un bouton qui efface les champs de formulaire des données saisies par l'utilisateur.
	recherche - désigne un champ de recherche, par défaut le champ de saisie est de forme rectangulaire. Recherche:
	soumettre - crée un bouton standard qui est activé par un clic de souris. Le bouton collecte les informations du formulaire et les soumet pour traitement.
	texte - Crée des champs de texte sur un formulaire, produisant un champ de texte sur une seule ligne pour la saisie de texte.
	heure - vous permet de saisir l'heure au format 24 heures en utilisant le modèle hh:mm. Dans les navigateurs pris en charge, il apparaît comme un contrôle de champ de saisie numérique avec une valeur modifiable avec la souris et permet uniquement la saisie de valeurs temporelles. Précisez l'heure :
	url : le champ est destiné à spécifier des URL. Page d'accueil :
	semaine - L'outil pointeur correspondant permet à l'utilisateur de sélectionner une semaine de l'année, après quoi il fournira la saisie des données au format nn-aaaa. Selon les années, le nombre de semaines peut être de 52 ou 53. Précisez la semaine :
valeur	Détermine le texte qui apparaît sur un bouton, dans un champ ou dans le texte associé. Non précisé pour les champs de type fichier.
largeur	La valeur de l'attribut contient le nombre de pixels. Permet de définir la largeur des champs du formulaire.

4. Champs de saisie de texte

Élément ... utilisé à la place de l'élément lorsque vous devez créer de grands champs de texte. Le texte affiché comme valeur d'origine est placé à l'intérieur de la balise. Les dimensions du champ sont définies à l'aide des attributs cols - dimensions horizontales, lignes - dimensions verticales. La hauteur du champ peut être définie à l'aide de la propriété height. Toutes les tailles sont calculées en fonction de la taille d'un caractère dans une police à espacement fixe.

Tableau 4. Attributs de balise

<tr><th>Attribut</th>
<th>Signification/Description</th>
</tr><tr><td>mise au point automatique</td>
<td>Définit automatiquement le focus sur le champ de texte initial souhaité.</td>
</tr><tr><td>cols</td>
<td>Définit la largeur en termes de nombre de caractères.  Si l'utilisateur saisit plus de texte, une barre de défilement apparaît.</td>
</tr><tr><td>désactivé</td>
<td>Désactive la possibilité de modifier et de copier le contenu des champs.</td>
</tr><tr><td>formulaire</td>
<td>La valeur de l'attribut doit être égale à la valeur de l'attribut id de l'élément <form>dans le même document.  Identifie un ou plusieurs formulaires auxquels appartient ce champ de texte.</td>
</tr><tr><td>longueur maximale</td>
<td>La valeur de l'attribut spécifie le nombre maximum de caractères à saisir dans le champ.</td>
</tr><tr><td>nom</td>
<td>Spécifie le nom du champ de texte.</td>
</tr><tr><td>espace réservé</td>
<td>Définit une courte invite de texte qui décrit la valeur d'entrée attendue.</td>
</tr><tr><td>lecture seule</td>
<td>Désactive la possibilité de modifier le contenu du champ.</td>
</tr><tr><td>requis</td>
<td>Affiche un message indiquant que ce champ est obligatoire.</td>
</tr><tr><td>lignes</td>
<td>Spécifie un nombre qui indique le nombre de lignes à afficher dans la zone de texte.</td>
</tr><tr><td>envelopper</td>
<td>Détermine si le texte doit conserver les sauts de ligne lorsque le formulaire est soumis.  La valeur dure préserve le report, mais pas la valeur douce.  Si hard est utilisé, la valeur de l'attribut cols doit être spécifiée.</td>
</tr></table><h3>5. Liste déroulante</h3>
<p>Les listes permettent d'organiser un grand nombre d'éléments de manière compacte.  Les listes déroulantes sont créées à l'aide de l'élément <select>...</select>.  Ils permettent de sélectionner une ou plusieurs valeurs dans l'ensemble proposé.  Par défaut, une list box affiche son premier élément.</p>
<p>Les éléments sont utilisés pour ajouter des éléments à la liste <option>...</option>, qui sont situés à l'intérieur <select> .</p>
<p>Pour systématiser les listes, utilisez l'élément <optgroup>...</optgroup>, qui crée des en-têtes dans les listes.</p>
<p>Pour les listes, vous pouvez modifier la taille de la police, le type de police, la couleur et d'autres propriétés du texte, ainsi qu'ajouter des bordures, une couleur d'arrière-plan et une image d'arrière-plan.</p>
<table class="t3">Tableau 5. Attributs de balise <select>
<tr><th>Attribut</th>
<th>Signification/Description</th>
</tr><tr><td>mise au point automatique</td>
<td>Définit le focus automatique sur un élément lors du chargement de la page.</td>
</tr><tr><td>désactivé</td>
<td>Désactive la liste déroulante.</td>
</tr><tr><td>formulaire</td>
<td>Détermine le formulaire auquel appartient cette liste.  La valeur de l'attribut est l'identifiant du formulaire.</td>
</tr><tr><td>multiple</td>
<td>Permet de sélectionner un ou plusieurs éléments ; pour ce faire, lors de la sélection, vous devez appuyer et maintenir la touche Ctrl enfoncée.</td>
</tr><tr><td>nom</td>
<td>Définit un nom pour la liste déroulante.  La valeur de l'attribut contient un nom qui reflète le sujet de la liste.</td>
</tr><tr><td>requis</td>
<td>Affiche un message indiquant que l'utilisateur doit sélectionner une valeur dans la liste déroulante avant de soumettre le formulaire.</td>
</tr><tr><td>taille</td>
<td>Définit le nombre d'éléments de liste visibles à l'écran en même temps.  Si le nombre d'éléments de la liste dépasse le nombre défini, une barre de défilement apparaît.  La valeur de l'attribut est spécifiée sous forme d'entier positif.</td>
</tr></table><h3>6. Étiquettes pour les champs de formulaire</h3>
<p>Les étiquettes des éléments de formulaire sont créées à l'aide de l'élément <label>...</label>.  Il existe deux manières de regrouper les étiquettes et les champs.  Si le champ est à l'intérieur d'un élément <label>, alors l'attribut for n'a pas besoin d'être spécifié.</p><p>
 
<label for="comments">À quand remonte la dernière fois que vous avez pris un avion ?</label>
<textarea id="comments">

Chat

7. Boutons

Élément crée des boutons cliquables. Contrairement aux boutons créés ( , , , ), à l'intérieur de l'élément .

Les boutons permettent aux utilisateurs de soumettre des données à un formulaire, d'effacer le contenu du formulaire ou d'effectuer toute autre action. Vous pouvez créer des bordures, modifier l'arrière-plan et aligner le texte sur un bouton.

Tableau 9. Attributs de balise

Attribut	Signification/Description
mise au point automatique	Définit le focus sur le bouton lors du chargement de la page.
désactivé	Désactive le bouton, le rendant impossible à cliquer.
formulaire	Indique un ou plusieurs formulaires auxquels appartient ce bouton. La valeur de l'attribut est l'identifiant du formulaire correspondant.
formation	La valeur de l'attribut contient l'URL du gestionnaire de données du formulaire envoyée lorsque vous cliquez sur le bouton. Uniquement pour le type de bouton type="submit" . Remplace la valeur de l'attribut d'action spécifié pour l'élément .
type de forme	Définit le type d'encodage des données du formulaire avant de les envoyer au serveur lorsque des boutons tels que type="submit" sont cliqués. Remplace la valeur de l'attribut enctype spécifié pour l'élément . Valeurs possibles : application/x-www-form-urlencoded est la valeur par défaut. Tous les caractères seront encodés avant l'envoi. multipart/form-data - les caractères ne sont pas codés. Utilisé lorsque les fichiers sont téléchargés à l'aide d'un formulaire. text/plain - les caractères ne sont pas codés et les espaces sont remplacés par le symbole +.
méthode de forme	L'attribut spécifie la méthode que le navigateur utilisera pour soumettre le formulaire. Remplace la valeur de l'attribut de méthode spécifié pour l'élément . Spécifié uniquement pour les boutons de type type="submit". Valeurs possibles : get - les données du formulaire (paire nom/valeur) sont ajoutées à l'URL et envoyées au serveur. Cette méthode a des limites sur la taille des données envoyées et n'est pas adaptée à l'envoi de mots de passe et d'informations confidentielles. post - les données du formulaire sont ajoutées sous forme de requête http. La méthode est plus fiable et sécurisée que get et n’a aucune restriction de taille.
formulairenovalider	L'attribut spécifie que les données du formulaire ne doivent pas être validées lors de la soumission. Spécifié uniquement pour les boutons de type type="submit".
formulairecible	L'attribut spécifie dans quelle fenêtre afficher le résultat après la soumission du formulaire. Spécifié uniquement pour les boutons de type type="submit". Remplace la valeur de l'attribut cible spécifié pour l'élément . _blank - charge la réponse dans une nouvelle fenêtre/un nouvel onglet _self - charge la réponse dans la même fenêtre (par défaut) _parent - charge la réponse dans le cadre parent _top - charge la réponse en plein écran framename - charge la réponse dans un cadre avec le nom spécifié.
nom	Définit le nom du bouton, la valeur de l'attribut est du texte. Utilisé pour créer un lien vers les données du formulaire une fois le formulaire soumis, ou pour créer un lien vers un ou plusieurs boutons donnés en JavaScript.
taper	Définit le type de bouton. Valeurs possibles : bouton - bouton cliquable réinitialiser - bouton de réinitialisation, renvoie la valeur d'origine soumettre - bouton pour soumettre les données du formulaire.
valeur	Définit la valeur par défaut envoyée lorsque le bouton est cliqué.

8. Cases à cocher et boutons radio dans les formulaires

Les cases à cocher dans les formulaires sont définies à l'aide de la construction , et le commutateur - en utilisant .

Les cases à cocher, contrairement aux boutons radio, peuvent être définies sur plusieurs dans un seul formulaire. Si l'attribut coché est spécifié pour les cases à cocher, alors lors du chargement de la page, les cases à cocher des champs de formulaire correspondants seront déjà cochées.

Élément utilisé lors de la mise en œuvre de la sélection à l’aide de boutons radio et de cases à cocher. Vous pouvez sélectionner l'élément souhaité en cliquant simplement sur le texte qui lui est associé. Pour ce faire, vous devez placer à l'intérieur de l'élément .

L'utilisation de ce script vous permettra d'analyser la complétion des champs obligatoires du formulaire. Contrairement à de nombreux autres analyseurs de formulaires, dans cette version, la validation est effectuée côté client et non côté serveur. Et seulement si les champs obligatoires sont remplis, les informations saisies sont transmises au serveur. Si les champs obligatoires ne sont pas remplis, un message est émis listant les champs vides et le formulaire n'est pas envoyé au serveur.

J'ai utilisé ce script lors de la création du site www.prtut.ru.

Démonstration de script

Dans l'exemple, tous les champs sont obligatoires.

Description

Pour définir les champs obligatoires dans le formulaire, utilisez l'attribut arbitraire obligatoire, qui est spécifié uniquement pour les champs nécessitant une saisie obligatoire. Par exemple:

La fonction checkRequired() vérifie chaque élément du formulaire pour l'attribut requis. Si l'attribut est trouvé, il est vérifié si la saisie a été effectuée.

Javascript

function isEmpty(str) ( // Recherche une chaîne vide. for (var intLoop = 0; intLoop

Étant donné que la vérification est effectuée côté client et que le script s'exécute directement dans le navigateur de l'utilisateur, les avertissements sont différents dans Google Chrome, Mozilla Firefox, Opera et le navigateur Yandex.

Un maximum d'informations en un minimum de mots.

La façon dont les champs sont étiquetés influence grandement la façon dont les utilisateurs perçoivent le formulaire et comment ils le remplissent.

D'un point de vue psychologique, tout est assez simple : il est préférable de souligner les aspects positifs, car au moment de prendre une décision, l'utilisateur croit qu'il a le choix.

En revanche, si vous spécifiez des champs obligatoires, l’utilisateur se sentira piégé, limité et mal à l’aise.

Marquez les champs facultatifs, et non l’inverse

La plupart des concepteurs utilisent des astérisques pour indiquer les champs obligatoires. Mais tu dois arrêter de faire ça. Les recherches sur cette question indiquent clairement que l'utilisation d'astérisques pour les champs obligatoires est une erreur courante.

Il est préférable de marquer les champs facultatifs plutôt que les champs obligatoires car :

L'astérisque est évident pour vous et pas pour tout le monde, croyez-moi, il y a toujours ceux qui ne comprennent pas
Il y a toujours plus de champs obligatoires que de champs facultatifs
Moins votre formulaire comporte de bruit visuel, plus il est lisible, et donc plus rapide à remplir.

Pas requis contre Facultatif

Si vous écrivez un texte en anglais, rappelez-vous que dans tous les cas, les points négatifs sont moins clairs. Par conséquent, utilisez le mot « Facultatif » au lieu de « Non requis » pour décrire les champs facultatifs.

Ne demandez pas aux utilisateurs de fournir des informations inutiles. Si vous avez trop de champs supplémentaires (non obligatoires), c'est mauvais et vous le savez. Ni vous ni moi n’aimons les formes des rouleaux de papier toilette.

Presque tous les sites modernes et nouveaux disposent de formulaires dont l'achèvement sera vérifié sans recharger la page. Les champs de formulaire dits obligatoires. Mais quelles méthodes sont utilisées pour créer de tels formulaires ?

Jusqu'à récemment, le moyen le plus populaire consistait à utiliser JavaScript. Une bibliothèque très pratique est la validation jquery. Cette méthode est moderne, mais son intégration dans un formulaire sur un site internet demande quelques compétences et du temps.

Avec l'avènement HTML5 et son intégration généralisée dans les sites Web modernes, vous pouvez refuser d'utiliser javascript. De plus, pour rendre obligatoire un champ du formulaire, il suffit d'ajouter attribut obligatoire.

Avec l'attribut obligatoire, le navigateur vérifiera si un champ particulier est rempli ou non avant de soumettre le formulaire. Dans le cas contraire, l'utilisateur sera invité à remplir un champ voire tous les champs du formulaire.

Et il ne faudra pas plus d'une minute pour créer de tels champs.

Alors, disons qu'il existe un petit formulaire :

Inscription

Nom

Mot de passe

Sol

Voici à quoi cela ressemble dans le navigateur :

Nous rendons maintenant obligatoires certains champs du formulaire :

Inscription

C'est ça. Nous avons rendu tous les champs obligatoires en moins d'une minute. Si nous ne remplissons pas les champs obligatoires, nous verrons les messages suivants :

Et surtout. Cette vérification fonctionne dans tous les navigateurs modernes et uniquement pour la spécification HTML 5. Pour les non-initiés, vous devez insérer une balise au début du code HTML..