Heim > Artikel > Web-Frontend > TextArea-Tag in HTML

TextArea-Tag in HTML

WBOYOriginal: 2024-09-04 16:29:25844Durchsuche

Die tag ist eines der vielen HTML-Tags. Der <textarea> Das Tag-Format ist in drei Hauptteile unterteilt: ein öffnendes Tag (<textarea>), den Inhalt und das schließende Tag (). Benutzer können Text über mehrere Zeilen eingeben, indem sie das HTML-Tag in einem Formular verwenden, um einen Textbereich zu erstellen. Ein Tag erstellt einen Textbereich, der viele Zeichen aufnehmen kann.</p> <h3>Wie <textarea> Tag-Arbeit in HTML?</h3> <p>Ein Textarea-Element erstellt einen Bereich oder Raum, der mithilfe von Attributen wie Spalten, Zeilen oder beidem angegeben wird. CSS-Stil sowie Höhen- und Breiteneigenschaften können das Erscheinungsbild formatieren.</p> <p><strong>Syntax:</strong></p> <pre class="brush:php;toolbar:false"><textarea rows="3" cols="20"> Enter your text here... </textarea></pre> <h3>Attribute</h3> <p>Die <textarea> Das Tag akzeptiert wie alle anderen HTML-Tags eine Reihe anderer Attribute, die auch in <input> häufig vorkommen. Formularelement. Sie sind unten aufgeführt:</p> <ul> <li> <strong>Autofokus</strong>: Das Autofokus-Attribut stellt sicher, dass der Textbereich beim Laden der Seite automatisch den Fokus erhält.</li> <li> <strong>cols</strong>: Das Attribut „cols“ gibt die Breite des Textbereichs an. Der Wert sollte eine positive ganze Zahl sein. Wenn nicht angegeben, ist der Standardwert von „cols“ 20.</li> <li> <strong>deaktiviert</strong>: Diese Funktion deaktiviert den Textbereich, friert ihn ein und akzeptiert keine Änderungen der Benutzereingaben. Wenn Sie den Textbereich deaktivieren, wird er mit der Tabulatortaste übersprungen.</li> <li> <strong>form</strong>: Das Attribut „form“ gibt die Formular-ID an, zu der der Textbereich gehört.</li> <li> <strong>Name</strong>: Weist dem Textsteuerelement einen Namen zu.</li> <li> <strong>Platzhalter</strong>: Dieses Attribut hilft dem Benutzer, indem es einen Hinweis oder einen Beispieltext bereitstellt, der anleitet, was in das Textfeld geschrieben werden soll.</li> <li> <strong>readonly</strong>: Dieses Attribut setzt den Textbereich in den schreibgeschützten Modus; das heißt, es wird nicht durch die Eingabe des Benutzers beeinflusst oder kann seinen Inhalt nicht ändern.</li> <li> <strong>Umbruch</strong>: Diese Funktion gibt an, wie der Textbereich den Text umbricht. Wenn nicht angegeben, ist der Standardwert „soft“.</li> </ul> <h3>Beispiele für TextArea-Tags in HTML</h3> <p>Um die Funktion des Textbereichselements besser zu verstehen, sehen Sie sich das folgende Beispiel an, in dem <textarea> Tag in Aktion,</p> <h4>Beispiel #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>Ausgabe:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543856757259.jpg" alt="TextArea-Tag in HTML" ></p> <p>Das obige Beispiel ist einfach und demonstriert die Funktionen von <textarea> Element. Das Attribut „id“ dient beispielsweise der Barrierefreiheit. Eine weitere interessante Funktion, die in diesem Beispiel verwendet wird, sind die Attribute „cols“ und „rows“.</p> <p>Die Zeilen und Spalten ermöglichen es dem Programmierer, die Grenzwerte für die Größe des Textbereichs festzulegen, also den genauen Platz, den der Textbereich einnimmt. Die Verwendung dieser Attribute trägt zur browserübergreifenden Unterstützung und Formatkonsistenz bei, da die Browser-Standardeinstellungen unterschiedlich sein können.</p> <h4>Beispiel #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>Ausgabe:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543856928836.jpg" alt="TextArea-Tag in HTML" ></p> <p>Das obige Beispiel zeigt einen weiteren Satz von Eigenschaften, die neben <textarea> verwendet werden. Tag, maximale Länge und minimale Länge. Die maximale Länge gibt die maximale Anzahl von Zeichen an, die ein Benutzer in den Textbereich eingeben kann. Hier kann der Benutzer also „60“ Zeichen eingeben, einschließlich Sonderzeichen.</p> <p>Das Attribut „Maximale Länge“ wurde in HTML5 hinzugefügt; HTML unterstützte dieses Attribut nicht. Der Textbereich erfordert mindestens 10 Zeichen, wie durch die Eigenschaft „minlength“ festgelegt. Das „erforderliche“ Attribut gibt an, dass der Benutzer den Textbereich nicht leer lassen darf, um als gültig zu gelten und übermittelt zu werden. Es handelt sich um eine einfache Validierung des Tags.</p> <h4>Beispiel #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>Ausgabe:</strong></p> <p>Beachten Sie, dass der Textbereich „Textarea Box 2“ ein erforderlicher Textbereich ist, während der Textbereich „Textarea Box 1“ deaktiviert ist.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543857055297.jpg" alt="TextArea-Tag in HTML" ></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543857237912.jpg" alt="TextArea-Tag in HTML" ></p> <h4>Beispiel #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>Ausgabe:</strong></p> <p>Beachten Sie die Ausgabe unten. Das Textfeld unten ist ein „erforderliches“ Feld, und wie im obigen Code erwähnt, ist dieses Feld mit dem Formular „Form 2“ verknüpft. Wenn wir also versuchen, das Formular mit einem leeren Textbereich abzusenden, wird eine Warnung angezeigt.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543857522484.jpg" alt="TextArea-Tag in HTML" ></p> <h3>Fazit</h3> <p>Die <textarea> Das Element kann ein verschachteltes Element innerhalb eines <form> sein. Tag oder kann außerhalb eines Formular-Tags vorhanden sein, aber das Attribut „form“ verwenden, um sich einem Formular zuzuordnen. Ein wichtiger Hinweis ist, dass dieses Element kein „Wert“-Attribut hat. Wenn Sie also einen Standardtext für Ihren Textbereich benötigen, geben Sie diesen Text zwischen dem öffnenden und dem schließenden <textarea> ein. Tags.</p><p>Das obige ist der detaillierte Inhalt vonTextArea-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</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>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="kbd-Tag in HTML" href="http://m.php.cn/de/faq/1796600119.html">kbd-Tag in HTML</a></span><span>Nächster Artikel：<a class="dBlack" title="kbd-Tag in HTML" href="http://m.php.cn/de/faq/1796600121.html">kbd-Tag in HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><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></html>