Comment créer des formulaires html. Création de formulaires en HTML. Entrée de recherche animée

Formulaires HTML- éléments d'interface complexes. Ils comprennent différents éléments fonctionnels : champs de saisie et , listes <select>, conseils, etc. Tout le code du formulaire est inclus dans un élément <form> .</p> <p>La plupart des informations contenues dans les formulaires Web sont transmises à l'aide de l'élément <input>... L'élément est utilisé pour saisir une ligne de texte. <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 une étiquette et une marge. Si le champ est à l'intérieur de l'élément <label>, 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://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>Riz. 1. Regroupement des champs de formulaire</p><p>Pour rendre le formulaire plus lisible pour les utilisateurs, du texte est ajouté aux champs du formulaire qui contiennent un exemple des données d'entrée. Ce texte est appelé texte d'espace réservé et est créé à l'aide de l'attribut espace réservé.</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 a un attribut requis 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 le bouton d'envoi 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 de la zone de texte lorsqu'elle reçoit le 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 la marge de départ souhaitée pour les éléments <input>et <textarea>(un seul élément de chaque formulaire).</p> <h2>Un 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>enregistrement</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Nom</label> <input type="text" name="name" required> </div> <div class="radio">Étage <label> <input type="radio" name="sex" value="Masculin">Masculin <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">Le 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>Noter</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://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Riz. 2. <a href="https://newtravelers.ru/fr/useful/samsung-gelaksi-a-5-otzyvy-smartfon-samsung-galaxy-a5-2017-black-sm-a520f--.html">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. Nettoyons les styles et stylisons les éléments du formulaire.</p><p> Form-wrap (largeur : 550px ; background : # ffd500 ; border-radius : 20px ;) .form-wrap * (transition : .1s linear) .profile (width : 240px ; float : left ; text-align : center ; padding : 30px;) form (background: white; float: left; width: calc (100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: # 7b7b7b;) .form-wrap: after, form div: after (content: ""; display: table; clear: both;) form div (margin-bottom: 15px; position: relative;) h1 (font-size: 24px; font-weight: 400; position: relative ; margin-top: 50px;) h1: after (content: "\ f138"; font-size: 40px; font-family: FontAwesome; position: Absolute; top: 50px; left: 50%; transform: translateX (-50 %) ;) / ******************** styliser les éléments du formulaire ******************* * ** / étiquette, étendue (affichage : bloc ; taille de police : 14px ; marge inférieure : 8 px ;) entrée, entrée (largeur de bordure : 0 ; contour : aucun ; marge : 0 ; largeur : 100 % ; remplissage : 10px 15px; background: # e6e6e6;) input: focus, input: focus (box-sha dow : inset 0 0 0 2px rgba (0,0,0, .2) ; ) .radio label (position : relative ; padding-left : 50px ; curseur : pointeur ; largeur : 50 % ; float : left ; line-height : 40px ;) .radio input (position : absolue ; opacité : 0 ;) .radio -control (position : absolu ; haut : 0 ; gauche : 0 ; hauteur : 40px ; largeur : 40px ; arrière-plan : # e6e6e6 ; border-radius : 50 % ; text-align : center ;) .male : avant (contenu : " \ f222 "; font-family: FontAwesome; font-weight: bold;) .female: before (content:" \ f221 "; font-family: FontAwesome; font-weight: bold;) .radio label: hover input ~. radio-control, .radiol input: focus ~ .radio-control (box-shadow: inset 0 0 0 2px rgba (0,0,0, .2);) .radio-input: coché ~ .radio-control (couleur: red;) select (width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: # e6e6e6; color: # 7b7b7b; -webkit-appearance: none; / * décocher le webkit - navigateurs * / -moz-appearance : aucun ; / * décochez la case dans Mozilla Firefox * /) sélectionnez :: - ms-expand (affichage : aucun ; / * décochez la case dans IE * /) .select-arrow (position : absolue ; haut : 38px ; à droite : 15px ; largeur : 0 ; hauteur : 0 ; événements de pointeur : aucun ; / * activer l'affichage de la liste en cliquant sur la flèche * / border-style: solid; largeur de bordure : 8px 5px 0 5px ; border-color: # 7b7b7b transparent transparent transparent; ) bouton (padding : 10px 0 ; border-width : 0 ; display : block ; width : 120px; margin : 25px auto 0; background : # 60e6c5; color: white; font-size: 14px; outline: none; text-transform : majuscule;) / ************************** ajoute de l'adaptabilité à la forme ****************** ** ** / @media (max-width: 600px) (.form-wrap (margin: 20px auto; max-width: 550px; width: 100%;) .profile, form (float: none; width: 100% ;) h1 (marge-haut : auto ; remplissage-bas : 50px ;) form (border-radius : 0 0 20px 20px ;))</p><p><b>Le fichier form.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. =" Bcc: your_email "." \ r \ n "; if (! vide ($ nom) &&! vide ($ sexe) &&! vide ($ email) &&! vide ($ pays) && filter_var ($ email, FILTER_VALIDATE_EMAIL)) (mail ($ email, $ sujet, $ msg, $ en-têtes); echo "Merci ! Vous vous êtes inscrit avec succès.";)?></p><p><b>Noter</b><br>Dans la variable sujet $, spécifiez le texte qui sera affiché comme sujet de l'e-mail ; <br>Your_name - vous pouvez spécifier ici le nom qui sera affiché dans le champ "de qui la lettre" ; <br>url_votre_site, remplacez 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 une copie carbone invisible à votre adresse e-mail.</p> <p>Les formulaires représentent l'élément interactif le plus important <a href="https://newtravelers.ru/fr/android/html-formy-html-formy-kakoi-element-pozvolyaet-osushchestvit-otpravku-formy.html">Éléments HTML</a> permettant aux développeurs de pages d'interagir de manière interactive avec les visiteurs. Avec leur aide, l'utilisateur peut retourner des commentaires sur la visite d'un site particulier, transmettre des demandes ou s'inscrire. Le développeur pose des questions lors de la création du formulaire, et l'utilisateur y répond en le remplissant. Le contenu du formulaire est soit transmis au script CGI soit par <a href="https://newtravelers.ru/fr/setting/zhivoi-zhurnal-servis-onlain-dnevnikov-zhivoi-zhurnal-adres-elektronnoi.html">e-mail</a> envoyé au destinataire. Le processus de création d'un formulaire lui-même se compose de deux étapes. La première consiste à créer le formulaire lui-même et la seconde à créer un script CGI sur le serveur. Le formulaire est créé à l'aide de diverses balises et attributs, enfermés dans une paire <FORM></FORM>:</p> <p>Élément <FORM>est une condition préalable à toutes les formes. Il peut avoir les attributs suivants :</p> <p>method Cet attribut spécifie comment les données sont envoyées au script CGI. Ici, le protocole GET est sélectionné par défaut, mais dans la plupart des cas, les développeurs utilisent le protocole POST, qui permet de transférer de grandes quantités de données.</p> <p>action Cet attribut spécifie le chemin d'accès au script CGI ou à l'adresse e-mail.</p> <p>enctype Cet attribut spécifie comment le contenu du formulaire est codé. En d'autres termes, il indique au navigateur comment encoder les informations avant de les envoyer au serveur. La valeur par défaut est x-www-form-encoded.</p> <p>La syntaxe du formulaire de script est :</p> <p><FORM method="get" или "post" action="URL сценария" ></FORM></p> <p>Syntaxe du formulaire pour le courrier : <FORM method="get" или "post" action="mailto:адрес" ></FORM></p> <p>Élément <INPUT>est la base de tous les éléments de formulaire. Il sert à intégrer des boutons sur un formulaire, <a href="https://newtravelers.ru/fr/the-lg-tvs/ispolzuyutsya-dlya-sravneniya-neskolkih-velichin-diagramma-eto-sredstvo.html">images graphiques</a>, cases à cocher, boutons radio, mots de passe et zones de texte. Malgré les différences externes entre les formulaires, ils envoient tous des données au script CGI sous la forme de paires nom : valeur. Un élément peut avoir huit attributs, notés type :</p> <p>TEXTE Une zone de texte d'une ligne utilisée pour saisir des informations qui ne peuvent être saisies dans aucun des autres éléments du formulaire. C'est ici que vous entrez les noms, les adresses, les intitulés de poste, les numéros de téléphone, les loisirs et pratiquement tout type de données. Un élément peut avoir des attributs :</p> <p>Syntaxe: <INPUT type="TEXT" name="Hobby" maxlength="35" size="20" value="Achats"></p> <p>MOT DE PASSE Un champ d'une ligne qui affiche des astérisques au lieu de caractères tapés. Un élément peut avoir des attributs :</p> <p>longueur maximale. Définit la longueur maximale autorisée de la valeur saisie en caractères.</p> <p>Taille. Définit la longueur de champ maximale autorisée en caractères.</p> <p>valeur. Définit une valeur par défaut qui peut être modifiée.</p> <p>Syntaxe: <INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20"></p> <p>HIDDEN Un autre type d'entrée d'informations cachées. Vous permet d'envoyer des informations à des scripts qui ne peuvent pas être modifiés par l'utilisateur. Certains programmes CGI utilisent des champs masqués pour transférer des informations d'une page à une autre, telles que le nom ou le numéro. Cette approche facilite grandement le travail de l'utilisateur en éliminant le besoin de ressaisir les données. Par exemple, pour transférer un fichier de <a href="https://newtravelers.ru/fr/setting/podpiska-na-novosti-ishodnyi-kod-raskryt-nevozmozhno-esli-dlya-etogo.html">code source</a> HTML utilise la construction suivante : <INPUT type="HIDDEN" name="file" value="n'importe quel fichier.html"></p> <p>CHECKBOX Les drapeaux sont utilisés pour permettre à l'utilisateur de répondre en monosyllabes : oui / non vrai / faux plus / moins, etc. Il ressemble généralement à une croix ou à un oiseau. Un élément peut avoir des attributs :</p> <p>vérifié. Définit l'état initial de la case à cocher par défaut.</p> <p>valeur. Définit une valeur par défaut qui peut être modifiée.</p> <p>Syntaxe: <INPUT type="checkbox" name="send_mail" value="Oui" checked></p> <p>Les commutateurs RADIO ressemblent à des drapeaux à bien des égards, ne différant que par des <a href="https://newtravelers.ru/fr/tips/programma-dlya-naznacheniya-goryachih-klavish-menedzhery-goryachih-klavish-funkcionalnye-vozmozhnosti-komb.html">Fonctionnalité</a> choix. Un seul peut être sélectionné dans un groupe de boutons radio. Un élément INPUT distinct est spécifié pour chaque commutateur.</p> <p>SOUMETTRE Cliquer sur ce bouton soumet le contenu du formulaire au script qui a été spécifié <a href="https://newtravelers.ru/fr/tp-link/get-i-post-primery-atribut-action-i-method-metody-get-i-post-vybor-mezhdu.html">attribut d'action</a> dans l'élément <FORM>... À l'aide des boutons, vous pouvez calculer le montant, charger des pages, envoyer des données, réinitialiser des valeurs. Syntaxe:</p> <p><FORM method="get" или "post" action="mailto: Этот адрес e-mail защищен от спам-ботов. Чтобы увидеть его, у Вас должен быть включен Java-Script "> <INPUT type="submit" value="envoyer"></FORM></p> <p>RESET Le bouton permet de restaurer les valeurs par défaut. Si une valeur par défaut n'est pas fournie, elle sera simplement remise à zéro. La largeur du bouton peut varier en fonction d'autres éléments. Il a également un attribut value.</p> <p>Syntaxe: <INPUT type="reset" value="nettoyage"></p> <p>IMAGE Tout comme le bouton SOUMETTRE, sauf qu'il utilise une image comme bouton. Un des avantages est la possibilité de passer les coordonnées du clic de l'utilisateur, ce qui permet d'organiser l'image cliquable. Un élément peut avoir des attributs :</p> <p>src. Définit l'URL du fichier image.</p> <p>aligner. Définit l'alignement de l'image par rapport au texte à l'aide des valeurs TOP, MIDDLE et BOTTOM.</p> <p>Nom. Définit le nom de la carte, qui est également envoyé au script avec les coordonnées.</p> <p>Syntaxe: <INPUT type="image" src="knopka.gif"></p> <p>BOUTON Crée un autre bouton, les navigateurs des utilisateurs peuvent utiliser la valeur de l'attribut value comme nom de fichier d'origine.</p> <p>Syntaxe: <INPUT type="button"value="bouton"></p> <p>FILE Crée un contrôle de sélection de fichier. Syntaxe: <INPUT type="file"></p> <p>ACCESSKEY Spécifie le bouton qui, lorsqu'il est enfoncé, traitera le champ. Syntaxe: <INPUT accesskey="a"></p> <p>SIZE Spécifie la largeur de l'élément en pixels. Syntaxe: <INPUT size="число"></p> <p>DÉSACTIVÉ Désactive la possibilité de modifier le contenu d'un champ ou la position d'un bouton. Syntaxe: <INPUT disabled"></p> <p>Élément <TEXTAREA>Cet élément crée une zone de saisie et de visualisation de texte. Il peut également être utilisé non pas dans le cadre d'un formulaire, mais en tant que détails de page indépendants. La zone de saisie permet d'économiser de l'espace avec des barres de défilement. Peut avoir des attributs :</p> <p>Nom. Spécifie le mot-clé par lequel le script peut accéder à son contenu.</p> <p>Lignes. Définit la hauteur de la zone en lignes.</p> <p>cols. Définit la largeur de la zone en caractères.</p> <p>Syntaxe:</p> <p><FORM><H3>Entrez du texte <TEXTAREA name="ключевое слово" rows=5 cols=30>Zone de saisie de texte

Élément peut prendre la forme d'une liste déroulante ou d'un menu d'éléments. A une balise imbriquée et attributs :

Nom. Spécifie un nom.

Taille. Définit le nombre maximum d'éléments de liste pouvant être affichés simultanément à l'écran.

plusieurs. Spécifie la possibilité de sélectionner plusieurs valeurs en même temps.

L'élément est définit les choix de menu possibles

Syntaxe: sens

Possède des attributs :

choisi. Définit le mot initialement sélectionné.

valeur. Définit la signification du mot sélectionné pour le script.

Élément utilisé pour regrouper logiquement des éléments étiquette intérieure a un attribut label :

Syntaxe:

Sélectionner:

D'abord

Seconde

Troisième Quatrième

Élément C'est l'élément le plus simple qui vous permet de créer un semblant de formulaire et de saisir une ligne contenant du texte et de générer une demande.

Exemple: Disons que l'URL de base est définie sur la page actuelle à l'aide de l'élément puis, si l'utilisateur entre les mots-clés de recherche word1, word2, word3 dans le champ, le navigateur va former et envoyer une requête pour le moteur de recherche du serveur sous la forme : http://www.name.domain/? word1 + word2 + word3 Si le programme de recherche du serveur prend en charge la syntaxe de requête standard en utilisant ? et +, la recherche sera effectuée.

Élément est une alternative à l'élément avec des possibilités plus riches - par exemple, avec l'attribution d'un texte alternatif. Syntaxe:

name donne le nom à l'élément.

value définit la valeur de l'élément.

type, lorsqu'il est utilisé comme bouton, prend le bouton de valeurs, soumettre et réinitialiser.

désactivé rend l'élément donné indisponible

tabindex définit la position dans la séquence de tabulation, les champs de formulaire désactivés ne participent pas à l'ordre.

accesskey spécifie la clé d'accès.

Élément est utilisé pour définir alternativement des informations pour les champs du formulaire de contrôle. Prend en charge un attribut for qui lie un élément avec un autre élément de formulaire, et la valeur de l'attribut for doit correspondre à la valeur de l'attribut id du contrôle associé.

Élément