Ensemble de formulaire html. Formulaires HTML. II. Saisir des données via une boucle

Outre plusieurs propriétés font-*, CSS propose de nombreuses propriétés text-*.

aligner le texte

La propriété text-align doit être appliquée à un élément de bloc et détermine comment le texte et l'enfant éléments en ligne sont alignés horizontalement.

Corps ( alignement du texte : gauche ; )

Valeurs les plus utilisées :

• droite
• centre
• justifier

Ces valeurs correspondent aux mêmes boutons d'alignement que vous retrouverez dans Microsoft Word ou Photoshop :

La valeur par défaut de text-align est start . Fondamentalement, le début peut être à gauche ou à droite, selon la direction du texte spécifiée par la direction du document HTML.

la direction est Propriété CSS, qui peut être ltr (de gauche à droite) ou rtl (de droite à gauche) :

• si ltr est sélectionné, le début est à gauche ;
• si rtl est sélectionné, start est égal à right.

décoration de texte

La propriété text-decoration est utilisée pour ajouter une ligne à votre texte.

Valeur par défaut : aucun .

Supprimé (text-decoration: line-through; )

Valeurs possibles :

• surligner
• souligner
• passage en ligne

A ( décoration de texte : aucune ; )

retrait de texte

La propriété text-indent permet d'ajouter un espace avant la première lettre de la première ligne d'un élément de bloc.

Valeur par défaut : 0 (zéro).

Blockquote (text-indent: 30px;)

Veuillez noter qu'il n'y a qu'une indentation en première ligne. Si vous souhaitez déplacer un bloc de texte entier, utilisez le remplissage.

Comme pour la propriété font-size, vous pouvez utiliser px, em ou même %.

texte-ombre

Si vous avez déjà utilisé Photoshop, vous avez probablement utilisé l'outil ombre. En CSS, vous pouvez ajouter une ombre au texte pour lui donner un aspect élégant ou plus facile à lire.

Vous définissez :

• x - déplacement horizontal ;
• y - déplacement vertical ;
• se brouiller;
• couleur.

Seules les valeurs x et y sont obligatoires. Le flou d'ombre par défaut est 0 (zéro) et la couleur par défaut est la même que la couleur du texte.

Cette propriété est délicate, alors utilisez-la avec précaution et ne devenez pas fou !

Formulaires HTML Les s sont des éléments d’interface complexes. Ils comprennent divers éléments fonctionnels: champs de saisie Et , listes <select>, conseils, etc. Tout le code du formulaire est contenu dans l'élément <form> .</p> <p><a href="https://olegshein.ru/fr/system-and-update/than-ios-10-differs-from-11-cosmetic-changes-at-the-bottom-of-the-player/">La plupart</a> les informations du formulaire 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><a href="https://olegshein.ru/fr/battery-and-power-consumption/bongo-chat-pary-zagruzka-dokumentov-dlya-podtverzhdeniya-vozrasta-kontaktnaya/">Coordonnées</a></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 l'avènement de HTML5, le symbole astérisque * était utilisé à côté du nom du champ. La nouvelle spécification a <a href="https://olegshein.ru/fr/download/setting-permissions-on-the-linux-file-special-attributes-of-files/">attribut spécial</a> requirejs , 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="ton 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 <a href="https://olegshein.ru/fr/instructions/kak-v-instagramme-ustanovit-avatarku-kak-sdelat-cvetnoi-kruzhok/">cadre coloré</a> pour le démarquer des autres :</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> <p><b>Balisage HTML</b></p><p> <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">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><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://olegshein.ru/fr/communications-and-the-internet/css-primer-opisanie-markirovannogo-spiska-pravila-css-dlya-nastroiki/">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 : 20 px ; ) .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 : 10 px 15 px ; 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 ;</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 votre_email par votre adresse <a href="https://olegshein.ru/fr/malfunction/dlya-chteniya-elektronnoi-pochty-prednaznacheny-sleduyushchie-programmy/">e-mail</a>;<br>$headers .= "Cci : votre_e-mail". "\r\n" ; envoie <a href="https://olegshein.ru/fr/security/avtomaticheskaya-otpravka-kopii-otpravlyaemyh-soobshchenii-ponyatie/">Cci</a>à votre adresse e-mail.</p> <p>Souvent, sur les sites Web, vous pouvez trouver des pages sur lesquelles sont placés des formulaires HTML. Formulaires Web – <a href="https://olegshein.ru/fr/security/realnye-sposoby-kak-popolnit-golosa-v-vk-popolnenie-scheta-v-vk/">moyen pratique</a> obtenir des informations auprès des visiteurs de votre site. Un exemple de ceci est - , - qui fournit <a href="https://olegshein.ru/fr/battery-and-power-consumption/primenenie-kanalov-s-obratnoi-svyazyu-obratnaya-svyaz-kak-instrument/">retour</a> avec les visiteurs du site et les développeurs. Les formulaires sont également pratiques pour les développeurs de sites lors du développement d'un CMS, ce qui leur permet de conserver la propriété principale du site : la pertinence. Cet article couvre les bases de la création de formulaires HTML, de leur traitement et des moyens de transférer des données des formulaires d'écran vers des scripts PHP.</p> <h2>1) Créez un formulaire simple</h2> <p>Balises <i><form> </i> Et <i></form> </i> définir le début et la fin du formulaire. Balise de formulaire de départ <i><form> </i> contient deux attributs : <i>action</i> Et <i>méthode</i>. L'attribut action contient <a href="https://olegshein.ru/fr/battery-and-power-consumption/porty-v-pk-primenenie-v-url-adresah-raz-my-pci-ispolzuyutsya-dlya/">Adresse URL</a> script qui doit être appelé pour traiter le script. Attribut <i>méthode</i> indique au navigateur quel type <a href="https://olegshein.ru/fr/error-itunes/generaciya-http-zaprosov-chto-takoe-http-zapros-http-soobshchenie/">Requête HTTP</a> doit être utilisé pour soumettre le formulaire ; valeurs possibles <i>POSTE</i> Et <i>OBTENIR</i>.</p> <h2>Commentaire</h2> <p>La principale différence entre les méthodes POST et GET réside dans la manière dont les informations sont transférées. DANS <a href="https://olegshein.ru/fr/applied/curl-metod-get-ne-rabotaet-curl-php-chto-eto-takoe-i-kak-im-polzovatsya-otpravit/">Méthode OBTENIR</a> les paramètres sont transmis via <a href="https://olegshein.ru/fr/error-itunes/kak-prosmotret-zakrytyi-profil-v-kontakte-istoriya-statusov/">barre d'adresse</a>, c'est-à-dire essentiellement dans l'en-tête de la requête HTTP, tandis que dans la méthode POST, les paramètres sont transmis via le corps de la requête HTTP et ne sont en aucun cas reflétés dans la barre d'adresse.</p> <p> <form method="post" action="../admin/add_story.php"> </p> <p><?php <br>$text = nl2br($_POST["montexte"]); <br>?> </p> <p><b>Tâche:</b> Supposons que vous deviez créer une liste déroulante avec les années allant de 2000 à 2050. <br><b>Solution:</b> Vous devez créer un formulaire HTML avec un élément SELECT et un script PHP pour traiter le formulaire.</p><p><b>Discussion:</b></p> <p>Tout d'abord, créons deux fichiers : <b>formulaire.html</b> Et <b>action.php</b>. Dans le dossier <b>formulaire.html</b> contiendra un formulaire HTML avec une liste déroulante. De plus, les valeurs de la liste peuvent être spécifiées de deux manières :</p> <h2>I. Saisie manuelle des données :</h2> <p> <select class="input" type=text name=years> <br><option value="2000">2000</option> <br><option value="2001">2001</option> <br><option value="2002">2002</option> <br>…………………………………………… <br><option value="2050">2050</option> <br></select> </p> <h2>II. Saisie de données via une boucle :</h2> <p> <select class="input" type=text name=years> <br><?php <br>$année = 2000 ; <br>pour ($i = 0 ; $i<= 50 ; $i ++) <span>// Cycle de 0 à 50 <br></span>{ <br>$new_years = $année + $i ; <span>// Former une nouvelle valeur <br></span>écho " <option value=". $new_years.">" . $new_years . "</option>" ; <span>//Former une nouvelle ligne <br></span>} <br>?> <br></select> </p> <p>Comme vous pouvez le constater, le deuxième exemple avec une boucle est plus compact. Je pense qu'il n'est pas nécessaire de fournir le script du gestionnaire pour ce formulaire, car il est traité exactement de la même manière qu'un champ de texte, c'est-à-dire les valeurs de la liste peuvent être récupérées à partir de <a href="https://olegshein.ru/fr/apps-and-books/neizmerimyi-page-server-pagename-superglobalnyi-massiv-server/">tableau superglobal</a> <i>$_POST</i>.</p> <p><b>Description:</b></p> <p>Créons un formulaire HTML pour envoyer un fichier au serveur.</p> <p> <FORM ENCTYPE="multipart/form-data" ACTION="action.php" METHOD=POST> <br><INPUT NAME="myfile" TYPE="file"> <br><INPUT TYPE="submit" value="Transférer le fichier"> <br></FORM> </p> <p>Ce formulaire html contient un élément <i>parcourir</i>, qui ouvre une boîte de dialogue permettant de sélectionner un fichier à télécharger sur le serveur. Lorsque vous appuyez sur le bouton <i>"Transférer le fichier"</i>, le fichier est transmis au script du gestionnaire.</p> <p>Ensuite, vous devez écrire un script de gestionnaire <b>action.php</b>. Avant d'écrire le gestionnaire, nous devons décider dans quel répertoire nous allons copier le fichier :</p> <p><?php <br>if(isset($_FILES [ "monfichier" ])) <span>// Si le fichier existe <br></span>{ <br>$catalogue = "../image/" ; // Notre catalogue <br>si (is_dir ($ catalogue)) <span>// Si un tel répertoire existe <br></span>{ <br>$monfichier = $_FILES [ "monfichier" ][ "nom_tmp" ]; <span>// Fichier temporaire <br></span>$monfichier_name = $_FILES [ "monfichier" ][ "nom" ]; // Nom de fichier <br>if(! copy ($monfichier, $catalog)) echo <span>"Erreur lors de la copie du fichier"</span>. $monnom_fichier <span>// Si la copie du fichier a échoué <br></span>} <br>sinon mkdir (""../image/" ); <span>// S'il n'existe pas un tel répertoire, nous le créerons <br></span>} <br>?> </p> <h2>Commentaire</h2> <p>Si vous faites confiance aux utilisateurs pour télécharger des fichiers sur votre serveur, vous devez être extrêmement prudent. Les attaquants peuvent intégrer du « mauvais » code dans une image ou un fichier et l’envoyer au serveur. Dans de tels cas, vous devez contrôler strictement le téléchargement des fichiers.</p> <p><a href="https://olegshein.ru/fr/contacts-and-messages/tehnologiya-bolshih-dannyh-i-primery-ee-primeneniya-aleksei-ryvkin-ob/">Cet exemple</a> montre la création d'un répertoire et la copie d'un fichier dans ce répertoire sur le serveur.</p> <p>Je voudrais également montrer un exemple avec l'élément <i>case à cocher</i>. Cet élément est légèrement différent des autres éléments dans le sens où si ce n'est l'un des éléments <i>case à cocher</i>’a n’est pas sélectionné, alors la variable superglobale <i>$_POST</i> renverra une valeur vide :</p> <p> <FORM ACTION="file.php" METHOD=POST> <br><input name="mycolor" type="checkbox" value="bleu">Bleu <br><input name="mycolor" type="checkbox" value="noir">Noir <br><input name="mycolor" type="checkbox" value="blanc">Blanc <br><input name="Submit" type=submit value="Choisir"> <br></FORM> </p> <p><?php <br>if (!empty($_POST [ "ma couleur" ])) echo $_POST [ "ma couleur" ]; <span>// Si au moins 1 élément est sélectionné <br></span> sinon écho <span>"Sélectionner une valeur"</span>; <br>?> </p> <p>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 méthodes de création <a href="https://olegshein.ru/fr/pots/fail-kak-edinica-hraneniya-informacii-na-kompyutere-atributy-hranenie/">objets divers</a> contenus, leur mise en forme, 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 ».</p> <p>Cette section de la langue est très importante. Alors prenez le temps de l’étudier. <a href="https://olegshein.ru/fr/malfunction/vybiraem-planshet-ili-na-chto-nuzhno-obratit-osoboe-vnimanie-pered-pokupkoi/">attention particulière</a>, sinon la ressource Web que vous avez créée ne sera pas mise en production. Ainsi, après avoir lu l'article, vous apprendrez à quoi vous devez utiliser les formulaires, quelles balises ils sont utilisés pour créer, et vous pourrez également essayer <a href="https://olegshein.ru/fr/pots/aida-marketing-na-konkretnyh-primerah-primery-formuly-aida-v-reklame/">exemples spécifiques</a> en pratique. Commençons !</p> <h2>Qu'est-ce qu'un formulaire et comment fonctionne-t-il ?</h2> <blockquote> <p><b>Formulaire</b>– c'est l'un des objets les plus importants, destiné à l'échange de données d'information entre le serveur et l'utilisateur.</p> </blockquote> <p>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.</p> <blockquote> <p>Le formulaire est spécifié à l'aide de <a href="https://olegshein.ru/fr/application/vse-elementy-paneli-upravleniya-centr-specialnyh-vozmozhnostei-nastroit/">élément spécial</a> langage HTML <b><form> </b>.</p> </blockquote> <p>Notez que le document de code peut contenir plusieurs déclarations de balises <b><form> </b> cependant, une seule requête peut être envoyée au serveur pour traiter les données. C'est pourquoi les informations que l'utilisateur saisit dans les champs prévus à cet effet font référence à <a href="https://olegshein.ru/fr/system-and-update/sovremennye-tendencii-v-web-dizaine-dopolnitelnye-effekty-primenimye-k/">différentes formes</a>, ne devrait pas être dépendant. De plus, il n’est pas permis d’emboîter les formes les unes dans les autres.</p> <p>Pour ceux qui sont impatients et veulent un aperçu rapide de la représentation du code, j'ai joint un exemple simple d'utilisation du panneau avec <a href="https://olegshein.ru/fr/battery-and-power-consumption/kak-v-vorde-vstavit-tekstovoe-pole-panel-instrumentov/">champ de texte</a> pour le mot de passe avec le bouton :</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple</title> </head> <body> <form> <p><input name="pas" type="password"><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </td> </tr></table><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple</title> </head> <body> <form> <p><input name="pas" type="password"><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <p>Peut-être que maintenant on ne sait pas très bien quoi et comment cela interagit <a href="https://olegshein.ru/fr/battery-and-power-consumption/shema-s-ekranom-ot-nokia-1202-snyal-nebolshoe-video-raboty-programmy-poryadok/">petit programme</a>, cependant, je vous garantis qu'après avoir lu l'intégralité de cet article, vous pourrez créer des applications beaucoup plus complexes.</p> <h2>Envoi de données côté serveur</h2> <p>Pour envoyer les informations saisies (ou sélectionnées) dans une boîte de dialogue, vous devez utiliser <a href="https://olegshein.ru/fr/system-and-update/ispravit-sistemu-posle-virusa-sbros-nastroek-prefiksov/">mécanisme standard</a> – <b>Bouton Soumettre</b>.</p> <blockquote> <p>Le code d'une telle méthode ressemble à ceci : <b><input type="submit"> </b></p> </blockquote> <p>Lorsque vous exécutez la ligne présentée, un bouton apparaîtra avec l'inscription : « Soumettre ».</p> <p>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.</p> <p>Après confirmation de l'expédition <a href="https://olegshein.ru/fr/apps-and-books/zaregistrirovatsya-v-feisbuk-mobilnaya-versiya-registraciya-v/">informations spécifiées</a>, il n'arrive pas immédiatement sur le serveur. Tout d’abord, il est traité par le navigateur, ce qui donne la forme « nom=valeur ».</p> <p>Le paramètre d'attribut est responsable du nom <b>taper</b>étiqueter <b><input> </b>, 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 <b>action</b>élément <b><form> </b>.</p> <p>Tout seul <a href="https://olegshein.ru/fr/oshibki-i-devajjsov/nasledovanie-shablonov-v-php-bez-ispolzovaniya-storonnih/">paramètre d'action</a> pas nécessaire, et dans certains cas, pas du tout nécessaire. Par exemple, si une page de site Web est écrite avec <a href="https://olegshein.ru/fr/the-sounds-and-music/sozdanie-html-shablonov-s-ispolzovaniem-php-html-css-php-javascript-sql/">en utilisant php</a> ou js, le traitement a lieu sur la page actuelle et les liens ne sont pas nécessaires.</p><p>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. Donc, <a href="https://olegshein.ru/fr/apps-and-books/web-programmirovanie-s-nulya-poshagovoe-rukovodstvo-kak/">langages côté serveur</a> pris en compte : Python, php, langages de type C (C#, C, etc.), Java et autres.</p> <p>Maintenant, je voudrais m'arrêter et parler davantage de l'élément <b><input> </b>. Si tu expliques <a href="https://olegshein.ru/fr/oshibki-i-devajjsov/chto-takoe-bitcoin-prostym-yazykom-chto-takoe-bitkoin-prostymi-slovami-kak-on/">dans un langage simple</a>, Que <b><input> </b> 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.</p> <p>Il n'est pas nécessaire que la balise soit associée à <b><form> </b>, cependant, s'il est nécessaire de traiter <a href="https://olegshein.ru/fr/contacts-and-messages/udalenie-bazy-dannyh-pochtovyh-yashchikov-podgotovka-polzovatelskih/">messages d'utilisateurs</a> ou saisissez-les, par exemple, dans une base de données, alors vous ne pouvez pas vous passer d'un conteneur.</p> <p>Principaux attributs <a href="https://olegshein.ru/fr/download/adding-data-structure-elements-from-the-java-file-java-working-with-files-writing-reading-deleting/">de cet élément</a> langue <a href="https://olegshein.ru/fr/error-itunes/vozmozhnosti-yazyka-gipertekstovoi-razmetki-html-yazyk-gipertekstovoi-razmetki-html5-struktura-i-osn/">balisage hypertexte</a> sont:</p> <ul><li><b>Texte</b>– crée un champ de texte ;</li> <li><b>Soumettre</b>– crée un bouton pour envoyer des données au serveur ;</li> <li><b>Image</b>– est responsable du bouton avec l'image ;</li> <li><b>Réinitialiser</b>– définit un bouton pour effacer le formulaire ;</li> <li><b>Mot de passe</b>– définit un champ de texte spécifiquement pour les mots de passe ;</li> <li><b>Case à cocher</b>– responsable des champs avec des cases à cocher ;</li> <li><b>Radio</b>– responsable des champs avec la sélection d’un élément ;</li> <li><b>Bouton</b>– crée un bouton ;</li> <li><b>Caché</b>– utilisé pour les champs cachés ;</li> <li><b>Déposer</b>– définit le champ responsable de l’envoi des fichiers.</li> </ul><h2>Méthodes de transmission d'informations</h2> <p>Il existe 2 façons de transférer les données utilisateur vers le serveur : <b>Obtenir</b> Et <b>Poste</b>. 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.</p> <table><tbody><tr><td width="260"> </td> <td width="260">Poste</td> <td width="260">Obtenir</td> </tr><tr><td width="260">Taille des documents transmis</td> <td width="260">Limité au côté serveur.</td> <td width="260">Maximum – 4 Ko.</td> </tr><tr><td width="260">Comment les informations envoyées sont affichées</td> <td width="260">Disponible uniquement lors de l'affichage via des extensions de navigateur ou d'autres produits logiciels spéciaux.</td> <td width="260">Immédiatement accessible à tous.</td> </tr><tr><td width="260">Utiliser des signets</td> <td width="260">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).</td> <td width="260">Toute page contenant une demande peut être enregistrée sous forme de signets et y revenir ultérieurement.</td> </tr><tr><td width="260">Mise en cache</td> <td width="260">Sur la base du paragraphe précédent, toutes les demandes sont sur une seule page.</td> <td width="260">Chaque page peut être mise en cache séparément.</td> </tr><tr><td width="260">But</td> <td width="260">Utilisé pour le transfert <a href="https://olegshein.ru/fr/instructions/large-files-on-a-usb-flash-drive-how-to-burn-large-files-on-a-usb-flash-drive/">gros fichiers</a>(livres, images, vidéos, etc.), messages, commentaires.</td> <td width="260">Idéal pour rechercher les valeurs demandées sur une ressource Web ou pour envoyer de courts messages texte.</td> </tr></tbody></table><p>Afin d'indiquer laquelle des deux méthodes de transfert de données le navigateur doit utiliser, dans l'élément <b><form> </b> utiliser le paramètre fourni <b>méthode</b>(Par exemple, <b>méthode="post"</b>).</p> <p><img src='https://i1.wp.com/romanchueshov.ru/wp-content/uploads/2016/07/prostaia-forma.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>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 <b>Poste</b>.</p> <p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Méthode POST</title> </head> <body> <p>Entrez vos informations personnelles!</p> <form action="handler.php" method="post"> <p><input name="name" value = "Nom"> <input name="fam" value = "Nom de famille"> <input type="date" name="calendar" value="2016-06-11" max="2016-07-31" min="2016-06-01"> <input type="password" name="pass" value = "Mot de passe"> </p> <p><input type="submit"></p> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <p>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é.</p> <h2>Création d'un panneau d'inscription</h2> <p>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, jetez un oeil <a href="https://olegshein.ru/fr/applied/programma-kontentnoi-filtracii-internet-trafika-kontentnaya/">travail sur le serveur</a> nous n'y parviendrons pas, mais la conception et <a href="https://olegshein.ru/fr/reviews/hp-2520-ne-pechataet-chernymi-chernilami-printer-ili-mfu-hp-hewlett/">détails importants</a> nous fournirons.</p> <table><tr><td class="line_numbers"> 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 </td><td class="code"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Inscription</title> <style> </style> </head> <body> <form> <fieldset> <legend>Inscription sur le site</legend> <h4> </h4> <p>Nom: <input name="name" autofocus required ></p> <p>Nom de famille: <input name="fam" required></p> <p>E-mail: <input type="email" required></p> <p>Mot de passe: <input type="password" name="pass" required></p> <p>Répéter le mot de passe: <input type="password" name="pass" required></p> <p><input type="submit" value="Registre"></p> </fieldset> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </td> </tr></table><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Inscription</title> <style> body { background-color:#98FB98; background-attachment: fixed; } form{ background-color:#AEEEEE; Color: #006400; font-size:15px; } h4 { color: red; text-align: center; } p { text-align: center; } input { Color: #006400; font-size:15px; border: 5px ridge #98FB98; background-color:#fff; } </style> </head> <body> <form> <fieldset> <legend>Inscription sur le site</legend> <h4>Pour un travail ultérieur correct dans notre service, veuillez saisir les données correctes !</h4> <p>Nom: <input name="name" autofocus required ></p> <p>Nom de famille: <input name="fam" required></p> <p>E-mail: <input type="email" required></p> <p>Mot de passe: <input type="password" name="pass" required></p> <p>Répéter le mot de passe: <input type="password" name="pass" required></p> <p><input type="submit" value="Registre"></p> </fieldset> </form> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html></p> <p>je te conseille de sauvegarder <a href="https://olegshein.ru/fr/malfunction/dan-dvoichnyi-kod-8-cvetnogo-dvoichnyi-kod-vosmicvetnoi-palitry/">ce code</a> programmes dans un document avec l'extension .html et l'encodage utf-8, et ouvrez 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 <b>mise au point automatique</b>.</p> <p><img src='https://i0.wp.com/romanchueshov.ru/wp-content/uploads/2016/07/krasivai-forma.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Commencez à remplir les champs en laissant un inchangé et cliquez sur le bouton « S'inscrire ». Comme vous l'avez déjà remarqué, le formulaire ne sera pas soumis, puisque chaque élément <b>< </b><b>entrée></b> attribut spécifié <b>requis</b>. Il définit les champs marqués comme obligatoires.</p> <p>Un de plus <a href="https://olegshein.ru/fr/system-and-update/460-minut-v-chasah-kak-perevodit-minuty-v-chasy-i-naoborot-primery/">point intéressant</a> est une indication de type <b>type="e-mail"</b>, paru dans . Lors de l'utilisation de ce type de champ, l'exactitude des informations saisies est automatiquement vérifiée. En cas d'erreurs, le formulaire n'est pas envoyé au serveur.</p> <p>La publication est donc terminée. Dans celui-ci, j'ai essayé de collecter <a href="https://olegshein.ru/fr/apps-and-books/asus-a88xm-a-maksimalnoe-kolichestvo-operativnoi-pamyati-obzor-materinskoi/">quantité maximale</a> connaissances importantes et pertinentes concernant les formulaires. J'espère que cela vous a été utile ! Je vous serais très reconnaissant si vous rejoignez les rangs de mes abonnés et parlez du blog à vos amis.</p> <p>Au revoir!</p> <p>Cordialement, Roman Chueshov</p> <p>Lire: <b>333 fois</b></p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </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> </div> </article> </div> </div> <div id="secondary"> <aside id="search-2" class="widget widget_search clearfix"> <form action="/" class="search-form searchform clearfix" method="get"> <div class="search-wrap"> <input type="text" placeholder="Recherche" class="s field" name="s"> <button class="search-icon" type="submit"></button> </div> </form> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>Derniers messages</span></h3> <ul> <li> <a href="https://olegshein.ru/fr/download/luchshie-hdmi-adaptery-dlya-televizora-besprovodnoi-wifi-adapter-dlya-televizora/">Adaptateur WiFi sans fil pour téléviseur</a> </li> <li> <a href="https://olegshein.ru/fr/oshibki-i-devajjsov/kak-vosstanovit-vatsap-soobshcheniya-perepisku-chaty-esli-udalil/">Comment comprendre qu’un utilisateur a supprimé WhatsApp de son téléphone ?</a> </li> <li> <a href="https://olegshein.ru/fr/reviews/gde-nakleit-plenku-na-smartfon-kak-st-klyshko-kak-samomu-nakleit-zashchitnuyu/">Où coller le film sur votre smartphone</a> </li> <li> <a href="https://olegshein.ru/fr/error-itunes/ed-soshial-nakrutka-golosov-v-oprose-vk-nakrutka-oprosov/">Tricherie des enquêtes VKontakte</a> </li> <li> <a href="https://olegshein.ru/fr/malfunction/mozhno-li-vosstanovit-dannye-s-sd-karty-vosstanovlenie-dannyh/">Récupération de données d'une carte mémoire endommagée ou ne fonctionnant pas</a> </li> <li> <a href="https://olegshein.ru/fr/apps-and-books/zvonim-s-ipad-na-telefony-mozhno-li-zvonit-s-ipad-mini-i-drugih-aipadov/">Est-il possible de passer des appels depuis un iPad mini et d'autres iPad, méthodes de communication ? Nous utilisons les meilleures applications ?</a> </li> <li> <a href="https://olegshein.ru/fr/applied/kak-poyavilsya-vertep-chto-simvoliziruet-karamelnaya-trost-i-drugie/">« Candy Cane », l'histoire rayée d'un bonbon insolite C'est intéressant !</a> </li> <li> <a href="https://olegshein.ru/fr/battery-and-power-consumption/zaryadit-akkumulyator-telefona-napryamuyu-shema-zaryazhaem/">Chargez la batterie de votre téléphone sans téléphone</a> </li> </ul> </aside> <aside id="text-5" class="widget widget_text clearfix"> <div class="textwidget"> <script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script> <div id="vk_groups"></div> </div> </aside> <aside id="text-4" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> <aside id="text-3" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> <div class="footer-socket-left-sectoin"> <div class="copyright">2024 <a href="https://olegshein.ru/fr/" title="olegshein.ru"><span>olegshein.ru</span></a>. Club informatique d'Oleg Shein. <br></div> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type="text/javascript"> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "colormag_right_sidebar", "margin_top": 10, "margin_bottom": 0, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['text-3'] }; </script> <script type="text/javascript"> (function(w, doc) { if (!w.__utlWdgt) { w.__utlWdgt = true; var d = doc, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(window, document); </script> <div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common" data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln." data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true" class="uptolike-buttons"></div> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var pwebcontact_l10n = pwebcontact_l10n || {}; pwebcontact_l10n.form = { "INIT": "Initializing form...", "SENDING": "Sending...", "SEND_ERR": "Wait a few seconds before sending next message", "REQUEST_ERR": "Request error: ", "COOKIES_ERR": "Enable cookies and refresh page to use this form" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr"> <div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free"> <span class="pweb-text">Des questions ?</span> <span class="pweb-icon"></span> </div> <div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr"> <div class="pwebcontact-container-outset"> <div id="pwebcontact1_container" class="pwebcontact-container"> <div class="pwebcontact-container-inset"> <form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8"> <div class="pweb-fields"> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-name pweb-field-name"> <div class="pweb-label"> <label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name">Nom</label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-email pweb-field-email"> <div class="pweb-label"> <label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email">E-mail <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-textarea pweb-field-message"> <div class="pweb-label"> <label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message">Message <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none">