Création de formulaires HTML. Formulaires en HTML Ensemble de formulaires HTML

Un formulaire HTML est une partie d'un document qui permet à l'utilisateur de saisir des informations qui l'intéressent, qui peuvent ensuite être acceptées et traitées côté serveur. En d’autres termes, les formulaires servent à collecter les informations saisies par les utilisateurs.

Balise syntaxiquement appariée

Élément est élément principal du formulaire et définit un champ personnalisé pour saisir des informations. Le champ de saisie accepte différentes sortes, en fonction de la valeur de l'attribut type appliqué à cet élément.

Élément

Et donc dans l'ordre, ce que nous avons fait dans cet exemple :

• Publié deux champs de texte sur une seule ligne ( ) pour que l'utilisateur saisisse son prénom et son nom. Attribué des noms uniques à ces champs à l'aide de l'attribut name ( pour une transmission et un traitement corrects du formulaire, veillez à indiquer pour chaque élément cet attribut). De plus, l'attribut value a été défini sur les valeurs par défaut pour ces champs (lors du remplissage des champs, la valeur de cet attribut correspondra à la saisie de l'utilisateur).
• Publié deux boutons radio ( ) pour sélectionner une option parmi un nombre limité. Veuillez noter que pour les boutons radio le même nom doit être spécifié afin que vous ne puissiez choisir qu'une seule option parmi celles proposées.
Pour d'abord boutons radio, nous avons spécifié l'attribut

Formulaires HTML— des éléments d'interface complexes. Ils comprennent différents éléments fonctionnels : des champs de saisie Et , listes <select>, conseils, etc. Tout le code du formulaire est contenu dans l'élément <form> .</p> <p>La plupart des informations des formulaires Web sont transmises à l'aide de l'élément <input>. Pour saisir une ligne de texte, utilisez l'élément <input type="text">, pour plusieurs lignes - élément <textarea>. Élément <select>crée une liste déroulante.</p> <p>Élément <label>crée des étiquettes pour les champs de formulaire. 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="lastname">Nom de famille</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Nom de famille</label> <label>Nom de famille <input type="text" name="lastname"></label> </p><p>Les champs de formulaire peuvent être divisés en <a href="https://wisemotors.ru/fr/phones/v-chem-otlichie-programista-i-polzovatelya-otlichie-sistemnogo/">blocs logiques</a> en utilisant l'élément <fieldset>. Chaque section peut être nommée à l'aide de l'élément <legend> .</p><p> <fieldset> <legend>Coordonnées</legend> <label>Nom <input type="text" required></label> <label>E-mail <input type="email" required></label> </fieldset> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>Riz. 1. Regrouper les champs du formulaire</p><p>Pour rendre le formulaire plus compréhensible pour les utilisateurs, du texte est ajouté aux champs du formulaire pour fournir un exemple des données saisies. Ce type de texte est appelé texte générique et est créé à l'aide de l'attribut placeholder.</p> <p>Les champs obligatoires doivent également être mis en évidence. Avant HTML5, le symbole astérisque * était utilisé à côté du nom du champ. La nouvelle spécification introduit un attribut obligatoire spécial, qui vous permet de marquer un champ obligatoire au niveau du balisage. Cet attribut indique au navigateur (en supposant qu'il prend en charge HTML5) de ne pas envoyer de données après que l'utilisateur a cliqué sur Soumettre jusqu'à ce que les champs spécifiés soient remplis.</p><p> <input type="text" required placeholder="votre nom"> </p><p>Pour modifier l'apparence d'un champ de texte lors de la réception du focus, utilisez la pseudo-classe focus. Par exemple, vous pouvez assombrir l’arrière-plan du champ actuel ou ajouter une bordure colorée pour le faire ressortir du reste :</p><p>Entrée : focus ( arrière-plan : #eaeaea; )</p><p>Un autre attribut HTML5 utile est l'attribut autofocus. Il vous permet de définir automatiquement le focus sur le champ initial souhaité pour les éléments <input>Et <textarea>(un seul élément de chaque formulaire).</p> <h2>Exemple de création d'un formulaire d'inscription</h2> <div class="form-wrap"> <div class="profile"><img src='https://i2.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>Inscription</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Nom</label> <input type="text" name="name" required> </div> <div class="radio">Sol <label> <input type="radio" name="sex" value="mâle">mâle <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="femelle">femelle <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Un pays</label> <select name="country"> <option>Sélectionnez votre pays de résidence</option> <option value="Russie">Russie</option> <option value="Ukraine">Ukraine</option> <option value="Biélorussie">Biélorussie</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Envoyer</button> </form> </div> <p><b>Note</b><br>action="form.php" - lien vers le fichier du gestionnaire de formulaire. Créez un fichier en codage UTF-8, téléchargez-le sur le serveur et remplacez action="form.php" par le chemin d'accès au fichier sur votre serveur.</p> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Riz. 2. <a href="https://wisemotors.ru/fr/gadgets/izmeneniya-vneshnego-vida-vindovs-7-kak-vernut-standartnuyu-temu-v-windows/">Apparence</a> formulaires par défaut <p>Comme vous pouvez le voir sur la figure, chaque élément de formulaire a des styles de navigateur par défaut. Effacons les styles et stylisons les éléments du formulaire.</p><p> Form-wrap ( largeur : 550 px ; arrière-plan : #ffd500 ; border-radius : 20px ; ) .form-wrap *(transition : .1s linéaire) .profile ( largeur : 240 px ; float : gauche ; text-align : centre ; remplissage : 30px; ) formulaire ( arrière-plan : blanc ; float : gauche ; largeur : calc(100% - 240px) ; remplissage : 30px ; border-radius : 0 20px 20px 0 ; couleur : #7b7b7b ; ) .form-wrap:after, form div:after ( contenu : " " ; affichage : tableau ; clair : les deux ; ) form div ( marge inférieure : 15px ; position : relative ; ) h1 ( taille de police : 24px ; poids de police : 400 ; position : relative ; margin-top : 50px; ) h1:after ( contenu : "\f138" ; taille de police : 40px ; famille de polices : FontAwesome ; position : absolue ; haut : 50px ; gauche : 50 % ; transformation : traduireX(-50 %) ; ) /******************* style des éléments de formulaire ******************** ** / label, span ( display : block ; font-size : 14px ; margin-bottom : 8px ; ) input, input ( border-width : 0 ; contour : aucun ; marge : 0 ; largeur : 100 % ; remplissage : 10px 15px ; arrière-plan : #e6e6e6 ; ) input:focus, input:focus ( box-shadow : encart 0 0 0 2px rgba(0,0,0,.2); ) .radio label ( position : relative ; remplissage à gauche : 50px ; curseur : pointeur ; largeur : 50 % ; float : gauche ; hauteur de ligne : 40px ; ) .radio input ( position : absolue ; opacité : 0 ; ) .radio -control ( position : absolue ; haut : 0 ; gauche : 0 ; hauteur : 40px ; largeur : 40px ; arrière-plan : #e6e6e6 ; rayon de bordure : 50 % ; alignement du texte : centre ; ) .male:avant ( contenu : " \f222"; famille de polices: FontAwesome; poids de police: gras; ) .female:before ( contenu: "\f221"; famille de polices: FontAwesome; poids de police: gras; ) .étiquette radio: entrée de survol ~ . radio-commande, entrée .radiol: focus ~ .radio-control ( box-shadow: encart 0 0 0 2px rgba(0,0,0,.2); ) entrée .radio: cochée ~ .radio-control ( couleur : rouge ; ) sélectionnez (largeur : 100 % ; curseur : pointeur ; remplissage : 10px 15px ; contour : 0 ; bordure : 0 ; arrière-plan : #e6e6e6 ; couleur : #7b7b7b ; -webkit-apparence : aucun ; /* décochez webkit -browsers */ -moz-apparence : aucun ; /*décocher dans Mozilla Firefox*/ ) select::-ms-expand ( affichage : aucun ; /*décocher dans IE*/ ) .select-arrow ( position : absolue ; haut : 38 px ; à droite : 15px ; largeur : 0 ; hauteur : 0 ; événements de pointeur : aucun ; /*active l'affichage de la liste lorsque vous cliquez sur la flèche*/ border-style: solid; largeur de bordure : 8px 5px 0 5px ; couleur de la bordure : #7b7b7b transparent transparent transparent ; ) bouton ( remplissage : 10px 0 ; largeur de bordure : 0 ; affichage : bloc ; largeur : 120px ; marge : 25px auto 0 ; arrière-plan : #60e6c5 ; couleur : blanc ; taille de police : 14px ; contour : aucun ; transformation de texte : majuscule; ) /********************** ajouter de l'adaptabilité au formulaire ****************** ** **/ @media (largeur maximale : 600 px) ( .form-wrap (marge : 20 px auto ; largeur maximale : 550 px ; largeur : 100 % ;) .profile, form (float : aucun ; largeur : 100 % ;) h1 (marge-haut : auto ; remplissage-bas : 50px ;) formulaire (border-radius : 0 0 20px 20px ;) )</p><p><b>Fichier formulaire.php</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Cci : votre_e-mail." "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && ! vide($country) && filter_var($email, FILTER_VALIDATE_EMAIL))( mail($email, $subject, $msg, $headers); echo "Merci ! Vous vous êtes inscrit avec succès."; ) ?></p><p><b>Note</b><br>Dans la variable $subject, précisez le texte qui sera affiché comme titre de la lettre ; <br>Votre_nom - ici, vous pouvez spécifier le nom qui sera affiché dans le champ « de qui provient la lettre » ; <br>remplacez your_site_url par l'adresse du site avec le formulaire d'inscription ; <br>remplacez your_email par votre adresse e-mail ; <br>$headers .= "Cci : votre_e-mail". "\r\n" ; envoie BCC à votre adresse e-mail.</p> <p><b>Formulaire HTML</b> est un outil avec lequel un document HTML peut envoyer des informations à un point prédéterminé du monde extérieur, où les informations seront traitées d'une manière ou d'une autre.</p> <p>Il est assez difficile de parler de formulaires dans un tutoriel dédié au HTML. La raison est très simple : créer un formulaire HTML est beaucoup plus simple que de créer le « point dans le monde extérieur » auquel le formulaire HTML enverra des informations. Dans la plupart des cas, un tel « point » est un programme écrit en Perl ou en C.</p> <p>Les programmes qui traitent les données soumises par les formulaires sont souvent appelés scripts CGI. L'acronyme CGI signifie Common Gateways Interface. L'écriture de scripts CGI nécessite dans la plupart des cas une bonne connaissance du langage de programmation et des capacités correspondants. <a href="https://wisemotors.ru/fr/phones/os-operating-system-evolution-of-operating-systems-and-basic-ideas/">système opérateur</a> Unix.</p> <p>Actuellement, le langage PHP/FI s'est quelque peu répandu, dont les instructions peuvent être intégrées directement dans des documents HTML (les documents sont enregistrés sous forme de fichiers avec l'extension *.pht ou *.php).</p> <p>Les formulaires HTML transmettent des informations aux programmes de gestion sous la forme de paires [nom de la variable] = [valeur de la variable]. Les noms de variables doivent être spécifiés en lettres latines. Les valeurs des variables sont traitées comme des chaînes par les gestionnaires, même si elles ne contiennent que des nombres.</p> <h3>Comment fonctionne le formulaire HTML</h3> <p>Le formulaire s'ouvre avec la balise <FORM>et se termine par la balise</FORM>. Un document HTML peut contenir plusieurs formulaires, mais les formulaires ne doivent pas être situés les uns dans les autres. Le texte HTML, y compris les balises, peut être placé dans les formulaires sans restrictions.</p> <p>Étiqueter <FORM>peut contenir trois attributs, dont un est obligatoire. Voici les attributs :</p> <p>Attribut obligatoire. Détermine où se trouve le gestionnaire de formulaire.</p><p>Détermine comment (en d’autres termes, en utilisant quelle méthode de protocole de transfert hypertexte) les données du formulaire seront transférées au gestionnaire. Les valeurs valides sont METHOD=POST et METHOD=GET . Si la valeur de l'attribut n'est pas définie, METHOD=GET est supposé par défaut.</p><p>Détermine la manière dont les données du formulaire HTML seront codées pour être transmises au gestionnaire. Si la valeur de l'attribut n'est pas définie, la valeur par défaut est ENCTYPE=application/x-www-form-urlencoded .</p><h3>Le formulaire HTML le plus simple</h3> <p>Afin de démarrer le processus de transfert des données du formulaire vers le gestionnaire, une sorte de contrôle est nécessaire. Créer un tel organisme de contrôle est très simple :</p><p> <INPUT TYPE=submit> </p><p>Après avoir rencontré une telle ligne à l'intérieur du formulaire, le navigateur dessinera un bouton sur l'écran avec l'inscription Soumettre (lire « soumettre » en mettant l'accent sur la deuxième syllabe, de l'anglais « soumettre »), lorsque vous cliquerez sur toutes les données disponibles dans le formulaire sera transféré au gestionnaire défini dans la balise <FORM> .</p> <p>L'étiquette du bouton peut être définie comme vous le souhaitez en entrant l'attribut VALUE="[Label]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:!}</p><p> <INPUT TYPE=submit VALUE="Aller!"> </p><p>Nous en savons maintenant suffisamment pour écrire un formulaire HTML simple (exemple 11). Il ne collectera aucune donnée, mais nous ramènera simplement au texte de ce chapitre.</p><p> <HTML> <HEAD> <TITLE>Exemple 11</TITLE> </HEAD> <H1>Forme la plus simple</H1> <FORM ACTION="pr0008.html"> <!--Это начало формы--> <INPUT TYPE=submit VALUE="Retour au chapitre 8..."> </FORM> <!--Это конец формы--> </BODY> </HTML> </p><p>L'inscription placée sur le bouton peut, si nécessaire, être transmise au gestionnaire en introduisant l'attribut NAME=[name] dans la définition du bouton (lire « name », de l'anglais « name »), par exemple :</p><p> <INPUT TYPE=submit NAME=button VALUE="Aller!"> </p><p>Lorsque vous cliquez sur un tel bouton, le gestionnaire, ainsi que toutes les autres données, recevra une variable de bouton avec la valeur Allons-y ! .</p> <p>Un formulaire peut avoir plusieurs boutons de soumission avec des noms et/ou des valeurs différents. Le gestionnaire peut ainsi agir différemment selon le bouton de soumission sur lequel l'utilisateur a cliqué.</p> <h3>Comment un formulaire HTML collecte des données</h3> <p>Il existe d'autres types d'éléments <INPUT>. Chaque élément <INPUT>doit inclure l'attribut NAME=[name], qui spécifie le nom de l'élément (et, par conséquent, le nom de la variable qui sera transmise au gestionnaire). Le nom doit être précisé <b>uniquement en lettres latines</b>. La plupart des articles <INPUT>doit inclure l'attribut VALUE="[value]" , определяющий значение, которое будет передано обработчику под этим именем. Для элементов !} <INPUT TYPE=text>Et <INPUT TYPE=password>, cependant, cet attribut est facultatif car la valeur de la variable correspondante peut être saisie par l'utilisateur à l'aide du clavier.</p> <p>Types d'éléments de base <INPUT> :</p> <p><i>TYPE=texte</i></p><p>Définit une fenêtre pour saisir une ligne de texte. Peut contenir des attributs supplémentaires SIZE=[number] (largeur de la fenêtre de saisie en caractères) et MAXLENGTH=[number] (longueur maximale autorisée de la chaîne de saisie en caractères).</p><h3>Exemple:</h3> <p><INPUT TYPE=text SIZE=20 NAME=user VALUE="Ivan"></p><p>Définit une fenêtre de 20 caractères de large pour la saisie de texte. Par défaut, la fenêtre contient le texte Ivan, que l'utilisateur peut modifier. Le texte modifié (ou non modifié) est transmis au gestionnaire dans la variable utilisateur.</p><p><i>TYPE=mot de passe</i></p><p>Définit une fenêtre pour saisir un mot de passe. Absolument similaire au type de texte, sauf qu'au lieu des symboles du texte saisi, il affiche des astérisques (*) à l'écran. Exemple:</p><p><INPUT TYPE=password NAME=pw SIZE=20 MAXLENGTH=10></p><p>Définit une fenêtre de 20 caractères de large pour saisir un mot de passe. La longueur maximale autorisée du mot de passe est de 10 caractères. Le mot de passe saisi est transmis au gestionnaire dans la variable pw.</p><p><i>TYPE=radio</i></p><p>Définit un bouton radio. Peut contenir un attribut coché supplémentaire (indique que le bouton est coché). Dans un groupe de boutons radio portant les mêmes noms, il ne peut y avoir qu'un seul bouton radio étiqueté.</p><h3>Exemple:</h3> <p><INPUT TYPE=radio NAME=modem VALUE="9600" checked>9600 points de base <br> <INPUT TYPE=radio NAME=modem VALUE="14400">14400 points de base <br> <INPUT TYPE=radio NAME=modem VALUE="28800">28 800 points de base</p><p>Définit un groupe de trois boutons radio intitulés 9 600 bps, 14 400 bps et 28 800 bps. Le premier des boutons est initialement étiqueté. Si l'utilisateur ne coche pas un autre bouton, la variable modem avec la valeur 9600 sera transmise au gestionnaire. Si l'utilisateur coche un autre bouton, une variable modem avec une valeur de 14400 ou 28800 sera transmise au gestionnaire.</p><p><i>TYPE=case à cocher</i></p><p>Définit un carré dans lequel une marque peut être faite. Peut contenir un attribut coché supplémentaire (indique que le carré est coché). Contrairement aux boutons radio, un groupe de carrés portant le même nom peut avoir plusieurs carrés étiquetés.</p><h3>Exemple:</h3> <p><INPUT TYPE=checkbox NAME=comp VALUE="PC"> <a href="https://wisemotors.ru/fr/space/prezentaciya-na-temu-personalnyi-kompyuter-prezentaciya-na-temu/">Ordinateur personnel</a><br> <INPUT TYPE=checkbox NAME=comp VALUE="W.S." checked>Postes de travail <br> <INPUT TYPE=checkbox NAME=comp VALUE="Réseau local">Les serveurs <a href="https://wisemotors.ru/fr/space/lokalnye-i-globalnye-kompyuternye-seti-prezentaciya-na/">réseaux locaux</a><br> <INPUT TYPE=checkbox NAME=comp VALUE="EST" checked>Serveurs Internet</p><p>Définit un groupe de quatre carrés. Les deuxième et quatrième cases sont initialement marquées. Si l'utilisateur n'apporte aucune modification, deux variables seront transmises au gestionnaire : comp=WS et comp=IS .</p><p><i>TYPE = caché</i></p><p>Définit un élément de données masqué qui n'est pas visible par l'utilisateur lors du remplissage du formulaire et est transmis au gestionnaire sans changement. Il est parfois utile d'avoir un tel élément sur un formulaire qui est repensé de temps en temps afin que le gestionnaire sache quelle version du formulaire il traite. Vous pouvez facilement imaginer vous-même d’autres utilisations possibles.</p><h3>Exemple:</h3> <p><INPUT TYPE=hidden NAME=version VALUE="1.1"></p><p>Définit une variable de version masquée qui est transmise au gestionnaire avec la valeur 1.1.</p><p><i>TYPE = réinitialiser</i></p><p>Définit un bouton qui, lorsqu'on clique dessus, renvoie le formulaire HTML à <a href="https://wisemotors.ru/fr/phones/vernut-vindovs-10-v-ishodnoe-sostoyanie-oshibka-chto-znachit-vernut-kompyuter/">l'état initial</a>. Puisqu'aucune donnée n'est transmise au gestionnaire lors de l'utilisation de ce bouton, un bouton de réinitialisation peut ne pas avoir d'attribut de nom.</p><h3>Exemple:</h3> <p><INPUT TYPE=reset VALUE="Effacer les champs du formulaire"></p><p>Définit un bouton Effacer les champs du formulaire qui, lorsque vous cliquez dessus, ramène le formulaire HTML à son état d'origine.</p><p>Outre les éléments <INPUT>, les formulaires HTML peuvent contenir des menus <SELECT>et champs de saisie de texte <TEXTAREA> .</p> <p>Menu <SELECT>de n éléments ressemble à ceci :</p><p> <SELECT NAME="[имя]"> <OPTION VALUE="[valeur 1]">[texte 1] <OPTION VALUE="[valeur 2]">[texte 2]... <OPTION VALUE="[valeur n]">[texte n]</SELECT> </p><p>Comme vous pouvez le voir, le menu commence par la balise <SELECT>et se termine par la balise</SELECT>. Étiqueter <SELECT>contient un attribut NAME obligatoire qui spécifie le nom de la variable générée par le menu.</p> <p>Étiqueter <SELECT>peut également contenir un attribut MULTIPLE, dont la présence indique que plusieurs éléments peuvent être sélectionnés dans le menu. La plupart des navigateurs affichent un menu <SELECT MULTIPLE>sous la forme d'une fenêtre dans laquelle se trouvent les éléments de menu (la hauteur de la fenêtre en lignes peut être définie avec l'attribut SIZE=[number]). Menu <SELECT>dans la plupart des cas, il s'affiche sous forme de menu déroulant.</p> <p>Étiqueter <OPTION>définit un élément de menu. L'attribut VALUE requis définit la valeur qui sera transmise au gestionnaire si cet élément de menu est sélectionné. Étiqueter <OPTION>peut inclure un attribut vérifié indiquant que l'élément est vérifié par défaut.</p> <h3>Regardons un petit exemple :</h3> <SELECT NAME="selection"> <OPTION VALUE="Option 1" checked>Option 1 <OPTION VALUE="Option 2">Option 2 <OPTION VALUE="option3">Option 3</SELECT> <p>Ce fragment définit un menu de trois éléments : Option 1, Option 2 et Option 3. Par défaut, l'élément Option 1 est sélectionné. Le gestionnaire recevra une variable de sélection dont la valeur peut être option1 (par défaut), option2 ou option3.</p> <p>Après tout ce que nous avons déjà appris, l'élément <TEXTAREA>peut paraître assez simple. Par exemple:</p><p> <TEXTAREA NAME=address ROWS=5 COLS=50>Et voici votre adresse...

Tous les attributs sont requis. L'attribut NAME définit le nom sous lequel le contenu de la fenêtre sera transféré au gestionnaire (dans l'exemple - adresse). L'attribut ROWS définit la hauteur de la fenêtre en lignes (5 dans l'exemple). L'attribut COLS définit la largeur de la fenêtre en caractères (50 dans l'exemple).

Texte placé entre les balises Et, représente le contenu par défaut de la fenêtre. L'utilisateur peut le modifier ou simplement l'effacer.

Il est important de savoir que les lettres russes sont dans la fenêtre lorsqu'ils sont transmis à un gestionnaire, ils peuvent être convertis en objets de caractère correspondants.</p> <h3>Exemple:</h3> <p>Pour démontrer l'utilisation des formulaires HTML, j'ai écrit un petit programme en PHP, qui se trouve à l'adresse :</p><p>Http://206.31.82.215/hp/nc/fd-win.pht</p><p>Les données sources seront transférées vers ce programme par le formulaire décrit dans l'exemple 12 :</p><p> <HTML> <HEAD> <TITLE>Exemple 12</TITLE> </HEAD> <H1>Forme un peu plus complexe</H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Parle-nous un peu de toi...</H2> <P>Il n’est pas nécessaire de fournir des informations authentiques. À des fins de démonstration, les modèles fictifs conviennent également parfaitement.</P> <P>Nom: <INPUT TYPE=text SIZE=40 NAME=fn><BR>Nom de famille: <INPUT TYPE=text SIZE=40 NAME=ln><BR>Sol: <INPUT TYPE=radio NAME=gender VALUE="mâle" checked>mâle <INPUT TYPE=radio NAME=gender VALUE="femelle">femelle <BR>Âge: <INPUT TYPE=text SIZE=5 NAME=age>années <BR> <INPUT TYPE=submit VALUE="Exécuter le gestionnaire"></P> </FORM> </BODY> </HTML> </p><p>Remplissez le formulaire HTML, cliquez sur le bouton et voyez ce qui se passe...</p> <p><b>Petite astuce <br>ou comment envoyer le formulaire par mail</b></p><p>Tout cela est bien, diront les sceptiques, mais pourquoi diable les gens ont-ils besoin de formulaires HTML qui n'ont rien pour les traiter ? C’est en partie vrai, mais seulement en partie.</p> <p>HTML met à votre disposition un mécanisme assez puissant pour envoyer le contenu d'un formulaire via <a href="https://wisemotors.ru/fr/wrote/pravila-polzovaniya-korporativnoi-elektronnoi-pochtoi-pravila-raboty/">e-mail</a>. Voici à quoi cela ressemble en pratique.</p> <p>Disons que nous avons légèrement modifié l'exemple 12. Au lieu de la chaîne</p><p> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> </p><p>nous sommes entrés dans la file</p><p> <FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain> </p><p>Veuillez noter que nous avons modifié l'algorithme d'encodage en text/plain , c'est-à-dire que nous avons complètement désactivé l'encodage.</p> <p>Supposons maintenant que l'utilisateur ait indiqué le prénom Ivan, le nom Petrov, le sexe masculin et l'âge de 22 ans. Maintenant, la question est : que se passe-t-il si l’utilisateur clique sur le bouton Exécuter le gestionnaire ?</p> <p>La réponse est simple. Le message suivant sera automatiquement envoyé à user@mail.box par email :</p><p>Fn=Ivan ln=Petrov sexe=homme âge=22</p><p>Malheureusement, tous les utilisateurs ne pourront pas utiliser ce formulaire HTML. Le fait est que tout le travail de rédaction d’un message et de lancement d’un programme de messagerie pour l’envoyer est en réalité pris en charge par le navigateur de l’utilisateur. Cela signifie que la configuration de l'accès Internet de l'utilisateur doit assurer le fonctionnement simultané du Hypertext Transfer Protocol et du Outgoing Mail Delivery Protocol. Ce n'est pas toujours possible. Cependant, même si cela est impossible, rien de fatal ne se produira. Le navigateur affichera simplement un message d'erreur.</p> <table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <br><p>Les formulaires en HTML sont les plus complexes, mais d'un autre côté, peut-être les plus <a href="https://wisemotors.ru/fr/research/the-most-interesting-topics-are-translated-in-physics-extracurricular-event-this-entertaining-physics/">sujet intéressant</a> en HTML.</p> <p>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.</p> <p>Un exemple de formulaire pourrait être un livre d'or, un questionnaire, <a href="https://wisemotors.ru/fr/topics/matematicheskie-osnovy-informatiki-kontrolnyi-test-po-informatike-na-temu/">test en ligne</a>. Les formulaires sont remplis lors de l'inscription sur le site, lors de la passation de commandes dans une boutique en ligne, etc.</p> <p>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.</p> <p>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. Ces programmes sont généralement écrits en PHP ou JavaScript.</p> <h4>Attributs du formulaire - balise <form></h4> <p>Il peut y avoir plusieurs formulaires sur une page Web ( <i>autant que le développeur en a besoin</i>). Chacun d'eux commence par le tag <form>et se termine par une balise de fermeture</form> .</p> <p>L'attribut action est obligatoire pour tout formulaire - il spécifie l'adresse du fichier qui sert le formulaire ( <i>traite les données qui y sont saisies</i>).</p> <p>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 <a href="https://wisemotors.ru/fr/iron/nabor-dannyh-interfeisa-set-sozdanie-metodov-get-i-set-get-i-set-metody/">Méthodes OBTENIR</a> et POST fait référence aux langages informatiques ( <i>par exemple PHP</i>). Il suffit de savoir quelle est exactement la méthode de transfert <a href="https://wisemotors.ru/fr/research/bezrassudnyi-validation-php-klass-validator-dlya-validacii-post-dannyh-nekorrektnaya-informaciya/">Données POST</a> dans la plupart des cas, il est utilisé dans des formulaires.</p> <p>Attribut de nom de balise <form>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.</p> <p>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é ( <i>dans une fenêtre nouvelle ou actuelle</i>).</p> <p>Mais le tag lui-même <form>cela n'a aucun sens, car le formulaire transmet des données qui doivent d'abord être saisies quelque part !</p> <h4>Entrée de données. Champs de formulaire - balise <input></h4> <p>Étiqueter <input>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.</p> <p>le type est l'attribut principal de la balise <input>. Il définit le type de champ ( <i>élément</i>) formes:</p> <table width="100%" border="1"><tr><td width="300px"> <p>Type de valeur d'attribut="..."</p> </td> <td width="245px"> <p>Résultat</p> </td> <td> <p>Description</p> </td> </tr><tr><td> <p><input type="text" size="20" value="Votre nom..." ></p> </td> <td align="center"> </td> <td><p>Champ de texte sur une seule ligne pour saisir du texte. L'attribut size spécifie la largeur du champ en caractères.</p> </td> </tr><tr><td><p><input type="password" maxlength="10" size="20" ></p> </td> <td align="center"> </td> <td><p>Champ de texte pour saisir un mot de passe. <br>L'attribut maxlength définit le nombre maximum de caractères pouvant être saisis</p> </td> </tr><tr><td><p><input type="radio" name="radio" value="1" checked></p> <p><input type="radio" name="radio" value="2" ></p> <p><input type="radio" name="radio" value="3" ></p> </td> <td align="center"> </td> <td><p>Changer. <br>Vous ne pouvez sélectionner qu’une seule option parmi celles proposées. L'attribut vérifié spécifie un champ pré-vérifié.</p> </td> </tr><tr><td><p><input type="checkbox" name="flag" value="1" checked></p> <p><input type="checkbox" name="flag" value="2" ></p> <p><input type="checkbox" name="flag" value="3" ></p> </td> <td align="center"> </td> <td><p>Case à cocher. <br>Il existe plusieurs options parmi lesquelles choisir.</span> Attribut <span>vérifié définit un champ pré-vérifié.</p> </td> </tr><tr><td><p><input type="button" value="Bouton" ></p> </td> <td align="center"> </td> <td><p>Bouton. <br>L'attribut value définit l'étiquette du bouton.</p> </td> </tr><tr><td><p><input type="reset" value="Réinitialiser" ></p> </td> <td align="center"> </td> <td><p>Bouton de réinitialisation. <br>Renvoie les champs du formulaire à leur forme d'origine. Réinitialiser les données saisies.</p> </td> </tr><tr><td><p><input type="submit" ></p> </td> <td align="center"> </td> <td><p>Bouton pour envoyer les données saisies.</p> </td> </tr><tr><td><p><input type="file" ></p> </td> <td align="center"> </td> <td><p>Champ de saisie du nom du fichier à envoyer.</p> </td> </tr><tr><td><p><input type="image" src="img/buttom.gif" ></p> </td> <td align="center"> </td> <td><p>Image du bouton. <br>Il est également utilisé pour envoyer des données au serveur. L'attribut src spécifie l'adresse du fichier image.</p> </td> </tr><tr><td><p><input type="hidden" size="20" ></p> </td> <td align="center"> </td> <td><p>Champ caché - invisible pour l'utilisateur.</p> </td> </tr></table><h3>Liste déroulante - Balises <select>Et <option></h3> <p>Étiqueter <select>identique à l'étiquette <input>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.</p> <p>Le type de liste créée dépend de la valeur de l'attribut size : with size= "1" ( <i>valeur par défaut</i>) la liste sera déroulante.</p> <p>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 ( <i>s'il y en a</i>), vous devez utiliser la barre de défilement verticale, qui est ajoutée automatiquement.</p> <p>Par défaut, un seul élément de liste peut être sélectionné. Ajout de l'attribut multiple à une balise <select>vous permet de sélectionner plusieurs éléments de liste à l'aide de la souris et des touches Ctrl et Shift.</p> <p>Si l'attribut multiple est présent, tout ou partie des éléments de la liste seront affichés ( <i>selon le navigateur</i>) si l'attribut size n'est pas défini sur un certain nombre d'éléments visibles.</p> <p>L'élément obligatoire de la liste déroulante est la balise <option>. Il est situé à l'intérieur de la balise <select>et crée chaque élément de la liste.</p> <p>Utiliser l'attribut name de la balise <select>la liste reçoit un nom, et en utilisant l'attribut value de la balise <option>l'élément de liste se voit attribuer une valeur. Ainsi, un couple « nom=valeur » est envoyé au serveur - le nom de la liste et la valeur du ou des éléments sélectionnés.</p> <p>Attribut sélectionné d'une balise <option>définit un élément de liste précédemment sélectionné et l'attribut désactivé bloque l'élément de liste - il ne peut pas être sélectionné.</p> <p><img src='https://i0.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><form> <br><p>La direction cardinale est l'une des quatre directions principales :</p> <br> <select name= "storona" > <br> <option value= "Nord" >Nord</option><br> <option value= "Sud" >Sud</option><br> <option value= "Ouest" >Ouest</option><br> <option value= "Est" >Est</option> <br> </select><br><p>7 merveilles du monde!</p> <br> <select name= "chudo" size= "4" multiple> <br> <option value= "1" >La Pyramide de Khéops</option><br> <option value= "2" selected> <span>Jardins suspendus de Babylone</span> </option><br> <option value= "3" disabled> <span>Statue de Zeus à Olympie</span> </option><br> <option value= "4" > <span>Temple d'Artémis à Éphèse</span> </option><br> <option value= "5" > <span>mausolée d'Halicarnasse</span> </option><br> <option value= "6" > <span>Le colosse de Rhodes</span> </option><br> <option value= "7" > <span>Phare d'Alexandrie</span> </option><br> </select><br><p> <input type= "reset" value= "Réinitialiser" > </p> <br> </form> </p> <p><img src='https://i1.wp.com/webpupil.ru/img/java/java_result.jpg' height="61" width="200" loading=lazy loading=lazy></p> <h3>Champ de texte multiligne - balise <textarea></h3> <p>Étiqueter <textarea>crée un champ de texte multiligne. Il est permis d'effectuer des sauts de ligne qui sont conservés lors de la transmission des données au gestionnaire.</p> <p>Attribut de nom de balise <textarea>est obligatoire - en l'utilisant, le champ de texte reçoit un nom.</p> <p>L'attribut désactivé désactive le champ - le contenu du champ ne peut pas être modifié et il n'est pas accessible. L'attribut readonly indique que le champ est en lecture seule - l'utilisateur n'a pas la possibilité de modifier le contenu, mais il est disponible - il peut être sélectionné et, par exemple, copié.</p> <p>Vous pouvez définir la largeur du champ de texte en caractères et la hauteur du champ en lignes en utilisant respectivement les attributs cols et rows.</p> <p><img src='https://i0.wp.com/webpupil.ru/img/java/java_example.jpg' height="68" width="200" loading=lazy loading=lazy></p> <p><p> <textarea name= "text" cols= "40" rows= "5" readonly> <span>Si le contenu du champ dépasse sa taille, un curseur apparaîtra.</span>

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 :