Un guide des formulaires HTML & CSS (pas de hacks!)

Historiquement, les formulaires HTML ont été assez délicats - tout d'abord, car au moins un peu de javascript était nécessaire, et deuxièmement, car aucune quantité de CSS ne pouvait les faire se comporter.

Cependant, ce n'est pas nécessairement vrai dans le cas du Web moderne, alors apprenons à marquer les formulaires en utilisant uniquement HTML et CSS.

Les plats clés

Les formulaires HTML
• peuvent être créés en utilisant uniquement HTML et CSS, sans avoir besoin de JavaScript. La structure de formulaire est créée à l'aide de l'élément
  et les données sont soumises à l'aide de l'attribut Action. Des attributs supplémentaires, tels que ENCTYPE et Target, peuvent être utilisés pour définir le type de codage des données et où la sortie est affichée.
• Les étiquettes sont essentielles pour la convivialité et l'accessibilité, décrivant à quoi sert une entrée. Il existe trois façons de déclarer une étiquette: les étiquettes adjacentes, les étiquettes Aria et les étiquettes d'emballage. La méthode la plus efficace consiste à emballer les entrées dans les étiquettes. Les espaces réservés sont également utiles pour fournir des exemples de ce qui est attendu dans le champ de saisie.
• Il existe différents types d'entrée parmi lesquels choisir, tels que le bouton, la case à cocher, la couleur, la date, l'e-mail, le fichier, etc. Les entrées de style peuvent être difficiles en raison des défauts de paramètres du navigateur, mais l'attribut d'apparence peut être utilisé pour les remplacer. La validation d'entrée est cruciale pour garantir que la saisie de l'utilisateur répond à certains critères et peut être réalisée en utilisant la validation native-HTML ou JavaScript.

former la structure de base

Commencez par l'élément

.

Rien d'extraordinaire ici. Couvrant simplement la structure de base.

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Si vous soumettez naturellement les données du formulaire (c'est-à-dire sans JavaScript), vous devrez inclure l'attribut d'action, où la valeur est l'URL à laquelle vous enverrez les données du formulaire. La méthode doit être GET ou POST en fonction de ce que vous essayez de réaliser (n'envoyez pas de données sensibles avec GET).

De plus, il existe également l'attribut ENCTYPE moins utilisé qui définit le type de codage des données envoyées. De plus, l'attribut cible, bien que pas nécessairement un attribut unique aux formulaires, peut être utilisé pour afficher la sortie dans un nouvel onglet.

Les formulaires basés sur JavaScript n'ont pas nécessairement besoin de ces attributs.

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Les formulaires sont constitués d'entrées, qui attendent des valeurs de données.

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Voir le stylo
Formulaire 1 par SitePoint (@SitePoint)
sur codepen.

y compris les étiquettes pour une meilleure convivialité et accessibilité

Chaque entrée a besoin d'une étiquette.

Une étiquette est un descripteur de texte qui décrit à quoi sert une entrée. Il y a trois façons de déclarer un label, mais l'un d'eux est supérieur aux deux autres. Plongeons-nous maintenant.

Étiquettes adjacentes

Les étiquettes adjacentes nécessitent le plus de code car nous devons déclarer explicitement quelle entrée décrit l'étiquette. Pour la plupart, cela est contre-intuitif car nous pouvons à la place envelopper les entrées à l'intérieur des étiquettes pour obtenir le même effet avec moins de code.

Cela étant dit, la méthode adjacente peut être nécessaire dans les circonstances atténuantes, alors voici à quoi cela ressemblerait:

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Comme vous pouvez le voir dans l'exemple ci-dessus, l'attribut For du doit correspondre saisir. Le périphérique d'entrée le relayera ensuite aux utilisateurs (les lecteurs d'écran, par exemple, le dicteront via la parole).

étiquettes aria

Bien que le HTML sémantique soit meilleur, les étiquettes ARIA (applications Internet riches accessibles) peuvent compenser en leur absence. Dans ce cas, voici à quoi pourrait ressembler une étiquette en l'absence d'un véritable HTML :

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Malheureusement, l'inconvénient de cette approche est l'absence d'une étiquette visuelle. Cependant, cela pourrait être bien avec quelques balisages (par exemple, une forme à entrée unique avec un titre et un espace réservé ):

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

(Je vais expliquer ce que sont les espaces réservés dans un instant.)

Étiquettes d'emballage

Emballer les entrées dans les étiquettes est l'approche la plus propre. De plus, grâce aux CSS: Focus-Within, nous pouvons même styliser les étiquettes pendant que leurs entrées d'enfants reçoivent une mise au point, mais nous en discuterons plus tard.

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

Les espaces réservés vs étiquettes

Une brève comparaison:

• Les étiquettes indiquent ce que l'entrée attend
• Les espaces réservés montrent des exemples dedites attentes

Les espaces réservés ne sont pas conçus pour être l'alternative aux étiquettes, bien que comme nous l'avons vu dans l'exemple ARIA ci-dessus, ils peuvent ajouter une partie du contexte perdu en l'absence d'étiquettes visuelles.

Idéalement, cependant, nous devons utiliser les deux:

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

Voir le stylo
Formulaire 2 par SitePoint (@SitePoint)
sur codepen.

Choisir les types d'entrée

Les espaces réservés ne s'appliquent qu'aux entrées textuelles, mais il existe en fait une gamme complète de types d'entrées différents, qui incluent:

<span><span><span><h1</span>></span>Subscribe<span><span></h1</span>></span>
</span><span><span><span><form</span>></span>
</span>    <span><span><span><input</span> aria-label<span>="Email address"</span> placeholder<span>="bruce@wayneenterpris.es"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Les types d'entrée sémantiques sont utiles pendant la validation du formulaire, en particulier lorsque vous comptez sur la validation native, ce que nous allons jeter un œil sous peu. Tout d'abord, apprenons à styliser ces entrées.

Entrées de style

sans doute l'aspect le plus exaspérant des formulaires de codage est de remplacer le style par défaut du navigateur. Heureusement, aujourd'hui, l'apparence: aucune; A 96,06% de support de navigateur selon caniuse.com.

Après avoir réinitialisé le style par défaut du navigateur Web avec le code CSS suivant, nous pouvons ensuite styliser les entrées comme nous le voulons, et cela inclut même les types d'entrée de radio et de case:

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Cependant, certaines de ces entrées peuvent être livrées avec des bizarreries difficiles ou même impossibles à surmonter (selon le navigateur Web). Pour cette raison, de nombreux développeurs ont tendance à retomber à la valeur Type = "texte" par défaut s'ils trouvent ces bizarreries indésirables (par exemple, le "caret" sur l'entrée type = "nombre").

Cependant, il y a est une doublure argentée…

Spécification d'un mode d'entrée

Avec la prise en charge du navigateur Web de 82,3% selon Caniuse.com, le nouvel attribut InputMode spécifie quelle disposition du clavier sera révélée sur des périphériques portables, quel que soit le type d'entrée utilisé.

mieux que rien, non?

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

valider l'entrée de l'utilisateur

Si vous choisissez la validation native-HTML sur une solution JavaScript, n'oubliez pas que l'inputmode n'atteint rien à cet égard. InputMode = "Email" ne va pas valider une adresse e-mail, tandis que Type d'entrée = "Email". C'est la différence.

En mettant cela de côté, discutons de ce qui est en train de déclencher la validation:

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Création de règles personnalisées

Les règles personnalisées nécessitent une connaissance des expressions régulières JavaScript, telles qu'elles sont utilisées par l'objet regexp (mais, sans emballer les barres obliques ou les citations). Voici un exemple qui applique des caractères minuscules (A - Z) et MinLength / MaxLength dans une règle:

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

plus d'informations ici.

Remarque: La validation frontale (native-HTML ou autre) ne devrait jamais, jamais être utilisée comme substitut à la validation côté serveur!

States valides / non valides

juste pour plus de clarté, c'est ainsi que nous coiffons la validité:

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

Houston, nous avons un problème!

Les entrées tentent de valider leurs valeurs (ou leur absence) immédiatement, de sorte que le code suivant (qui montre uniquement les états valides / non valides tandis que l'entrée contient une valeur) pourrait être meilleur:

<span><span><span><h1</span>></span>Subscribe<span><span></h1</span>></span>
</span><span><span><span><form</span>></span>
</span>    <span><span><span><input</span> aria-label<span>="Email address"</span> placeholder<span>="bruce@wayneenterpris.es"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Cela montre le style valide / non valide mais uniquement lorsque l'espace réservé n'est pas affiché (parce que l'utilisateur a tapé quelque chose).

Voir le stylo
Formulaire 3 par SitePoint (@SitePoint)
sur codepen.

Autres choses de base

Envoi des données de formulaire

L'envoi de données de formulaire au serveur nécessite généralement que les entrées aient l'attribut de nom. Cela s'applique également aux entrées cachées:

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Accepter l'entrée de forme longue

Essentiellement, TextArea> est la même chose que <input type="Text">, sauf pour le fait que TextAreas a une prise en charge multiligne. Oui, <input type="textArea"> serait certainement plus intuitif, mais hélas <textarea> TextArea> est la bonne façon d'accepter l'entrée longue des utilisateurs. De plus, il accepte la plupart (sinon la totalité) des attributs que font les entrées.

regrouper les entrées pour une meilleure accessibilité

Bien que les formulaires plus courts offrent une bien meilleure expérience utilisateur, les plus longs sont parfois inévitables. Dans un tel scénario, l'élément

peut être utilisé pour contenir des entrées connexes, un enfant étant utilisé comme titre / titre pour le

:

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Des choses agréables à savoir

Désactivation des entrées

L'ajout de l'attribut désactivé peut rendre une entrée (ou tout élément focalisable) disparu, bien que cela soit généralement appliqué / non appliqué via JavaScript. Voici comment cela fonctionne cependant:

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

et le CSS d'accompagnement, si nécessaire:

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

Cependant, si tout ce que vous voulez faire est d'ajouter un repère visuel supplémentaire faisant la conduite que l'entrée de l'utilisateur n'est pas valide, vous voudriez très probablement utiliser le General Frère Combinator (~). Le code suivant signifie essentiellement «le bouton Soumettre qui suit tout élément avec une entrée non valide». Cela ne modifie aucune fonctionnalité, mais lorsque nous tirons parti de la validation du formulaire natif-HTML (qui gère automatiquement la désactivation / l'activation de la soumission), c'est bien:

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

désactiver une entrée, mais envoyer les données de toute façon

Un mélange de et , l'exemple suivant garantira que la valeur ne peut pas être modifiée. La différence est que, contrairement aux désactivés, les valeurs en lecture sont envoyées sous forme de données de formulaire; Et contrairement à Hidden, Readonly est visible:

<span><span><span><h1</span>></span>Subscribe<span><span></h1</span>></span>
</span><span><span><span><form</span>></span>
</span>    <span><span><span><input</span> aria-label<span>="Email address"</span> placeholder<span>="bruce@wayneenterpris.es"</span>></span>
</span><span><span><span></form</span>></span>
</span>

modification des incréments

Les entrées basées sur les numériques ont un «bouton de rotation» pour ajuster la valeur numérique, et ils acceptent également un attribut étape qui détermine une valeur incrémentale alternative de chaque ajustement:

<span><span><span><label</span>></span>
</span>    First name<span><span><span><input</span>></span>
</span><span><span><span></label</span>></span>
</span>

Formulaires de style, étiquettes et champs sur la mise au point

Nous pouvons utiliser Focus-Within: pour styliser tout parent d'une entrée qui reçoit actuellement une mise au point. Cet élément sera très probablement le conteneur

:

<span><span><span><label</span>></span>
</span>    First name<span><span><span><input</span> placeholder<span>="Bruce"</span>></span>
</span><span><span><span></label</span>></span>
</span>

Envoi plusieurs valeurs avec une entrée

multiple est valide pour les types d'entrée de fichier et de messagerie:

<span><span><span><input</span> type<span>="button"</span>></span>
</span><span><span><span><input</span> type<span>="checkbox"</span>></span>
</span><span><span><span><input</span> type<span>="color"</span>></span>
</span><span><span><span><input</span> type<span>="date"</span>></span>
</span><span><span><span><input</span> type<span>="datetime-local"</span>></span>
</span><span><span><span><input</span> type<span>="email"</span>></span>
</span><span><span><span><input</span> type<span>="file"</span>></span>
</span><span><span><span><input</span> type<span>="hidden"</span>></span> <!-- explained later -->
</span><span><span><span><input</span> type<span>="image"</span>></span>
</span><span><span><span><input</span> type<span>="month"</span>></span>
</span><span><span><span><input</span> type<span>="number"</span>></span>
</span><span><span><span><input</span> type<span>="password"</span>></span>
</span><span><span><span><input</span> type<span>="radio"</span>></span>
</span><span><span><span><input</span> type<span>="range"</span>></span>
</span><span><span><span><input</span> type<span>="reset"</span>></span>
</span><span><span><span><input</span> type<span>="search"</span>></span>
</span><span><span><span><input</span> type<span>="submit"</span>></span> <!-- submits a form -->
</span><span><span><span><input</span> type<span>="tel"</span>></span>
</span><span><span><span><input</span> type<span>="text"</span>></span> <!-- the default -->
</span><span><span><span><input</span> type<span>="time"</span>></span>
</span><span><span><span><input</span> type<span>="url"</span>></span>
</span><span><span><span><input</span> type<span>="week"</span>></span>
</span>

Code de formulaire d'écriture d'écriture

Si un formulaire ne se compose qu'à un Singulaire , , ou , il existe une méthode de raccourci pour marquer les formulaires HTML. Voici un exemple:

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

par opposition à cela:

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

ai-je manqué quelque chose?

HTML est tellement plus intuitif qu'il y a 10 ans. Il évolue constamment et il y aura sans aucun doute plus à ajouter sur le sujet des formulaires HTML / CSS en temps voulu. Un exemple qui me vient à l'esprit est l'élément de données, qui peut pour le moment être assez bogué (en particulier dans Firefox). Mais cela mis à part, ai-je manqué quelque chose?

Je finirai en notant qu'il existe certains aspects des formulaires HTML dont je n'ai pas discuté parce que leur utilisation n'est pas recommandée, y compris:

• Autofocus (mauvais pour l'accessibilité)
• Assublication automatique (ne pas utiliser la saisie semi-automatique doit être le choix de l'utilisateur, pas la valeur par défaut)
• AccessKey (mauvais support et accessibilité)
• novalidate (c'est inutile sans javascript)

FAQ sur les formulaires HTML

Qu'est-ce qu'une forme HTML?

Un formulaire HTML est un élément crucial utilisé pour collecter et recueillir les entrées utilisateur sur une page Web. Il permet aux utilisateurs de saisir des données, de faire des sélections et de soumettre des informations à un serveur pour le traitement.

Comment créer un formulaire HTML de base?

Pour créer un formulaire HTML de base, vous utilisez l'élément

et incluez divers éléments d'entrée comme les champs de texte, les cases à cocher, les boutons radio et les boutons à l'intérieur. La balise de formulaire a des attributs comme l'action et la méthode qui spécifient où les données doivent être envoyées et comment elles doivent être traitées.

Quels sont les types d'entrée courants dans les formulaires HTML?

Les types d'entrée communs incluent les champs de texte (), les boîtes à cocher (), les boutons radio (), listes de chute (), et les boutons ().

Comment gérer la saisie des utilisateurs dans les formulaires HTML?

Entrée utilisateur est gérée à l'aide de scripts côté serveur ou de scripts côté client (comme JavaScript). L'attribut d'action du formulaire spécifie l'URL où les données sont envoyées, et l'attribut de méthode définit la méthode HTTP (get ou post) utilisée pour la soumission.

Quelle est la différence entre les méthodes GET et POST dans HTML formes?

La méthode GET contribue aux données de l'URL, visibles dans la barre d'adresse, et convient aux données moins sensibles. La méthode Post envoie des données dans le corps de la demande, en les gardant cachées aux utilisateurs, ce qui la rend plus sécurisée pour des informations sensibles.

Comment valider les données du formulaire?

Les données de formulaire peuvent être validées à l'aide d'attributs HTML comme requis ou en utilisant JavaScript pour une validation plus complexe. JavaScript vous permet d'effectuer une validation en temps réel, garantissant que les données entrées répondent aux critères spécifiques avant la soumission.

Puis-je styliser des formulaires HTML?

Oui, vous pouvez styliser des formulaires HTML à l'aide de CSS. Vous pouvez modifier l'apparence des éléments de formulaire, ajuster les dispositions et appliquer des styles pour améliorer l'attrait visuel global et l'expérience utilisateur.

Puis-je télécharger des fichiers à l'aide de formulaires HTML?

Oui, vous pouvez activer les téléchargements de fichiers avec l'élément . Cela permet aux utilisateurs de sélectionner et de soumettre des fichiers via le formulaire. L'attribut encType du formulaire doit être défini sur «Multipart / Form-Data» pour les téléchargements de fichiers.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!