Maison >interface Web >tutoriel HTML >Balise TextArea en HTML

Balise TextArea en HTML

WBOYoriginal: 2024-09-04 16:29:25925parcourir

La zone La balise est l'une des nombreuses balises HTML. La zone <textarea> Le format de balise est divisé en trois parties principales : une balise d'ouverture (<textarea>), le contenu et la balise de fermeture (). Les utilisateurs peuvent saisir du texte sur plusieurs lignes en utilisant la balise HTML dans un formulaire pour créer une zone de texte. Une La balise crée une zone de texte pouvant contenir de nombreux caractères.</p> <h3>Comment <textarea> Les balises fonctionnent en HTML ?</h3> <p>Un élément textarea crée une zone ou un espace spécifié à l'aide d'attributs tels que des colonnes, des lignes ou les deux. Le style CSS et les propriétés de hauteur et de largeur peuvent formater l'apparence.</p> <p><strong>Syntaxe :</strong></p> <pre class="brush:php;toolbar:false"><textarea rows="3" cols="20"> Enter your text here... </textarea></pre> <h3>Attributs</h3> <p>La zone <textarea> La balise, comme toutes les autres balises HTML, accepte un certain nombre d'autres attributs, qui sont également courants dans <input> élément de formulaire. Ils sont listés ci-dessous :</p> <ul> <li> <strong>autofocus</strong> : L'attribut autofocus garantit que la zone de texte obtient automatiquement le focus lors du chargement de la page.</li> <li> <strong>cols</strong> : L'attribut 'cols' spécifie la largeur de la zone de texte. La valeur doit être un entier positif. Si elle n’est pas spécifiée, la valeur par défaut de « cols » est 20.</li> <li> <strong>désactivé</strong> : cette fonctionnalité désactive la zone de texte, la gèle et n'accepte pas les modifications apportées par l'utilisateur. La désactivation de la zone de texte entraînera son saut avec la touche de tabulation.</li> <li> <strong>form</strong> : L'attribut 'form' spécifie l'identifiant du formulaire auquel appartient la zone de texte.</li> <li> <strong>nom</strong> : Il attribue un nom au contrôle de texte.</li> <li> <strong>placeholder</strong> : cet attribut aide l'utilisateur en fournissant un indice ou un exemple de texte qui guide ce qui doit être écrit dans la zone de texte.</li> <li> <strong>readonly</strong> : Cet attribut définit la zone de texte en mode lecture seule ; c'est-à-dire qu'il n'est pas affecté par la saisie de l'utilisateur ou ne peut pas modifier son contenu.</li> <li> <strong>wrap</strong> : Cette fonctionnalité spécifie comment la zone de texte enveloppera le texte. Si elle n’est pas spécifiée, la valeur par défaut est « soft ».</li> </ul> <h3>Exemples de balises TextArea en HTML</h3> <p>Pour mieux comprendre le travail de l'élément de zone de texte, consultez l'exemple suivant qui a <textarea> tag en action,</p> <h4>Exemple n°1</h4> <p><strong>Code :</strong></p> <pre class="brush:php;toolbar:false"><form> <p>Leave your Comment:</p> <br /> <textarea id="ta" cols="60" rows="5"> Write Here...</textarea></form></pre> <p><strong>Sortie :</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543856757259.jpg" alt="Balise TextArea en HTML" ></p> <p>L'exemple ci-dessus est simple et démontre les fonctionnalités de <textarea> élément. Par exemple, l'attribut « id » est destiné à des fins d'accessibilité. Une autre fonctionnalité intéressante utilisée dans cet exemple concerne les attributs cols et rows.</p> <p>Les lignes et les colonnes permettent au programmeur de définir les valeurs limites pour la taille de la zone de texte, l'espace exact que la zone de texte acquerra. L'utilisation de ces attributs contribue à la prise en charge entre navigateurs et à la cohérence du format, car les paramètres par défaut du navigateur peuvent être différents.</p> <h4>Exemple n°2</h4> <p><strong>Code :</strong></p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title> Textarea HTML Tag Demo </title> </head> <body> <form> <p>Fill the Detail:</p> <br /> <textarea rows="5" cols="40" name="demo" maxlength="60" minlength="10" required="required">Enter your name</textarea> <br /> <input type="submit" name="Submit" value="Submit" /> </form> </body> </html></pre> <p><strong>Sortie :</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543856928836.jpg" alt="Balise TextArea en HTML" ></p> <p>L'exemple ci-dessus montre un autre ensemble de propriétés utilisées avec <textarea> balise, longueur maximale et longueur minimale. maxlength spécifie le nombre maximum de caractères qu'un utilisateur peut saisir dans la zone de texte. Ici, l’utilisateur peut donc saisir « 60 » caractères, caractères spéciaux inclus.</p> <p>L'attribut de longueur maximale a été ajouté en HTML5 ; HTML ne prenait pas en charge cet attribut. La zone de texte nécessite un minimum de 10 caractères, tel que défini par la propriété « minlength ». L'attribut « obligatoire » indique que l'utilisateur ne doit pas laisser la zone de texte vide pour être considéré comme valide et soumis. C'est une simple validation du tag.</p> <h4>Exemple #3</h4> <p><strong>Code :</strong></p> <pre class="brush:php;toolbar:false"><form id="Form1"> <label>Textarea Box 1</label> <br /> <textarea rows="5" cols="40" name="demo" maxlength="60" minlength="10" disabled="disabled"> This is Disabled</textarea> <br /> <label>Textarea Box 2</label> <br /> <textarea rows="5" cols="40" required="required"></textarea> <br /> <label>Textarea Box 3</label> <br /> <textarea rows="5" cols="40" placeholder="This is readonly textarea" readonly="readonly"></textarea> <br /> <input type="submit" name="Submit" value="Submit" /> </form></pre> <p><strong>Sortie :</strong></p> <p>Observez que la zone de texte « Textarea Box 2 » est une zone de texte obligatoire, alors que la « Textarea Box 1 » est désactivée.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543857055297.jpg" alt="Balise TextArea en HTML" ></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543857237912.jpg" alt="Balise TextArea en HTML" ></p> <h4>Exemple n°4</h4> <p><strong>Code :</strong></p> <pre class="brush:php;toolbar:false"><form id="label2" action="textareaDemo.html"> <fieldset> <legend><b>Form 2</b></legend> <input type="text" name="FN" value="Name" /> <br /> <input type="submit" name="Submit" value="Submit" /> <br /> </fieldset> </form> <textarea rows="5" cols="40" form="label2" required="required"></textarea> <br /> <p>Above Text Area belongs to 'Form 2'</p></pre> <p><strong>Sortie :</strong></p> <p>Notez le résultat ci-dessous. La zone de texte ci-dessous est un champ « obligatoire » et, comme mentionné dans le code ci-dessus, ce champ est associé au formulaire « Formulaire 2 ». Ainsi, lorsque nous essayons de soumettre le formulaire avec une zone de texte vide, une alerte s'affiche.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543857522484.jpg" alt="Balise TextArea en HTML" ></p> <h3>Conclusion</h3> <p>La zone <textarea> element peut être un élément imbriqué dans un <form> ou peut exister en dehors d'une balise de formulaire mais utilise l'attribut 'form' pour s'associer à un formulaire. Une remarque importante est que cet élément n'a pas d'attribut « valeur », donc si vous avez besoin d'un texte par défaut pour votre zone de texte, saisissez ce texte entre l'ouverture et la fermeture <textarea> balises.</p><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Integer</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">format</a> <a href="javascript:void(0);">try</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Length</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">number</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">alert</a> <a href="javascript:void(0);">input</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Balise kbd en HTML" href="https://m.php.cn/fr/faq/1796600119.html">Balise kbd en HTML</a></span><span>Article suivant：<a class="dBlack" title="Balise kbd en HTML" href="https://m.php.cn/fr/faq/1796600121.html">Balise kbd en HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script></html>