Créer et travailler avec des formulaires en HTML. Création de formulaires HTML Regardons un petit exemple

Compte tenu des balises HTML de base, nous ne pouvons nous empêcher d'aborder un élément aussi important que les formulaires. Des commentaires sont souvent nécessaires sur les pages Web. Par exemple, remplissage d'un formulaire sur le site, inscription, autorisation, commentaires, etc. Dans tous ces cas, l'utilisateur remplit des zones spéciales (champs de formulaire) sur la page, après quoi les données sont envoyées au serveur. Les formulaires sont utilisés pour créer des commentaires. Un formulaire est un fragment d'un document HTML destiné à la saisie de l'utilisateur.

La figure montre un formulaire d'inscription d'étudiant sur le site Web d'un établissement d'enseignement.

Un conteneur est utilisé pour créer un formulaire

avec l'attribut action, qui précise la page du serveur qui traitera les données envoyées par le formulaire.

La structure dans sa forme la plus simple :

éléments de formulaire...

Chaque formulaire doit également avoir un bouton de soumission pour soumettre les données après avoir rempli le formulaire.

Structure des boutons :

Ainsi, pour enregistrer presque tous les éléments du formulaire, la balise est utilisée avec l'attribut type. Pour créer un bouton qui réinitialise toutes les données des formulaires, la structure suivante est utilisée :

Pour créer un champ de texte, il existe un paramètre texte. Les paramètres suivants sont utilisés : name – nom du champ ; taille – pour le champ en symboles ; maxlength – le nombre maximum possible de caractères dans le champ ; valeur – informations affichées dans le formulaire par défaut

Exemple de saisie de formulaire avec deux champs de texte :

Le résultat du formulaire est présenté dans la figure.

Si vous devez saisir une grande quantité d'informations dans un champ de texte, par exemple un commentaire, utilisez le formulaire de zone de texte, créé à l'aide d'une balise. avec les attributs suivants : nom – nom de la zone ; cols – nombre de colonnes de zone ; lignes – nombre de lignes ; wrap – méthode d'enroulement des lignes (on – envelopper les lignes, off – ne pas envelopper les lignes).</p><p>Au code ci-dessus ajoutons un champ de zone de texte :</p><p>Un commentaire: <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

Le résultat du code travaillant avec la zone de texte est affiché dans la figure.

L'élément suivant des formulaires sont des listes qui vous permettent de faire un choix parmi l'ensemble de valeurs présenté. Les balises vous permettent de créer un formulaire de liste

Pour que l'élément soit mis en surbrillance au chargement de la page, il faut qu'il soit dans la balise

Une méthode de sélection similaire consiste à utiliser les éléments de formulaire de case à cocher et de bouton radio. La différence entre ces éléments est qu'une case à cocher vous permet d'effectuer plusieurs sélections, tandis qu'un bouton radio n'autorise qu'une seule sélection.

Structure d'une case à cocher et d'une entrée de bouton radio :

texte

Bouton radio:

texte

Dans les éléments spécifiés dans la structure, l'attribut coché est utilisé par défaut pour mettre en surbrillance la case à cocher et le bouton radio. Un exemple d'utilisation d'une case à cocher, d'un bouton radio et d'un code HTML est présenté dans la figure.

Un autre élément du formulaire est un bouton, spécifié à l'aide de l'attribut de balise type. avec le bouton valeur :

Dans le code spécifié pour créer un bouton, il existe un paramètre onclick, qui spécifie généralement du code dans un langage de programmation pour effectuer une action particulière lorsque ce bouton est cliqué :

Pour afficher un message dans une fenêtre spéciale, utilisez la commande JavaScript – alert. Le résultat de l'exemple est présenté dans la figure.

Pour insérer une image dans un bouton, utilisez le code présenté dans l'exemple suivant :

Lors de l'inscription et de la connexion à des sites Web, un champ avec un test caché est utilisé, affiché sous forme d'étoiles. Voici l'élément du formulaire de mot de passe :

L'inscription sur le site est souvent divisée en plusieurs pages et chacune des suivantes doit contenir des informations de la précédente. Afin de masquer les informations transmises, l'élément de formulaire masqué est utilisé :

L'élément de formulaire masqué sera invisible dans la fenêtre du navigateur.

Pour télécharger des fichiers sur le serveur, les formulaires comportent un élément file. Un exemple de code pour télécharger des fichiers sur le serveur est présenté ci-dessous :

Ainsi, dans cette rubrique, nous avons examiné les éléments de formulaire permettant de créer diverses pages HTML qui, avec les gestionnaires de script sur un ordinateur ou un serveur, vous permettent de développer des applications Web à part entière.

Balises HTML qui définissent les formulaires HTML sur le site

Nous créons des sites Web et des pages individuelles sur Internet pour communiquer avec les visiteurs.

Formulaires HTML sont utilisés pour enregistrer les visiteurs sur le site, pour des enquêtes interactives et des votes, pour envoyer des messages, effectuer des achats, etc. HTML Le formulaire est créé dans un seul but : collecter puis transmettre des informations pour traitement par un script logiciel ou par courrier électronique.

Exemple de formulaire HTML | Entrez sur le site

Balises, attributs et valeurs

- déterminer la forme.
name="" - définit le nom du formulaire.
method="" - définit la méthode d'envoi des données depuis le formulaire. Valeurs : "get" (par défaut) et "post" . La méthode « post » est souvent utilisée, car elle permet de transférer de grandes quantités de données.
action="" - définit l'URL à laquelle les données sont envoyées pour traitement. Dans notre cas - enter_data.php ..
- définir des éléments de formulaire tels que des boutons, des commutateurs, des champs de texte pour la saisie de données.
type="text" - définit un champ de texte pour la saisie des données.
type="password" - définit un champ pour saisir un mot de passe, avec le texte affiché sous forme d'astérisques ou de cercles.
type="checkbox" - définit un bouton radio.
type="hidden" - définit un élément de formulaire masqué - utilisé pour transférer des informations supplémentaires au serveur.
size="25" - longueur du champ de texte en caractères.
maxlength="30" - le nombre maximum autorisé de caractères saisis.
value="" - définit la valeur qui sera envoyée pour traitement si elle concerne des boutons radio ou des commutateurs. La valeur de cet attribut dans le cadre d'un champ de texte ou d'un bouton sera affichée comme, par exemple, Vasya ou Login dans l'exemple ci-dessus.

Exemple de formulaire HTML | Commentaires sur le site

Exemple de formulaire HTML

Balises, attributs et valeurs

action="http://site/comments.php" - définit l'url à laquelle les données du formulaire seront envoyées.
id="" - définit le nom et l'identifiant de l'élément de formulaire.
name="" - définit le nom de l'élément de formulaire.
- définir un champ de texte dans le cadre du formulaire.
cols="" - détermine le nombre de colonnes du champ de texte du formulaire.
rows="" - définit le nombre de lignes du champ de texte du formulaire.

Si entre placez du texte, il sera affiché à l'intérieur du champ à titre d'exemple qui peut être facilement supprimé.

Exemple de formulaire HTML | La liste déroulante

Formulaires HTML

Balises, attributs et valeurs

- définir une liste de postes à sélectionner.
size="" - détermine le nombre de positions visibles dans la liste. Si la valeur est 1 , nous avons affaire à une liste déroulante.
- déterminer les positions (éléments) de la liste.
value="" - contient la valeur qui sera envoyée par le formulaire à l'URL spécifiée pour traitement.
selected="selected" - met en surbrillance un élément de liste à titre d'exemple.

Exemple de formulaire HTML | Liste avec barre de défilement

En augmentant la valeur de l'attribut size="", on obtient une liste avec une barre de défilement :

Formulaires HTML

Pour cette option, utilisez le flag multiple="multiple", qui permet de sélectionner plusieurs positions. Son absence permet de sélectionner un seul élément.

type="submit" - définit un bouton.

type="reset" - définit un bouton de réinitialisation.

value="" - définit l'étiquette sur le bouton.

Voir également :

Bonjour, fans du développement web et ceux qui souhaitent créer leur propre site web. Avant cela, toutes mes publications étaient consacrées aux éléments de base du langage, aux manières de créer divers objets de contenu, à leur formatage, leur structuration, etc. Après avoir maîtrisé les sujets précédents, vous pouvez déjà créer un assez bon site Web. Cependant, il serait incomplet sans le sujet d’aujourd’hui : « Création de formulaires en HTML ».

Cette section de la langue est très importante. Par conséquent, portez une attention particulière à son étude, sinon la ressource Web que vous avez créée ne sera pas mise en production. Ainsi, après avoir lu l'article, vous apprendrez pourquoi vous devez utiliser des formulaires, quelles balises ils sont utilisés pour créer, et vous pourrez également essayer des exemples spécifiques dans la pratique. Commençons!

Qu'est-ce qu'un formulaire et comment fonctionne-t-il ?

Formulaire– c'est l'un des objets les plus importants, destiné à l'échange de données d'information entre le serveur et l'utilisateur.

En termes simples, si vous souhaitez créer une boutique en ligne avec la possibilité de commander des produits sur le site Web, de demander une inscription sur une ressource Web et de travailler avec des comptes, ou de fournir aux clients les commentaires des chefs d'entreprise, vous ne pouvez pas vous passer de formulaires.

Le formulaire est spécifié à l'aide d'un élément spécial du langage HTML
.

Notez que le document de code peut contenir plusieurs déclarations de balises , cependant, une seule requête peut être envoyée au serveur pour traiter les données. C'est pourquoi les informations saisies par l'utilisateur dans les champs prévus à cet effet et relatives aux différents formulaires ne doivent pas être dépendantes. De plus, il n’est pas permis d’emboîter les formes les unes dans les autres.

Pour ceux qui sont impatients et désireux de jeter un coup d'œil rapide à la représentation du code, j'ai joint un exemple simple d'utilisation d'un panneau avec un champ de texte pour un mot de passe avec un bouton :

1 2 3 4 5 6 7 8 9 10 11 12

Exemple

Il n'est peut-être pas très clair maintenant quoi et comment interagit dans ce petit programme, mais je vous garantis qu'après avoir lu l'intégralité de l'article, vous pourrez créer des applications beaucoup plus complexes.

Envoi de données côté serveur

Afin d'envoyer les informations saisies (ou sélectionnées) dans une boîte de dialogue, vous devez utiliser le mécanisme standard - Bouton de soumission.

Le code d'une telle méthode ressemble à ceci :

Lorsque vous exécutez la ligne présentée, un bouton apparaîtra avec l'inscription : « Soumettre ».

Une autre façon d'envoyer des données côté serveur consiste à appuyer sur la touche Entrée dans la boîte de dialogue.

Après avoir confirmé l'envoi des informations spécifiées, celles-ci n'arrivent pas immédiatement sur le serveur. Tout d’abord, il est traité par le navigateur, ce qui donne la forme « nom=valeur ».

Le paramètre d'attribut est responsable du nom taperétiqueter , et pour la valeur - les données saisies par l'utilisateur. Ensuite, la chaîne convertie est transmise au gestionnaire, qui est le plus souvent spécifié dans l'attribut actionélément

Le paramètre action lui-même n’est pas obligatoire et, dans certains cas, il n’est pas nécessaire du tout. Par exemple, si une page de site est écrite en php ou js, le traitement s'effectue sur la page actuelle et les liens ne sont pas nécessaires.

Pour une meilleure compréhension de l’ensemble du fonctionnement du site, je voudrais ajouter que sur le serveur, les données sont traitées dans d’autres langages. Ainsi, sont considérés comme langages côté serveur : Python, php, les langages de type C (C#, C, etc.), Java et autres.

Maintenant, je voudrais m'arrêter et parler davantage de l'élément . Pour l'expliquer en termes simples, alors nécessaire pour créer des champs de texte, des boutons radio, divers boutons, des champs cachés, des cases à cocher et d'autres objets.

Il n'est pas nécessaire que la balise soit associée à , cependant, si vous devez traiter des enregistrements d'utilisateurs ou les saisir, par exemple, dans une base de données, vous ne pouvez pas vous passer d'un conteneur.

Les principaux attributs de cet élément de langage de balisage hypertexte sont :

Texte– crée un champ de texte ;
Soumettre– crée un bouton pour envoyer des données au serveur ;
Image– est responsable du bouton avec l'image ;
Réinitialiser– définit un bouton pour effacer le formulaire ;
Mot de passe– définit un champ de texte spécifiquement pour les mots de passe ;
Case à cocher– responsable des champs avec des cases à cocher ;
Radio– responsable des champs avec la sélection d’un élément ;
Bouton– crée un bouton ;
Caché– utilisé pour les champs cachés ;
Déposer– définit le champ responsable de l’envoi des fichiers.

Méthodes de transmission d'informations

Il existe 2 manières de transférer les données utilisateur vers le serveur : Obtenir Et Poste. Ces méthodes effectuent la même action, mais elles diffèrent considérablement les unes des autres. Par conséquent, avant de mentionner l’un d’entre eux, familiarisons-nous avec leurs caractéristiques.

	Poste	Obtenir
Taille des documents transmis	Limité au côté serveur.	Maximum – 4 Ko.
Comment les informations envoyées sont affichées	Disponible uniquement lorsqu'il est visualisé via des extensions de navigateur ou d'autres produits logiciels spéciaux.	Immédiatement accessible à tous.
Utiliser des signets	Il n'y a aucun moyen d'ajouter des favoris, puisque les demandes ne sont pas répétées (toutes les pages renvoient à une seule adresse).	Toute page contenant une demande peut être enregistrée sous forme de signets et y revenir ultérieurement.
Mise en cache	Sur la base du paragraphe précédent, toutes les demandes figurent sur une seule page.	Chaque page peut être mise en cache séparément.
But	Utilisé pour envoyer des fichiers volumineux (livres, images, vidéos, etc.), des messages, des commentaires.	Idéal pour rechercher les valeurs demandées sur une ressource Web ou pour envoyer de courts messages texte.

Afin d'indiquer laquelle des deux méthodes de transfert de données le navigateur doit utiliser, dans l'élément utiliser le paramètre fourni méthode(Par exemple, méthode="post").

Regardons le deuxième exemple. Créons un formulaire dans lequel vous devez saisir vos données personnelles (nom et prénom, date de naissance) et créer un mot de passe. Ensuite on envoie tout ça au serveur en utilisant la méthode Poste.

Méthode POST

Entrez vos informations personnelles!

Par exemple, pour saisir une date, il existe des commutateurs pour le numéro de chaque paramètre (jour, mois et année), ainsi qu'un panneau déroulant avec le calendrier lui-même pour plus de commodité.

Création d'un panneau d'inscription

Les balises et attributs de base ont été couverts. C'est pourquoi il est temps de créer un formulaire d'inscription à part entière en utilisant un balisage de style CSS et en validant les données saisies. Bien sûr, nous ne pourrons pas voir le serveur fonctionner avec eux, mais nous fournirons la conception et les détails importants.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

Inscription

Je vous conseille d'enregistrer ce code de programme dans un document avec l'extension .html et l'encodage utf-8, et d'ouvrir ce dernier dans une fenêtre de navigateur. Vous verrez un panneau d'inscription dans toute sa splendeur avec des champs pour saisir votre prénom, votre nom, votre e-mail et votre mot de passe répété. Notez que lorsque vous lancez la page, le curseur est immédiatement positionné dans le premier champ de texte. Cette technique est obtenue grâce à l'attribut mise au point automatique.

Les formulaires HTML sont 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 blocs logiques à l'aide de 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://i0.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>Riz. 1. Regroupement des 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://i1.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://i1.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Riz. 2. Apparence du formulaire 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; outline: none; margin: 0; width: 100%; padding: 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 : majuscules; ) /********************* 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>L'apparence d'un formulaire HTML peut être grandement améliorée en utilisant CSS :</p> <h2>Styliser le champ de saisie</h2><p>Utilisez la propriété width pour déterminer la largeur du champ de saisie :</p> <input type="text" id="fname2" name="firstname" style="width:100%;"><p>L'exemple ci-dessus s'applique à tous <input>éléments. Si vous souhaitez styliser un type d'entrée spécifique, vous pouvez utiliser des sélecteurs d'attribut :</p><ul><li>saisie - sélectionnera uniquement les champs de texte</li><li>saisie - sélectionnera uniquement les champs de mot de passe</li><li>entrée - sélectionnera uniquement le numéro de champ</li><li>etc..</li> </ul><h2>Entrées pavées</h2><p>Utilisez la propriété padding pour ajouter de l'espace dans un champ de texte.</p><p><b>Conseil:</b> Si vous avez beaucoup d'entrées les unes après les autres, vous pouvez également ajouter une marge pour ajouter plus d'espace en dehors d'elles :</p> <input type="text" id="fname3" name="firstname" class="input1"><input type="text" id="lname3" name="lastname" class="input1"><h2>Entrées aux frontières</h2><p>Utilisez la propriété border pour modifier la taille et la couleur de la bordure, et utilisez la propriété border-radius pour ajouter des coins arrondis :</p> <input type="text" id="fname4" name="firstname" class="inputborder"><p>Si vous souhaitez uniquement une bordure inférieure, utilisez la propriété border-bottom :</p> <input type="text" id="fname7" name="firstname" class="inputborder2"><h2>Entrées colorées</h2><p>Utilisez la propriété background-color pour ajouter une couleur d'arrière-plan à l'entrée et la propriété color pour modifier la couleur du texte :</p><input type="text" value="John" name="firstname" class="inputcolor"><h2>Entrées ciblées</h2><p>Par défaut, certains navigateurs ajoutent un contour bleu autour d'une entrée lorsqu'elle reçoit le focus (cliqué dessus). Vous pouvez supprimer ce comportement en ajoutant outline: none; à l'entrée.</p><p>Utilisez le sélecteur :focus pour faire quelque chose avec le champ de saisie lorsqu'il reçoit le focus :</p> <h2>Saisie à l'aide d'une icône/image</h2><p>Si vous voulez une icône à l'intérieur de l'entrée, utilisez la propriété background-image et placez-la avec la propriété background-position. Notez également que nous ajouterons un grand remplissage à gauche pour réserver de l'espace pour les icônes :</p><input type="text" name="search" placeholder="Recherche.." class="icon"><h3>exemple</h3><p>saisir( <br>couleur de fond : blanc ; <br>image d'arrière-plan : url("searchicon.png"); <br>position d'arrière-plan : 10px 10px ; <br>répétition d'arrière-plan : pas de répétition ; <br>remplissage à gauche : 40 px ; <br> }</p> Essayez-le vous-même " <h2>Entrée de recherche animée</h2><p>Dans cet exemple, nous utilisons la propriété de transition CSS3 pour animer la largeur du champ de recherche lorsqu'il reçoit le focus. Vous en apprendrez davantage sur la propriété de transition plus tard dans notre</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </article> <div class="post-share"> <div class="post-share__title">Avez-vous aimé l'article? Partagez-le</div> <script src="//yastatic.net/share/share.js"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="small" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir" data-yashareTheme="counter"></div> </div> <div style="text-align: center; margin-top: 10px; margin-bottom: 50px; " id="sovet-1558718318" data-cfpa="13825"><div style="clear: both; font:16px/44px 'Ubuntu', sans-serif; display:inline-block;"> </div></div><script type="text/javascript">;new advadsCfpAd( 13825 );</script> <div class='yarpp-related'> <div class="related-items"> <div class="headline">Nous vous recommandons des articles sur le sujet</div> <div class="items"> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/fr/setting/chto-delat-esli-sensornyi-telefon-upal-v-vodu-kak-vysushit-ego-na-bataree-v.html"><img src="/uploads/2c10a5576bb90ba0b62e86c466ee5f8c.jpg" width="200" height="200" alt="Est-ce possible et comment puis-je réparer moi-même un téléphone portable à écran tactile s'il tombe dans l'eau et ne fonctionne pas ?" class="item__image" / loading=lazy loading=lazy>Est-ce possible et comment puis-je réparer moi-même un téléphone portable à écran tactile s'il tombe dans l'eau et ne fonctionne pas ?</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/fr/tips/mts-kak-dobavit-kontakt-v-chernyi-spisok-chernyi-spisok-mts-blokiruem.html"><img src="/uploads/ff0643387fa54bdafd7989f94df74300.jpg" width="200" height="200" alt="Liste noire MTS - Blocage des numéros inutiles" class="item__image" / loading=lazy loading=lazy>Liste noire MTS - Blocage des numéros inutiles</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/fr/tp-link/chto-delat-esli-telefon-upal-v-vodu-kak-vysushit-sensornyi-telefon-esli-on-upal.html"><img src="/uploads/d1323ec87f326cd5986d9ac6cf653fb2.jpg" width="200" height="200" alt="Comment sécher un téléphone à écran tactile s'il tombe dans l'eau" class="item__image" / loading=lazy loading=lazy>Comment sécher un téléphone à écran tactile s'il tombe dans l'eau</a> <div class="item__comments"></div> </div> </div> </div> </div> </div> <div style="text-align: center; margin-top: 30px; margin-bottom: 30px; " id="sovet-1702503440" data-cfpa="18987"><style type="text/css"> .gadsense_slot_2{ display: inline-block; width: 746px; height: 300px;} @media (min-width:300px) { .gadsense_slot_2 { width: 300px; height: 300px; } } @media (min-width:800px) { .gadsense_slot_2 { width: 600px; height: 300px; } } @media (min-width:1024px) { .gadsense_slot_2 { width: 746px; height: 300px; } } </style> </div><script type="text/javascript">;new advadsCfpAd( 18987 );</script> </main> <aside class="sidebar"> <div class="subs"> <div class="subs-soc"> <div class="subs-soc-title">Rejoignez-nous sur les réseaux sociaux réseaux</div> <ul> <li><a href="https://www.facebook.com/sharer/sharer.php?u=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="fb">Facebook</a></li> <li><a href="https://www.twitter.com/share?url=https%3A%2F%2Fnewtravelers.ru%2Ffr%2Fiphoneipad%2Fsozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="twi">Twitter</a></li> <li><a href="https://vk.com/share.php?url=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="vk">En contact avec</a></li> <li><a href="https://connect.ok.ru/offer?url=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="ok">Camarades de classe</a></li> <li><a href="https://youtube.com/" target="_blank" class="yt">Youtube</a></li> </ul> </div> </div> <div class="section section--companies"> <div class="headline center">Matériaux populaires</div> <ul> <li><a href="https://newtravelers.ru/fr/bluetooth/kak-obnovlyat-windows-xp-posle-okonchaniya-podderzhki-ms.html" ><img src="/uploads/a71e254543180feb3d90aed246d24926.jpg" width="74" height="74" alt="Comment mettre à jour Windows XP après la fin du support MS" / loading=lazy loading=lazy><span>Comment mettre à jour Windows XP après la fin du support MS</span></a></li> <li><a href="https://newtravelers.ru/fr/android/kak-naiti-sohranennyi-dokument-vord-kak-naiti-nedavnie-dokumenty-v.html" ><img src="/uploads/d2157ebfb3fcb65534970c57a786544c.jpg" width="74" height="74" alt="Comment retrouver des documents récents sur votre ordinateur : trucs et astuces" / loading=lazy loading=lazy><span>Comment retrouver des documents récents sur votre ordinateur : trucs et astuces</span></a></li> <li><a href="https://newtravelers.ru/fr/tenda/besplatnaya-versiya-ammy-admin-skachat-besplatnye-programmy-skachat-i-ustanovit.html" ><img src="/uploads/1cec05a38f79cb1b868c3bef0d06e888.jpg" width="74" height="74" alt="Téléchargez des programmes gratuits Téléchargez et installez l'administrateur" / loading=lazy loading=lazy><span>Téléchargez des programmes gratuits Téléchargez et installez l'administrateur</span></a></li> <li><a href="https://newtravelers.ru/fr/useful/kak-ustanavlivaetsya-zhestkii-disk-kak-vstavit-disk-v-noutbuk.html" ><img src="/uploads/d674c920bb27635218bd2574aa707589.jpg" width="74" height="74" alt="Comment insérer un disque dans un ordinateur portable ?" / loading=lazy loading=lazy><span>Comment insérer un disque dans un ordinateur portable ?</span></a></li> <li><a href="https://newtravelers.ru/fr/the-lg-tvs/kakie-igry-stoit-poigrat-po-seti-luchshie-besplatnye-igry-na-vseh.html" ><img src="/uploads/9693f8354665e89c9b7884c46e28e5ff.jpg" width="74" height="74" alt="Les meilleurs jeux gratuits sur toutes les plateformes" / loading=lazy loading=lazy><span>Les meilleurs jeux gratuits sur toutes les plateformes</span></a></li> </ul> </div> <nav class="section section--calc"> <div class="headline center">Nouveau sur le site</div> <ul> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/fr/setting/uslovie-esli-v-eksele-kak-v-excel-pri-pomoshchi-vlozhennyh-funkcii.html">Comment calculer le bonus de vente à l'aide des fonctions if() imbriquées dans Excel</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/fr/problems/luchshie-kooperativnye-igry-dlya-sovmestnogo-prohozhdeniya.html">Connexion correcte des ordinateurs sur un réseau local Jeux sur un réseau local pour deux sur un PC</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/fr/setting/sozdanie-iso-iz-svoei-ustanovlennoi-sistemy-sozdanie-iso-obrazov-sozdanie.html">Création d'un iso à partir de votre système installé</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/fr/tp-link/skachat-dlya-android-6-versii-igru-nardy-dlinnye-nardy-nastolnaya.html">Backgammon - le jeu de société de tous les temps est désormais sur votre téléphone</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/fr/problems/besplatnye-fotoramki-onlain---krasivye-effekty-foto-luchshie.html">Meilleures applications de cadres photo Cadres photo sans inscription</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/fr/d-link/obzor-i-testirovanie-smartfona-nokia-xl-dual-sim-nokia-xl-naibolee-chastye.html">Nokia XL - les problèmes les plus courants et quelques moyens de les résoudre La communication entre les appareils sur les réseaux mobiles s'effectue à l'aide de technologies offrant différents taux de transfert de données</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/fr/setting/kakie-klaviatury-dlya-android-luchshe-vybiraem-luchshuyu-klaviaturu-dlya-telefona.html">Choisir le meilleur clavier pour un téléphone Android en russe Application de clavier russe pour Android</a></li> </ul> <div class="section--calc__all"> </div> </nav> </aside> </div> <div class="popular popular-in-cat"> <div class="headline center" id="stop_ads">Les visiteurs discutent actuellement</div> <div class="items"> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/fr/the-lg-tvs/chem-otkryt-fail-ai-faily-s-rasshireniem-ai-kak-i-chem-ih-otkryt-skachat-fail.html"><img src="/uploads/d17e6e159086d655e63353669ff3300a.jpg" width="200" height="200" alt="Comment ouvrir un fichier .AI ? Fichiers avec l'extension AI : comment et comment les ouvrir Télécharger le fichier ai" class="item__image" / loading=lazy loading=lazy>Comment ouvrir un fichier .AI ? Fichiers avec l'extension AI : comment et comment les ouvrir Télécharger le fichier ai</a> <a class="item__cat" href="https://newtravelers.ru/fr/category/the-lg-tvs/">Téléviseurs LG</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/fr/android/kak-konvertirovat-cr2-v-jpg-fail-onlain-sposoby-konvertacii-cr2-v-jpg-cr2-otkryt.html"><img src="/uploads/7ae9effc527a7026c7b59e240eafa291.jpg" width="200" height="200" alt="Façons de convertir CR2 en JPG Cr2 ouvertes en ligne" class="item__image" / loading=lazy loading=lazy>Façons de convertir CR2 en JPG Cr2 ouvertes en ligne</a> <a class="item__cat" href="https://newtravelers.ru/fr/category/android/">Android</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/fr/tenda/kak-zablokirovat-stranicu-na-kompyutere-kak-zablokirovat.html"><img src="/uploads/64f8aa0ac8d9c4c856542becac1e850d.jpg" width="200" height="200" alt="Comment bloquer VKontakte sur un ordinateur" class="item__image" / loading=lazy loading=lazy>Comment bloquer VKontakte sur un ordinateur</a> <a class="item__cat" href="https://newtravelers.ru/fr/category/tenda/">Tende</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/fr/iphoneipad/chem-otkryt-fail-pub-rasshirenie-pub---chem-otkryt-rasshirenie-pub-chem-otkryt.html"><img src="/uploads/a43901daecf33c6ece6c8c8a412f5452.jpg" width="200" height="200" alt="Comment ouvrir un fichier .PUB ? Extension PUB - comment l'ouvrir ? Extension de pub que d'ouvrir" class="item__image" / loading=lazy loading=lazy>Comment ouvrir un fichier .PUB ? Extension PUB - comment l'ouvrir ? Extension de pub que d'ouvrir</a> <a class="item__cat" href="https://newtravelers.ru/fr/category/iphoneipad/">iPhone/iPad</a> <div class="item__comments"></div> </div> </div> </div> </div> <footer class="footer"> <div class="footer__copyright"> <div class="footer__logo">newtravelers.ru</div> <p>© 2023 – newtravelers.ru</p> <p>Conseils pour configurer Android, routeurs, Smart TV. Bluetooth</p> </div> <nav class="footer__nav-1"><ul> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/fr/category/problems/">Problèmes</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/fr/category/android/">Android</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/fr/category/setting/">Paramètres</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/fr/category/error/">les erreurs</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/fr/category/setting/">Paramètres</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/fr/category/bluetooth/">Bluetooth</a></li> </ul></nav> <div class="footer__nav-2"> <nav><ul> <li class="menu-item type-post_type object-page "><a href="https://newtravelers.ru/fr/feedback.html">Contacts</a></li> <li class="menu-item type-post_type object-page "><a href="https://newtravelers.ru/fr/adverts.html">Publicité sur le projet</a></li> <li class="menu-item type-post_type object-page "><a href="https://newtravelers.ru/fr/sitemap.xml">Plan du site</a></li> <li class="menu-item type-post_type object-page "><a href="https://newtravelers.ru/fr/feedback.html">Droits d'auteur et règles</a></li> </ul></nav> <ul class="footer__soc"> <li><a href="https://vk.com/share.php?url=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="vk">En contact avec</a></li> <li><a href="https://connect.ok.ru/offer?url=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="ok">Camarades de classe</a></li> <li><a href="https://www.facebook.com/sharer/sharer.php?u=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="fb">Facebook</a></li> <li><a href="https://www.twitter.com/share?url=https%3A%2F%2Fnewtravelers.ru%2Ffr%2Fiphoneipad%2Fsozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="twi">Twitter</a></li> </ul> </div> <div class="footer-right"> <div class="footer__counters" id="text-6"> <div class="textwidget"><p></p> </div> </div> <div class="footer__orphus"> <div>Notre erreur sur le site ? Sélectionnez-le et appuyez sur Ctrl + Entrée</div> </div> </div> </footer> </div> </div> <script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script><script type='text/javascript' src='https://newtravelers.ru/wp-content/themes/sovet-ingenera_adapt/js/baron.min.js'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js'></script> <script type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/table-of-contents-plus/front.min.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "fixed-sidebar", "margin_top" : 0, "margin_bottom" : 0, "stop_id" : "stop_ads", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-7'] } ; </script> <script type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js'></script> <script type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/wp-featherlight/js/wpFeatherlight.pkgd.min.js'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js'></script> <script async="async" type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/akismet/_inc/form.js'></script> <script type="text/javascript">  </script><br> <br> </body> </html>

Créer et travailler avec des formulaires en HTML. Création de formulaires HTML Regardons un petit exemple

Exemple de formulaire HTML | Entrez sur le site

Exemple de formulaire HTML | Commentaires sur le site

Exemple de formulaire HTML | La liste déroulante

Exemple de formulaire HTML | Liste avec barre de défilement

Qu'est-ce qu'un formulaire et comment fonctionne-t-il ?

Envoi de données côté serveur

Méthodes de transmission d'informations

Création d'un panneau d'inscription

Pour un travail ultérieur correct dans notre service, veuillez saisir les données correctes !