Formulaires HTML. Création de formulaires HTML

Les formulaires peuvent être trouvés sur presque tous les sites Web sur Internet. Par exemple, lorsque vous saisissez votre identifiant et votre mot de passe sur un site Web, les données sont renseignées via des formulaires et envoyées au serveur. Diverses enquêtes sont également un exemple de formulaire.

Syntaxe des balises

...

Étiqueter

possède un attribut d'action très important, auquel est attribuée l'adresse (URL) du script auquel les informations reçues du formulaire sont envoyées pour traitement. Nous n'entrerons pas dans les détails de ce qui se passe après l'envoi des données, car ces problèmes sont déjà résolus non pas par HTML, mais par les méthodes GET et POST en PHP.

Exemple 1. Formulaire HTML avec boutons

Ce seront les boutons :
Bouton un
Bouton deux
Bouton trois






Après avoir cliqué sur OK, la page sera simplement actualisée, car... nous n'avons pas spécifié le paramètre d'action

Convertit ce qui suit sur la page :

Ce seront les boutons :
Bouton un
Bouton deux
Bouton trois
Et ce sera un champ de texte. Par exemple, vous pouvez saisir votre identifiant ici

Et ce sera un grand champ de texte. Par exemple, vous pouvez saisir ici des informations vous concernant

Après tout ce qui précède, il y aura un bouton OK

Après avoir cliqué sur OK, la page sera simplement actualisée, car... nous n'avons pas spécifié le paramètre d'action

Explications par exemple

  • action="" - indique que le traitement des données aura lieu sur la même page.
  • - l'attribut type="radio" indique qu'il faut afficher le texte après ce code comme bouton de sélection. Les attributs name et value de cette balise jouent désormais un petit rôle pour nous, car Nous n'étudions pas le php pour le moment (voir les leçons de php).
  • - l'attribut type="text" indique qu'il s'agira d'un champ texte. Il y a également deux attributs importants ici : name (pour php) et value (valeur par défaut).
  • - l'attribut type="textarea" indique qu'il s'agira d'un grand champ de texte. La seule différence avec le cas précédent est qu'il permet d'enregistrer une grande quantité de texte.
  • - l'attribut type="submit" indique qu'il s'agit d'un bouton. L'attribut value contient ce qui sera écrit sur le bouton.

Vous pouvez en savoir plus sur tous ces éléments dans la leçon 15 : éléments de balise

, où les boutons radio, les listes, les cases à cocher, les champs de texte et les boutons sont pris en compte.

Examinons maintenant de plus près tous les attributs des balises .

Attributs et propriétés des balises

1. Attribut accept-charset="Encodage"- définit l'encodage dans lequel le serveur peut accepter et traiter les données du formulaire. Peut prendre différentes valeurs, par exemple CP1251, UTF-8, etc.

2. L'attribut action="URL" est l'adresse du script qui traite les données transmises depuis le formulaire. Si vous laissez cette valeur vide, les données seront traitées dans le même document où se trouve le formulaire.

3. Attribut autocomplete="on/off" - définit ou désactive la saisie semi-automatique du formulaire. Peut prendre deux valeurs :

  • on - activer la saisie automatique ;
  • off - désactiver la saisie automatique ;

4. Attribut enctype="parameter" - spécifie la méthode de codage des données. Peut prendre les valeurs suivantes :

  • application/x-www-form-urlencoded- au lieu d'espaces, mettez +, les symboles comme les lettres russes sont codés par eux valeurs hexadécimales
  • multipart/form-data - les données ne sont pas codées
  • text/plain - les espaces sont remplacés par un signe +, les lettres et autres caractères ne sont pas codés.

5. Attribut Method="POST/GET" - spécifie la méthode d'envoi. Peut prendre deux valeurs :

  • GET - transmission de données dans la barre d'adresse (il existe une limitation sur le volume de données envoyées)
  • POST - envoie des données au serveur dans une requête du navigateur (peut envoyer un grand nombre de données, parce que aucune limitation de volume)

6. Attribut name="name" - définit le nom du formulaire. Le plus souvent utilisé lorsqu'il existe plusieurs formulaires afin que vous puissiez accéder à un formulaire spécifique via un script.

7. L'attribut novalidate - annule la vérification intégrée des données du formulaire pour l'exactitude de la saisie.

8. L'attribut target="parameter" est le nom de la fenêtre ou du cadre dans lequel le gestionnaire chargera le résultat renvoyé. Peut prendre les valeurs suivantes :

  • _blank - charge la page dans une nouvelle fenêtre de navigateur
  • _self - charge la page dans la fenêtre actuelle
  • _parent - charge la page dans le cadre parent
  • _top - annule tous les cadres et charge la page dans la fenêtre complète du navigateur

Cher lecteur, vous en savez maintenant beaucoup plus sur balise html formulaire. Maintenant, je vous conseille de passer à la leçon suivante.

Bonjour, chers lecteurs du site blog. Poursuivant notre étude, nous passons à l'examen des balises form et input avec leurs attributs (), avec lesquelles vous pouvez créer une grande variété de formulaires pour le site.

Quels que soient le sujet et le contenu d'une ressource Web particulière, elle contiendra très probablement des formulaires sous une forme ou une autre : champs de texte, menus déroulants, divers boutons ou commutateurs. D'ailleurs, dans l'une des publications, j'ai déjà parlé d'éléments qui contribuent à diversifier les formes.

Quel est le but pratique de toute la variété des formes possibles ? Tout d'abord, ils sont nécessaires pour envoyer les données saisies par l'utilisateur au serveur en vue d'un traitement ultérieur à l'aide d'un script (gestionnaire) spécialement créé.

Formulaires HTML - comment ils sont créés à l'aide du formulaire et de la saisie

Comme je l'ai dit au début, une sorte de formulaire web, voire plusieurs à la fois, doit être présent sur tout site web plus ou moins développé. Pour comprendre leur importance à la lumière de la conformité d'une ressource Web aux exigences modernes, il suffit de vous donner d'emblée trois objets qui utilisent des formulaires basés sur les balises form et input, qui, rien que par leur nom, ne laissent aucun doute sur leur nécessité d'un projet dans un sens ou dans un autre :

Si vous suivez par exemple un lien vers un article sur la création retour(permettant à tous les utilisateurs d'envoyer des messages à l'administration du site), puis le code HTML avec un formulaire y est présenté, qui présente une ouverture ( ) et la fermeture (

) Partie:


C'est là que le formulaire joue un rôle essentiel puisqu'il initie l'installation du formulaire Web. Il n'affiche pas lui-même une zone sur une page Web, mais sert de conteneur contenant d'autres balises.

Dans notre cas (voir capture d'écran ci-dessus), ceux-ci incluent plusieurs saisir(cette balise HTML est unique, c'est-à-dire qu'elle ne possède pas de composant fermant), et aussi zone de texte, avec différents ensembles d'attributs. Chacun d'eux définit son propre élément inclus dans le formulaire.

16. Mise au point automatique(pas de paramètres) est un attribut logique qui met le focus sur le champ immédiatement lors du chargement de la page Web, ce qui vous permet de saisir des données sans cliquer dessus. Ne peut pas être appliqué uniquement à input type="hidden".

17. Désactivé(sans valeurs) - désactive pour l'utilisateur l'élément de formulaire auquel il a été ajouté. Le plus souvent, il est utilisé conjointement avec des scripts, dans lesquels les conditions sont spécifiées dans lesquelles un élément inaccessible sera activé.

18. Formulaire— associe l'élément au formulaire lorsqu'il se trouve à l'extérieur du conteneur

. Pour créer un lien, un attribut global id est ajouté à la balise form et un attribut form est ajouté à la balise input, dont les valeurs sont les mêmes (par exemple, id="data" et form="data") .

19. Plusieurs(pas de paramètres) - ensembles option à choix multiples pour l'utilisateur et n'est utilisé qu'en conjonction avec type="file" et type="email".

Si vous utilisez le champ de téléchargement de fichiers, vous pouvez sélectionner plusieurs fichiers de votre ordinateur à la fois en utilisant les touches Ctrl ou Shift. Si un champ de saisie d'adresse s'affiche E-mail(type="email"), les e-mails doivent être saisis séparés par des virgules.

20. Requis(aucune valeur) – active l'obligation pour l'utilisateur de saisir des données. Par conséquent, le navigateur bloque la soumission du formulaire Web si un champ obligatoire est laissé vide et affiche un message correspondant sur la nécessité de le remplir.

Cet attribut n'est pas utilisé pour les boutons graphiques et standards (type="button | image"), ainsi que pour les champs de saisie masqués (type="hidden").

21. Taille— détermine la largeur du champ de texte en caractères (convient uniquement aux éléments de type avec les paramètres "email | mot de passe | recherche | tel | texte | url"). La valeur par défaut est de 20 caractères.

Les quatre attributs suivants (22-25) pour la balise input ont presque les mêmes fonctionnalités que pour , mais par souci d'exhaustivité, je les mentionnerai également brièvement.

22. Longueur maximale- impose une limite à quantité maximale caractères que vous pouvez saisir lorsque vous remplissez un champ de texte. Si vous tentez de dépasser cette limite, toute saisie ultérieure sera bloquée. Cet attribut n'est applicable qu'aux éléments de texte de type="email | password | search | tel | text | url".

23. Longueur minimale— impose une limite au nombre minimum de caractères devant être saisis dans la zone de texte. Si l'on tente d'envoyer des données contenant moins de caractères, un court message apparaîtra indiquant la nécessité de compléter le contenu du formulaire et des informations sur le nombre de caractères déjà saisis seront fournies. Les conditions d'utilisation sont exactement les mêmes que dans le cas de maxlength.

24. Espace réservé— vous pouvez placer un indice (il servira de paramètre) directement dans le champ de texte, qui disparaîtra dès que l'utilisateur commencera à saisir des caractères. Uniquement pour les champs formés à l'aide de paramètres email, mot de passe, recherche, texte, tel, url attribut type de la balise d’entrée.

25. Lecture seulement(aucun paramètre) - indique que le texte précédemment saisi dans le champ est disponible uniquement pour la lecture et la copie. Il est généralement utilisé conjointement avec des scripts, dans lesquels des conditions sont spécifiées qui, une fois remplies, peuvent activer cet élément de formulaire.

Et enfin, quelques attributs supplémentaires qui complètent la fonctionnalité divers éléments formes:

26. Modèle- dans le rôle de sa signification reflète expression régulière, sur la base duquel sont fixées les règles de saisie des informations. Il est recommandé d'ajouter en plus un global attribut de titre, dont le paramètre est d'ajouter un texte explicatif pour aider les utilisateurs à remplir les champs. Le modèle est appliqué uniquement aux éléments e-mail, mot de passe, recherche, texte, téléphone et URL. Comprenons-le avec un exemple. Voici le code d'un formulaire d'inscription simplifié (avec ) :

Se connecter

Mot de passe

Se connecter

Mot de passe

Pour le champ de connexion (type="text"), une expression régulière (5,) est spécifiée comme valeur de modèle, ce qui implique l'utilisation de caractères latins, et au moins cinq caractères doivent être saisis.

En ce qui concerne la zone de texte du mot de passe (type="password"), la valeur est définie sur (8,), ce qui spécifie dans tous les cas la saisie de caractères exclusivement latins (lettres majuscules et minuscules), ainsi que de chiffres, tandis que le nombre total de tous les caractères ne doit pas être inférieur à huit.

Si les conditions de saisie spécifiées ne sont pas respectées, le navigateur ne vous permettra pas d'envoyer des données et affichera un avertissement approprié :


27. SRC— définit le chemin d'accès à l'image (URL, qui est sa valeur) pour afficher le bouton graphique « image » (voir le tableau des paramètres de type d'entrée ci-dessus).

28. Étape— définit le pas pour les éléments qui offrent un choix de valeurs numériques (input type="date | datetime-local |month | number | range | tel | time | week.").

Il peut prendre n’importe quel nombre entier ou fractionnaire comme paramètre. Étape par défaut = "1". Pour définir la plage de saisie finale, vous pouvez à nouveau utiliser les attributs min et max mentionnés juste au-dessus. Pour plus de clarté, nous inclurons 2 éléments type="number" dans le formulaire de test. Pour le premier, définissez step="2", et pour le second, step="0,1" :

Saisissez une valeur comprise entre 0 et 1 :

Saisissez une valeur comprise entre -10 et 10 :

Saisissez une valeur comprise entre 0 et 1 :

29. Valeur— définit la valeur de l'élément de formulaire qui sera transmis au gestionnaire. Une paire nom-paramètre est envoyée au serveur, où le nom est déterminé par l'attribut name de la balise d'entrée et le paramètre est déterminé par l'attribut value. De plus, pour divers éléments de formulaire la valeur jouera différents rôles:

  • for type="button | reset | submit" - définit l'étiquette de texte sur les boutons ;
  • for type="checkbox | radio | image" - identifie chaque case à cocher, interrupteur ou bouton graphique lors de l'envoi et du traitement des données sur le serveur ;
  • for type="password | text" - immédiatement lors du chargement du formulaire, il affiche dans le champ un texte préliminaire, qui peut être modifié ou complètement supprimé par l'utilisateur ;
  • for type="file" (téléchargement de fichier) ne s'applique pas car cela n'affecte pas cet élément.

Exemple d'utilisation pour chacune des options ci-dessus :

Sélectionnez CMS : W.P. Joomla

Sélectionnez CMS : W.P. Joomla

Ici valeur valeur de l'attribut définit les composants suivants de chaque élément : affiche un fragment de texte pour le champ type="text" ("Votre nom"), identifie chacun des boutons radio ("1" et "2") définis à l'aide de type="radio", et active également l'inscription sur le bouton ("Soumettre").

Un exemple de création d'un beau formulaire HTML

Ensuite, je vais essayer de vous présenter un exemple de formulaire Web, dont le code inclut non seulement des combinaisons de type d'entrée avec différentes significations, formant des champs de texte et des boutons standards, mais aussi, par exemple, qui permettent d'initier le focus sur un élément non seulement par un clic direct de souris, mais aussi en cliquant sur le texte.

Veuillez noter que pour obtenir une conception unique, des composants de formulaire individuels sont placés, chacun avec des ensembles de :

Retour (largeur maximale : 350 px ; marge : 50px auto 0 ; remplissage : 20px ; arrière-plan : #f3ebe1 ; famille de polices : "Oswald", sans-serif ;) .form-1, .form-2, .form-3 , .form-4 (padding: 15px; border: 4px double # 909090) .form-1, .form-2, .form-3 (border-bottom: aucun) .form-1 input (affichage: block; margin- bas : 10 px ; largeur : 100 %). background-position:10px 10px) entrée .form-4 (affichage:bloc; hauteur:50px; taille de police:24px; largeur:100%; curseur: pointeur)

De ce fait, un tel formulaire web prend le contour suivant :

Plus informations complètes pour créer ce formulaire spécifique sur cette page(d'ailleurs, vous pouvez non seulement vérifier la fonctionnalité de zones de texte individuelles en y saisissant des données, mais également expérimenter le formulaire Web en modifiant le code HTML et/ou Propriétés CSS, modifiant complètement ou partiellement son apparence).

Mon objectif était de vous présenter un algorithme permettant d'utiliser différentes valeurs de l'attribut type et de la balise form pour créer une variété de Formulaires HTML En ligne. J'espère que la tâche est terminée. Dans tous les cas, partagez vos réflexions sur ce sujet diversifié dans les commentaires.

Naturellement, dans les publications ultérieures, je continuerai à décrire les principales balises balisage hypertexte, alors n'oubliez pas de vous abonner aux mises à jour du blog par e-mail. Aussi, pour renforcer cela, regardez une autre leçon d'Evgeniy Popov sur la création d'un formulaire de contact.

26.02.2016


Salut tout le monde!
Nous continuons à étudier Les bases du HTML. Dans cette leçon, nous examinerons ce qui s'est passéHTML formulaire et comment il est créé.
Si vous l'avez remarqué, aujourd'hui, aucun site Web ne peut se passer de formulaires. Ces formulaires peuvent être différents, par exemple un formulaire de commentaires, un formulaire de commande, un formulaire d'inscription et de connexion, un formulaire d'envoi de commentaires, d'avis, un formulaire de recherche et bien d'autres.

Je pense que nous devons maintenant vous montrer des exemples de l'apparence visuelle des formulaires HTML.

○ Formulaire de recherche:

○ Formulaire de connexion au site :

○ Formulaire de commentaires:

○ Bon de commande:

Je pense que vous comprenez l'idée Création HTML formes Donc, dans la leçon d'aujourd'hui, je vais vous dire : comment créer un simpleHTMLformulaire et quelles balises peuvent être utilisées pour créer différents champs de formulaire.

Je sollicite désormais votre attention particulière, car le sujet est complexe et important.

HTMLformulaire est un champ dans lequel l'utilisateur saisit certaines informations. Mais cette information doit aussi être envoyée d’une manière ou d’une autre. Une sorte de formulaire HTML est comme une moto sans essence, elle semble avoir tout, mais pour une raison quelconque, elle ne bouge pas. Ainsi, pour que le formulaire fonctionne et envoie les informations saisies par l'utilisateur, vous devez créer un processeur de formulaire dans le fichier . Mais ne vous embêtez pas avec le conducteur, puisque vous suivez désormais uniquement un cours pour débutants. Nous aborderons le sujet du gestionnaire de formulaire dans la section « PHP ». Donc, d’une manière ou d’une autre, j’ai été distrait du sujet principal.

Apprendre à créer des formulaires HTML

Tout formulaire HTML sera constitué d'une balise principale

. À l'intérieur d'une balise
les éléments restants du formulaire sont insérés et seront affichés sur la page Web.

Le formulaire doit être placé entre les balises

.
Pour l'étiquette

la balise de fermeture est obligatoire .

*attributs de la balise rm >

NOM - nom unique formes. Il est utilisé lorsqu'il y a plusieurs formulaires sur un même site.
ACTION – Cet attribut spécifie le chemin d'accès au gestionnaire de formulaire. Est requis.
MÉTHODE – méthode d’envoi.

  • POST - les données sont transmises sous forme cachée
  • GET (par défaut) - les données sont envoyées à formulaire ouvert via la ligne du navigateur.

Un exemple de ce à quoi ressemble une balise avec les attributs suivants :

voici divers éléments de formulaire qui seront affichés sur la page Web.

Éléments de formulaire

○ Étiquetersaisir

Étiquetersaisir– cette partie de l'élément champ de formulaire est destinée à la saisie de petits textes et de chiffres.
Pour l'étiquette aucune balise de fermeture n'est nécessaire .

*attributs de la balise< saisir >

  • nom - nom de l'élément
  • taille - taille du champ
  • obligatoire – champ obligatoire
  • autofocus – le pointeur de la souris sera immédiatement sur le terrain lors du chargement d'une page Web
  • maxlength – avec cet attribut, vous pouvez spécifier le nombre maximum de caractères à saisir dans le champ. Par défaut, sans l'attribut maxlength, un nombre illimité de caractères peut être saisi dans le champ
  • espace réservé – un indice pour l'utilisateur qui sera affiché directement dans le formulaire de champ (auparavant, l'attribut value était utilisé).
  • type - type d'élément

Exemple de remplissages :

Type d'élément

Champ de texte

○ Champ de texte "texte":

Résultat:

○ Champ Mot de passe:

Résultat:

○ Champ email "email":

Résultat:

○ Bouton de sélection d'un fichier dans le « fichier » de l'ordinateur:

Résultat:

○ Champ de saisie du téléphone « tel »:

Résultat:

○ Champ de recherche:

Résultat:

○ Champ de sélection de couleur "couleur":

Résultat:

○ Champ de saisie et de sélection des chiffres « numéro »:

  • min – valeur minimale
  • max – valeur maximale
  • étape - étape.

Résultat:

○ Champ de sélection de date "date":

Résultat:

○ Champ de sélection de la date et de l'heure locale au format (05/05/2015 00:00):

Résultat:

○ Affichez un calendrier déroulant.
Champ de sélection de l'année et du mois au format (juillet 2015) :

Résultat:

○ Champ de sélection de l'heure "heure":

Résultat:

○ Curseur de plage:

Résultat:

○ Case à cocher:

coché – cet attribut spécifie quelle case à cocher doit être activée par défaut

Résultat:

○ Interrupteur radio:

coché – cet attribut spécifie quel commutateur radio doit être activé par défaut

Résultat:

Boutons

○ Bouton:

valeur - étiquette sur le bouton

Résultat:

○ Bouton d'envoi de données « soumettre »:

valeur - étiquette sur le bouton

Résultat:

○ Bouton de réinitialisation:

valeur - étiquette sur le bouton

Résultat:

○ Bouton avec photo:

Résultat:

○ Champ caché

○ sélectionner une balise

Étiquetersélectionner– cela fait partie d’un élément de formulaire destiné à saisir une liste déroulante.
Pour l'étiquette la balise de fermeture est obligatoire .
Étiqueter Et

  • Le nom est le nom de la liste entière. Définir uniquement pour la balise .
  • Valeur – définie pour chaque élément de liste pour la balise
  • désactivé - bloque la sélection d'un élément dans la liste déroulante. Définir uniquement pour la balise

Résultat:

Pas urgent Urgent Par coursier

Ou comme ceci :

Résultat:

Pas urgent Urgent Par coursier

Bloquons-le maintenant de la liste « Urgent » avec l'attribut « désactivé » :

Résultat:

Pas urgent Urgent Par coursier

○ liste déroulante par groupe:

Pour créer une liste de groupes, utilisez la balise

Résultat:

Zone de texte d'option
Légende de l'ensemble de champs d'étiquette

○ pour une sélection multiple:

Dans la balise

*attributs de la balise< zone de texte >

  • nom – nom du champ
  • cols – largeur du champ
  • lignes – hauteur du champ
  • espace réservé – un indice pour l'utilisateur qui sera affiché directement dans le formulaire de champ.

Résultat:

Ou comme ceci :

Résultat:

Entrez du texte

Ou comme ceci :

Résultat:

Conception « Frame » (ensemble de champs)

○ Balise d'ensemble de champs

Balise d'ensemble de champs– en utilisant cette balise, vous pouvez dessiner un cadre autour d’un objet.
La balise de fermeture est obligatoire.

Balises supplémentaires
Balise de légende – indique le titre.
La balise de fermeture est obligatoire.

Titre Texte à l’intérieur du cadre.

Résultat:

C'est tout ce que je voulais vous dire sur le sujet "Formulaires HTML". Résumons maintenant et essayons en pratique de créer forme simple, en utilisant les connaissances que vous avez acquises grâce à cet article.

Voici mon formulaire :

Formulaire de CV pour un employé de l'usine pilote de PJSC "KMZ"



Quel métier veux-tu faire ?


Quel salaire souhaitez-vous recevoir (par mois) ?
10$ 11$



Résultat:

Post précédent
Entrée suivante


Les formulaires en HTML sont les plus complexes, mais d'un autre côté, peut-être les plus sujet intéressant en HTML.

Les formulaires Web permettent aux visiteurs du site de saisir certaines informations dans des champs spéciaux et le développeur les reçoit sous une forme qui lui convient.

Un exemple de formulaire pourrait être un livre d'or, un questionnaire, test en ligne. Les formulaires sont remplis lors de l'inscription sur le site, lors de la passation de commandes dans une boutique en ligne, etc.

En utilisant HTML, vous pouvez créer un cadre de formulaire : champs de texte, menus, listes, boutons, cases à cocher et boutons radio. C'est-à-dire les éléments à l'aide desquels certaines informations sont saisies dans le formulaire.

Ensuite, les données saisies dans le formulaire sont envoyées au serveur pour traitement. Mais HTML est impuissant ici - un programme ou un script qui y est attaché travaille déjà sur le traitement du formulaire. De tels programmes sont généralement écrits en langage php ou javascript.

Attributs du formulaire - balise

Il peut y avoir plusieurs formulaires sur une page Web ( autant que le développeur en a besoin). Chacun d'eux commence par le tag et se termine par une balise de fermeture .

L'attribut action est obligatoire pour tout formulaire - il spécifie l'adresse du fichier qui sert le formulaire ( traite les données qui y sont saisies).

L'attribut méthode spécifie comment le contenu du formulaire sera soumis. Il existe deux méthodes : GET et POST. Maintenant, cela n'a aucun sens d'approfondir ces paramètres, puisque le sujet de l'envoi d'informations Méthodes OBTENIR et POST fait référence aux langages informatiques ( par exemple PHP). Il suffit de savoir quelle est exactement la méthode de transfert Données POST dans la plupart des cas, il est utilisé dans des formulaires.

Attribut de nom de balise

est facultatif. Mais s'il y a plusieurs formulaires dans le document, chacun d'eux doit être identifié d'une manière ou d'une autre par le gestionnaire. Par conséquent, la présence de l'attribut name dans ce cas est nécessaire - il spécifie le nom unique du formulaire.

Vous pouvez également définir le codage des données d'entrée - l'attribut accept-charset en est responsable et également, à l'aide de l'attribut target, définir la fenêtre dans laquelle le résultat du traitement du formulaire soumis sera affiché ( dans une fenêtre nouvelle ou actuelle).

Mais le tag lui-même cela n'a aucun sens, car le formulaire transmet des données qui doivent d'abord être saisies quelque part !

Entrée de données. Champs de formulaire - balise

Étiqueter Il s’agit de la balise la plus courante trouvée dans les formulaires. Il est conçu pour créer divers éléments servant à saisir des données dans un formulaire : champs de texte, boutons, cases à cocher, boutons radio.

le type est l'attribut principal de la balise . Il définit le type de champ ( élément) formes:

Type de valeur d'attribut="..."

Résultat

Description

Champ de texte sur une seule ligne pour saisir du texte. L'attribut size spécifie la largeur du champ en caractères.

Champ de texte pour saisir un mot de passe.
L'attribut maxlength définit le nombre maximum de caractères pouvant être saisis

1 2 3

Changer.
Vous ne pouvez sélectionner qu'une seule option parmi celles proposées. L'attribut vérifié spécifie un champ pré-vérifié.

1 2 3

Case à cocher.
Il existe plusieurs options parmi lesquelles choisir. Attribut vérifié définit un champ pré-vérifié.

Bouton.
L'attribut value définit l'étiquette du bouton.

Bouton de réinitialisation.
Renvoie les champs du formulaire à leur forme d'origine. Réinitialiser les données saisies.

Bouton pour envoyer les données saisies.

Champ de saisie du nom du fichier à envoyer.

Image du bouton.
Il est également utilisé pour envoyer des données au serveur. L'attribut src spécifie l'adresse du fichier image.

Champ caché - invisible pour l'utilisateur.

Liste déroulante - Balises identique à l'étiquette sert à collecter des informations - il crée une liste dans laquelle un ou plusieurs éléments peuvent être sélectionnés. Chaque élément correspond à une valeur qui est envoyée au serveur pour traitement.

Voir la liste en cours de création dépend de la valeur de l'attribut size : with size= "1" ( valeur par défaut) la liste sera déroulante.

Une valeur différente pour l'attribut size correspondra au nombre d'éléments de liste affichés. Par exemple, avec size="3" , trois éléments seront visibles. Pour afficher d'autres éléments de la liste ( s'il y en a) Devrait être utilisé bande verticale défilement, qui est ajouté automatiquement.

Par défaut, un seul élément de liste peut être sélectionné. Ajout de l'attribut multiple à une balise et crée chaque élément de la liste.

Utiliser l'attribut name de la balise





7 merveilles du monde!




La direction cardinale est l'une des quatre directions principales :

Nord Sud Ouest Est

7 merveilles du monde!

Pyramide de Khéops Jardins suspendus de Babylone Statue de Zeus à Olympie Temple d'Artémis à Éphèse Mausolée d'Halicarnasse Colosse de Rhodes Phare d'Alexandrie

Champ de texte multiligne - balise

Si le contenu du champ dépasse sa taille, un curseur apparaîtra.

Exemple d'utilisation d'un formulaire

Voyons maintenant comment fonctionne le formulaire.

Formulaire de commande de vidéos éducatives :


Votre nom: *



Votre commande:



Sélectionnez le média :


CD


DVD


Clé USB


Votre e-mail : *



Votre adresse: *





Les formulaires HTML sont des éléments d'interface complexes. Ils comprennent différents éléments fonctionnels : des champs de saisie Et