Fenêtre D’Invite Javascript Avec Zone De Texte

La balise textarea HTML est utilisé pour créer un champ de saisie de texte sur plusieurs lignes sous une forme. Il est défini avec le </code> et peut contenir un nombre illimité de caractères. </em> </p> <p>Lorsque vous créez un formulaire HTML, vous pouvez décider que vous voulez d’accepter une longue chaaîne de texte. Par exemple, si vous créez un formulaire de contact client pour le site Web d’un détaillant, vous pouvez créer un élément de forme qui accepte une description détaillée d’un problème du client est confronté. </p> <p>Voici o√π le HTML <code><textarea> </code> est en jeu. L’élément <code><textarea> </code> est utilisé pour créer un élément de forme qui fournit des fonctionnalités d’ édition de texte multi-ligne. Cet élément est utile si vous voulez accepter les réponses de texte plus d’un utilisateur. </p> <p>Ce tutoriel va discuter, avec quelques exemples, comment utiliser le HTML <code><textarea> </code> dans votre Alla code. fin de ce tutoriel, vous aurez toutes les connaissances dont vous avez besoin d’utiliser le <code><textarea> </code> comme un! pro </p> <h2> balise HTML Textarea</h2> <p>Le <code><textarea> </code> est utilisé pour définir un champ de contrôle d’entrée de texte multiligne sous une forme. . <code><textarea> </code> peut contenir un nombre illimité de caractères </p> <p>La syntaxe <code><textarea> </code> est comme suit: </p> <p>pause de Descendue notre code. La balise <code><textarea> </code> est utilisé pour définir la zone de zone de texte dans notre formulaire web. Contrairement à <code><input> </code>, <code><textarea> </code> doit avoir à la fois une balise d’ouverture (<code><textarea> </code>) et une fermeture (<code></ textarea> </code>). En effet , le texte par défaut que la zone de texte affichera est contenu entre les deux balises </p> <p>Nous avons également spécifié deux attributs dans notre exemple:. </p> </div> </div> <ul> <li><strong> lignes </strong> indique au navigateur combien de lignes la zone de texte devrait avoir par défaut. En d’ autres termes, l’attribut rows indique la hauteur de la zone de texte.</li><li><strong> Col. </strong> est le nombre de colonnes de la zone de texte devrait avoir par défaut. En d’ autres termes, le Col. attribut indique la largeur de la zone de texte</li></ul> </a> </div> <p>Supposons que nous créons une web former pour un magasin de vêtements locaux. Ce formulaire doit permettre aux clients de formuler des commentaires sur leur achat. Puisque nous voulons donner aux utilisateurs l’espace pour soumettre des commentaires détaillés, nous utiliserons un HTML <code><textarea> </code> pour recueillir les commentaires des utilisateurs. </p> <p>Nous pourrions utiliser le code suivant pour créer la formulaire de commentaires: </p> <p>Nos retours de code: </p> <figure class = "wp-block image"> <img src = "https: // LH6 .googleusercontent.com / a0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP 91u3TiWx-XsTyB8YeQHJLJut19I-Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y_3N "alt =" A0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP91u3TiWx XsTyB8YeQHJLJut19I Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y 3N "> </ figure> <p>Let " s briser notre code. Tout d’ abord, nous avons déclaré <code><form> </code> qui est utilisé pour définir notre formulaire en ligne. Nous avons ensuite utilisé un <code><label> </code> pour ajouter une étiquette à notre page demandant à l’utilisateur <code>Quels commentaires avez - vous pour nous? </code> </p> <p>Alors, nous ont utilisé un <code><textarea> </code> pour créer la forme de retour. Nous avons spécifié quatre attributs, qui sont les suivants: </p> <ul> <li>des lignes est de 5 et stocke le nombre de lignes du champ doit avoir</li><li>Col. est réglé sur 30 et magasins. le nombre de colonnes le champ devrait avoir.</li><li>id est l’identifiant unique attribué à la forme, qui serait utilisé lorsque nous soumettons le formulaire.</li><li>nom est également utilisé pour identifier la former et est nécessaire si nous voulons soumettre le formulaire à un serveur Web.</li></ul> <p><code><textarea> </code> est pris en charge par tous les principaux navigateurs. </p> <p>l’exemple ci - dessus est une implémentation de base du <code><textarea> </code>, mais nous pouvons rendre notre forme plus avancée. </p> <p>déménagement Let sur deux exemples les plus avancés pour illustrer comment nous pouvons utiliser le <code><textarea> </code> pour créer des zones de texte. </p> <h3> minimum et maximum longueurs </h3> <p>dos go Let dans notre magasin de vêtements par exemple Supposons que nous voulons de limiter le nombre de caractères qu’un ute nte envoie à 1000, pour encourager les utilisateurs à être concis lors de la rédaction de leurs commentaires. Nous voulons également définir une limite de caractères minimum à 10, pour assurer que les utilisateurs d’ écrire quelque chose sous la forme </p> </a> < / div> <p>est o√π les attributs MINLENGTH et mAXLENGTH entrent en play.minlength est utilisé pour spécifier le nombre minimum de caractères qu’un utilisateur doit écrire et maxlength est utilisé pour spécifier le nombre maximum de caractères qu’un utilisateur peut écrire dans un module . </p> <p>Voici un exemple de notre module Web précédent avec le minlength et maxlength attributs définis: </p> <p>Notre formulaire retours: </p> <figure class = "wp-block image"> <img src = "https: //lh3.googleusercontent.com/ ztmPnPdTmOQ1f7X3SWtWwd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD- JSR784uIegJeXzrWAvArwI_FpuE7Ul6cOZAwtBtKOSuKqw9 wd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD JSR784uIegJeXzrWAvArwI FpuE7Ul6cOZAwtfJyfEKVSuKqCwOILHdc9gj << si le module est considéré comme invalide, il n’y a pas de caractères pour notre module. left "> Il est important de noter que même si l’utilisateur écrit à moins de 10 caractères dans notre forme, le textarea sera toujours considérée comme valide. Si nous voulons imposer la limite minimale, il faut préciser le <code>requis </code>. </p> <h3> Placeholder texte </h3> <p>Dans notre formulaire Web ci - dessus, nous spécifions la valeur par défaut texte à l’ intérieur de notre module. Ce moyen de texte <code>Vos commentaires passe ici. </code> Bien que cette information est utile, l’utilisateur doit supprimer manuellement le texte par défaut si elles ne veulent pas dans la réponse au formulaire. </p> <p>Si vous souhaitez spécifier une valeur d’espace réservé, vous pouvez utiliser le <code>espace réservé </code>. Cet attribut indique une valeur d’espace réservé qui est affiché lorsque le formulaire est vide. Dès que l’utilisateur commence à taper dans la boaîte, l’espace réservé disparaaît. </p> <p>Voici un exemple d’un <code><textarea> </code> qui contient le texte de l’ espace réservé <code>Vos commentaires va ici . </code>: </p> <p>Nos retours de code: </p> <script> jQuery (document) .ready (function () {jQuery (’# testimonial-section-1’). click (function (e) {var text = "Trouvez votre match Bootcamp"; var type = "section témoignage"; var ahref = jQuery (this) .attr (’href’); GaEvent (text, type, ’fasttrack’); fasTrackEvent ( type, text, ahref );}); function GaEvent (text, name, eventName) {var pathName = window.location.pathname.replace (/// g, ""); var referrer = document.referrer; referrer = referrer .replace ("https: / /", ""); referrer = referrer.replace ("http: //", ""); referrer = referrer.split (’/’) [0]; gtag (’event’ , eventName, {cta_type: ’fasttrack’, cta_name: name, cta_text: text, page_url: document.URL, page_path: pathName, referrer: referrer,});} fonction fasTrackEvent (type, text, ahref, fC TA = null) {var article = jQuery (".thb-blockgrid"). Parent (). Find ("h2"). Text (); if (article == "") {var article = jQuery ("h1"). text (); } analytics.track ("Blog - FastTrack CTA Clicked", {time: Date.now (), ctaType: type, ctaText: text, url: document.URL, article: article, category: jQuery (’. entry-header. single_category_title ’).text(), source: "blog", référent: document.referrer, referrerDomain: document.referrer.split (’ / ’) [2]}); if (fCTA == null) {var fCTA = ’testimonial-section’; } const firstFtCTA = localStorage.getItem (’firstFtCTA’); if (! firstFtCTA) {localStorage.setItem (’firstFtCTA’, fCTA); localStorage.setItem (’firstFtCTAPath’, document.URL); } localStorage.setItem (’lastFtCTA’, fCTA); localStorage.setItem (’lastFtCTAPath’, document.URL); analytics.identify ({... (firstFtCTA ? {}: {firstFtCTA: localStorage.getItem (’firstFtCTA’), firstFtCTAPath: localStorage.getItem (’firstFtCTAPath’)}), lastFtCTA: fCTA, lastFtCTAPath}: document.URL, ); }}); </ Script> </div> <class figure = "wp-image-bloc"> <img src = "https://lh3.googleusercontent.com/7EP_nEAj8Pki73CeUAszIZ_eE_8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m-YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb-CNJ0n21" alt = "7EP NEAj8Pki73CeUAszIZ EE 8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb CNJ0n21 "> </ figure> <p>Comme vous pouvez le voir, le texte <code>Vos commentaires va ici. </code> apparaaît dans la zone de texte. Cependant, lorsque l’utilisateur commence à taper, ce texte disparaaît. Nous savons que ce texte est un espace réservé car il est en gris clair, alors que le texte par défaut, comme indiqué dans notre premier exemple dans cet article, apparaaît sous forme solide texte noir (sauf indication contraire). </p> </a > </div> <h2> attributs HTML zone de texte</h2><p><code><textarea> </code> accepte un ensemble d’attributs spécifiques à étiquette. ajout dans la <balise de code la balise> <textarea> </code> prend en charge tous <a href="/html-textarea/"> attributs globaux </a> en HTML. </p> <p>Voici les attributs de balise spécifique pris en charge par le <code><textarea> </code>: </p> <table class = "wp-bloc en table-info table"> <tbody> <tr> <td> <strong> Attributs </strong> </ td > <td> <strong> Valeur </strong> </ td> <td> <strong> description </strong> </ td> </ tr> <tr> <td> autofocus </ td> <td> mise au point automatique </ td> <td> Indique si le textarea doit être mise au point lorsque le document est chargé. </ td> </ tr> <tr> <td> Col. </ td> <td> numéro </ td> <td > Indique le nombre de lignes de texte affiché par défaut pour la zone de texte. </ td> </ tr> <tr> <td> désactivé </ td> <td> boolean </ td> <td> de activer la zone de texte pour la saisie de l’ utilisateur. </ td> </ tr> <tr> <td> forme </ td> <td> Module ID </ td> <td> zone de texte Lien vers un module. </ td> < / tr> <tr> <td> maxlength </ td> <td> numéro </ td> <td> Indique le nombre maximum de caractères acceptés par la zone de texte. <br> </ td> </ tr> <tr > <td> minlength </ td> <td> numéro </ td> <td> Indique le nombre minimum de caractères acceptés par la zone de texte. </ td> </ tr> <tr> <td> nom </ td > <td> nom </ td> <td> nom de la zone de texte. </ td> </ tr> <tr> <td> espace réservé </ td> <td> text </ td> <td> Fournit un texte espace réservé qui disparaaît lorsque l’utilisateur commence à taper dans la zone de texte. </ td> </ tr> <tr> <td> readonly </ td> <td> boolean </ td> <td> Indique que l’utilisateur ne peut pas modifier le contenu du textarea. </ td> </ tr> <tr> <td> requise </ td> <td> boolean </ td> <td> Indique que l’utilisateur doit remplir le formulaire. </ td> </ tr> <tr> <td> lignes </ td> <td> numéro </ td> <td> Indique le nombre de colonnes de texte affiché par défaut pour la zone de texte. </ td> </ tr> </ tbody> </ table> <h2></h2><h2> Conclusion</h2><p>Le HTML <code><textarea> </code> est utilisé pour créer des éléments d’entrée de texte multiligne. Ceux - ci peuvent être utiles si vous souhaitez collecter des chaaînes de données plus d’un utilisateur. </p> <p>Ce tutoriel a discuté, en se référant à des exemples, comment utiliser le <code><textarea> </code> pour créer zones de texte. Ce tutoriel a également fourni une table de référence avec les attributs de balise spécifique offerte par le <code><textarea> </code>. Vous êtes maintenant prêt à commencer à utiliser le <code><textarea> </code> comme un expert en HTML! </p>