Rumah >hujung hadapan web >html tutorial >TextArea Tag dalam HTML

TextArea Tag dalam HTML

WBOYasal: 2024-09-04 16:29:25912semak imbas

tag ialah salah satu daripada banyak tag HTML. <textarea> format teg dibahagikan kepada tiga bahagian utama, teg pembuka (<textarea>), kandungan dan teg penutup (). Pengguna boleh memasukkan teks melalui berbilang baris dengan menggunakan teg HTML dalam bentuk untuk mencipta kawasan teks. A tag mencipta kawasan teks yang boleh memuatkan banyak aksara.</p> <h3>Bagaimana <textarea> Teg berfungsi dalam HTML?</h3> <p>Elemen textarea mencipta kawasan atau ruang yang ditentukan menggunakan atribut seperti kol, baris atau kedua-duanya. Penggayaan CSS dan sifat ketinggian dan lebar boleh memformat rupa dan rasa.</p> <p><strong>Sintaks:</strong></p> <pre class="brush:php;toolbar:false"><textarea rows="3" cols="20"> Enter your text here... </textarea></pre> <h3>Atribut</h3> <p> <textarea> teg, seperti semua teg HTML lain, menerima beberapa atribut lain, yang juga biasa dalam <input> unsur bentuk. Mereka disenaraikan di bawah:</p> <ul> <li> <strong>autofokus</strong>: Atribut autofokus memastikan kawasan teks mendapat fokus secara automatik apabila halaman dimuatkan.</li> <li> <strong>cols</strong>: Atribut 'cols' menentukan lebar kawasan teks. Nilai itu mestilah integer positif. Jika tidak dinyatakan, nilai lalai ‘cols’ ialah 20.</li> <li> <strong>dilumpuhkan</strong>: Ciri ini melumpuhkan kawasan teks, membekukannya dan tidak menerima perubahan input pengguna. Melumpuhkan kawasan teks akan menyebabkan kekunci tab melangkaunya.</li> <li> <strong>borang</strong>: Atribut ‘form’ menentukan id borang yang menjadi milik kawasan teks.</li> <li> <strong>nama</strong>: Ia memberikan nama kepada kawalan teks.</li> <li> <strong>pemegang tempat</strong>: Atribut ini membantu pengguna dengan memberikan pembayang atau teks sampel yang membimbing perkara yang harus ditulis dalam kotak teks.</li> <li> <strong>baca sahaja</strong>: Atribut ini menetapkan kawasan teks dalam mod baca sahaja; iaitu, ia tidak terjejas oleh input pengguna atau tidak boleh menukar kandungannya.</li> <li> <strong>balut</strong>: Ciri ini menentukan cara kawasan teks akan membalut teks. Jika tidak dinyatakan, nilai lalai ialah ‘lembut.’</li> </ul> <h3>Contoh Teg TextArea dalam HTML</h3> <p>Untuk memahami kerja elemen kawasan teks dengan lebih lanjut, lihat contoh berikut yang mempunyai <textarea> tag dalam tindakan,</p> <h4>Contoh #1</h4> <p><strong>Kod:</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543856757259.jpg" alt="TextArea Tag dalam HTML" ></p> <p>Contoh di atas adalah mudah, menunjukkan ciri <textarea> unsur. Sebagai contoh, atribut 'id' adalah untuk tujuan kebolehaksesan. Satu lagi ciri menarik yang digunakan dalam contoh ini ialah atribut kol dan baris.</p> <p>Baris dan kol membolehkan pengaturcara menetapkan nilai sempadan untuk saiz kawasan teks, ruang tepat yang akan diperoleh oleh kawasan teks. Menggunakan atribut ini membantu dalam sokongan merentas pelayar dan ketekalan format kerana lalai penyemak imbas boleh berbeza.</p> <h4>Contoh #2</h4> <p><strong>Kod:</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>Output:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543856928836.jpg" alt="TextArea Tag dalam HTML" ></p> <p>Contoh di atas menunjukkan satu lagi set sifat yang digunakan bersama <textarea> tag, panjang maks dan panjang min. Panjang maksimum menentukan bilangan maksimum aksara yang boleh dimasukkan oleh pengguna dalam kawasan teks. Jadi di sini, pengguna boleh memasukkan aksara '60', termasuk aksara khas.</p> <p>Atribut panjang maksimum telah ditambahkan dalam HTML5; HTML tidak menyokong atribut ini. Kawasan teks memerlukan sekurang-kurangnya 10 aksara seperti yang ditetapkan oleh sifat 'minlength'. Atribut 'diperlukan' menunjukkan bahawa pengguna tidak boleh membiarkan kawasan teks kosong untuk dianggap sah dan diserahkan. Ia adalah pengesahan mudah untuk teg.</p> <h4>Contoh #3</h4> <p><strong>Kod:</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>Output:</strong></p> <p>Perhatikan bahawa kawasan teks 'Kotak Textarea 2' ialah kawasan teks yang diperlukan, manakala 'Kotak Textarea 1' dilumpuhkan.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543857055297.jpg" alt="TextArea Tag dalam HTML" ></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543857237912.jpg" alt="TextArea Tag dalam HTML" ></p> <h4>Contoh #4</h4> <p><strong>Kod:</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>Output:</strong></p> <p>Perhatikan output di bawah. Kotak textarea di bawah ialah medan 'diperlukan' dan seperti yang dinyatakan dalam kod di atas, medan ini dikaitkan dengan borang 'Borang 2'. Oleh itu, apabila kami cuba menyerahkan borang dengan kawasan teks kosong, ia menunjukkan amaran.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543857522484.jpg" alt="TextArea Tag dalam HTML" ></p> <h3>Kesimpulan</h3> <p> <textarea> elemen boleh menjadi elemen bersarang dalam <bentuk> teg atau boleh wujud di luar teg borang tetapi gunakan atribut 'bentuk' untuk mengaitkan dirinya dengan borang. Satu nota penting ialah elemen ini tidak mempunyai atribut 'nilai', jadi jika anda memerlukan teks lalai untuk kawasan teks anda, masukkan teks itu antara pembukaan dan penutup <textarea> tanda nama.</p><p>Atas ialah kandungan terperinci TextArea Tag dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</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>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="kbd Tag dalam HTML" href="https://m.php.cn/ms/faq/1796600119.html">kbd Tag dalam HTML</a></span><span>Artikel seterusnya：<a class="dBlack" title="kbd Tag dalam HTML" href="https://m.php.cn/ms/faq/1796600121.html">kbd Tag dalam HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</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/ms/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/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>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/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>