: The TEXTAREA Element</h1> <p class="page-updated">Last updated: 2026-09-12</p> <h2><textarea>The TEXTAREA Element</h2> <p class="tutorial-intro">A multi-line plain-text input, ideal for comments, messages or code.</p> <div class="tag-quickinfo"><table class="ref-detail-table"><tbody> <tr><th>Category</th><td><span class="tag-badge badge-cat">Forms</span></td></tr> <tr><th>Content Model</th><td>Flow content</td></tr> <tr><th>Allowed Parents</th><td>Any element that accepts flow content</td></tr> <tr><th>Content Tag</th><td>Yes — requires closing <code></textarea></code> tag</td></tr> <tr><th>Status</th><td><span class="tag-badge badge-stable">Standard</span></td></tr> </tbody></table></div> <h2 id="syntax">📝 Syntax</h2> <pre class="ref-syntax-block"><code class="language-html"><textarea name="msg" rows="4" cols="50">Default text</textarea></code></pre> <h2 id="attributes">⚙️ Attributes</h2> <p class="ref-attr-intro">This element supports the global attributes plus the following:</p> <table class="ref-detail-table"><thead><tr><th>Attribute</th><th>Value</th><th>Description</th></tr></thead><tbody> <tr><td><code>name</code></td><td></td><td>Field name sent to the server.</td></tr> <tr><td><code>rows</code></td><td></td><td>Number of visible rows.</td></tr> <tr><td><code>cols</code></td><td></td><td>Number of visible columns (width).</td></tr> <tr><td><code>placeholder</code></td><td></td><td>Hint shown when empty.</td></tr> <tr><td><code>required</code></td><td></td><td>Must be filled before submit.</td></tr> <tr><td><code>maxlength</code></td><td></td><td>Maximum number of characters.</td></tr> <tr><td><code>readonly</code></td><td></td><td>Read-only, not editable.</td></tr> <tr><td><code>disabled</code></td><td></td><td>Disables the field.</td></tr> <tr><td><code>wrap</code></td><td></td><td>Wrapping: soft or hard.</td></tr> </tbody></table> <div class="ref-attr-links"> <a href="/html/reference/global-attributes.html" class="ref-attr-link">See all global attributes →</a> <a href="/html/reference/event-attributes.html" class="ref-attr-link">See all event attributes →</a> </div> <h2 id="example" class="example-heading">▶ Example</h2> <p class="tryit-intro">Edit the code below and see the live result in the playground:</p> <div class="tryit-wrapper"><iframe class="tryit-iframe" src="/html/editor.html?lang=en&mode=playground&embed=1&code=%7B%22html%22%3A%20%22%3C%21--%20Multi-line%20message%20box%20--%3E%5Cn%3Clabel%20for%3D%5C%22msg%5C%22%3EMessage%3A%3C%2Flabel%3E%5Cn%3Ctextarea%20id%3D%5C%22msg%5C%22%20name%3D%5C%22msg%5C%22%20rows%3D%5C%224%5C%22%20cols%3D%5C%2240%5C%22%20placeholder%3D%5C%22Enter%20your%20message%5C%22%3E%3C%2Ftextarea%3E%22%2C%20%22css%22%3A%20%22%22%2C%20%22js%22%3A%20%22%22%7D" sandbox="allow-scripts allow-modals allow-same-origin allow-forms" title="Try It playground"></iframe></div> <div class="tryit-actions"><a href="javascript:void(0)" class="btn-try" onclick="openEditorModal(this)">▶ Try it</a></div> <h2 id="browser-support">🌐 Browser Support</h2> <div class="ref-browser-support"> <table class="ref-browser-table"> <thead><tr> <th class="ref-browser-el">Browser</th> <th class="ref-browser-th"><img src="/assets/images/Browser/chrome.svg" alt="Chrome" class="ref-browser-icon"><span class="ref-browser-name">Chrome</span></th> <th class="ref-browser-th"><img src="/assets/images/Browser/edge.svg" alt="Edge" class="ref-browser-icon"><span class="ref-browser-name">Edge</span></th> <th class="ref-browser-th"><img src="/assets/images/Browser/firefox.svg" alt="Firefox" class="ref-browser-icon"><span class="ref-browser-name">Firefox</span></th> <th class="ref-browser-th"><img src="/assets/images/Browser/safari-.svg" alt="Safari" class="ref-browser-icon"><span class="ref-browser-name">Safari</span></th> <th class="ref-browser-th"><img src="/assets/images/Browser/opera.svg" alt="Opera" class="ref-browser-icon"><span class="ref-browser-name">Opera</span></th> </tr></thead> <tbody><tr> <td class="ref-browser-el"><textarea></td> <td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v1</span></td> <td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v12</span></td> <td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v1</span></td> <td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v1</span></td> <td class="ref-browser-yes"><span class="ref-check">✓</span> <span class="ref-ver">v1</span></td> </tr> <tr><td colspan="6" class="ref-browser-all">Supported in all major browsers</td></tr> </tbody></table> </div> <div class="note-box tip"><strong>Tip：</strong> The default value goes between the tags, not in a value attribute.</div> <h2 id="related-tags">🏷️ Related Tags</h2> <div class="related-tags ref-tag-grid"> <a class="ref-tag-card" href="label.html" title="label element"><label></a> <a class="ref-tag-card" href="input.html" title="input element"><input></a> <a class="ref-tag-card" href="form.html" title="form element"><form></a> </div> <h2 id="related-cases">💡 Related Cases</h2> <div class="ref-case-empty">More case studies coming soon — check back later.</div> <h2 id="see-also">📚 Related Tutorials</h2> <div class="ref-tag-grid"> <a class="ref-tag-card" href="/html/forms.html" title="HTML Forms">HTML Forms</a> <a class="ref-tag-card" href="/html/input-types.html" title="HTML Input Types Reference">HTML Input Types Reference</a> </div> <div class="ref-tutorial-grid"> <a class="ref-tutorial-card" href="/html/reference/"> <div class="ref-tutorial-card-title">HTML Tag Reference</div> <div class="ref-tutorial-card-desc">Browse all HTML tags with syntax, attributes and examples.</div> </a> </div>  <nav class="page-nav"> </nav> <div class="author-bio" itemscope itemtype="https://schema.org/Organization"> <div class="author-avatar"> <img src="/assets/images/logo.png" alt="Web-Tutorial.com" width="48" height="48" loading="lazy" itemprop="logo"> </div> <div class="author-info"> <p class="author-name"><strong itemprop="name">Web-Tutorial Tech Team</strong></p> <p class="author-desc" itemprop="description">A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.</p> <p class="author-links"> <a href="/about/" itemprop="url">About Us</a> </p> </div> </div> </main>  <aside class="tutorial-sidebar" id="tutorialSidebar"> <button class="sidebar-toggle" id="sidebarToggle" aria-label="Toggle sidebar">◀</button> <div class="sidebar-scroll"> <div class="sidebar-toc-title"><span class="toc-icon">📄</span> On this page</div> <div class="sidebar-toc" id="sidebarToc"></div> <div class="sidebar-ads" data-ad-zone="sidebar"> <div id="ad-slot-b1" class="ad-widget" data-ad-slot="sidebar-top" data-ad-format="rectangle" aria-hidden="true"></div> </div> </div> </aside> </div> <div class="font-toolbar" id="fontToolbar"> <button class="ft-btn" onclick="changeFontSize(-1)" aria-label="Decrease font size" title="Decrease font size">A−</button> <span class="ft-label" id="ftLabel">100%</span> <button class="ft-btn" onclick="changeFontSize(1)" aria-label="Increase font size" title="Increase font size">A+</button> </div> <button id="backTop" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top">↑</button> <script src="/assets/js/tutorial.js" defer></script>  <div class="editor-modal" id="editorModal" onclick="if(event.target===this)closeEditorModal()"> <div class="editor-modal-box"> <iframe id="editorIframe" src="about:blank" sandbox="allow-scripts allow-modals allow-same-origin allow-forms"></iframe> </div> </div> <footer class="footer"> <div class="footer-inner"> <div class="footer-col"> <h4>About</h4> <a href="/about/" class="footer-sm-link">About Us</a> <a href="/about/privacy.html" class="footer-sm-link">Privacy Policy</a> <a href="/about/disclaimer.html" class="footer-sm-link">Disclaimer</a> <a href="mailto:postmaster@web-tutorial.com" class="footer-sm-link">Corrections</a> </div> <div class="footer-col"> <h4>Recent Updates</h4> <p class="footer-sm"> 2026-09-07 Java Learning Roadmap launched (5 languages)<br> 2026-09-05 Frontend Developer Capability Map launched<br> 2026-09-03 JavaScript Roadmap launched<br> 2026-08-31 Vibe Coding series completed (7 courses)<br> <a href="/updates.html">View all updates →</a> </p> </div> <div class="footer-col"> <h4>Online Tools</h4> <a href="/tools/code-highlighter.html">Code Highlighter</a> <a href="/tools/json-formatter.html">JSON Formatter</a> <a href="/tools/color-converter.html">Color Converter</a> <a href="/tools/regex-tester.html">Regex Tester</a> <a href="/tools/base64.html">Base64 Encode/Decode</a> </div> <div class="footer-col"> <h4>Contact</h4> <a href="mailto:postmaster@web-tutorial.com">📧 postmaster@web-tutorial.com</a> <a href="https://github.com/webtutorialcom">🐙 GitHub</a> <a href="https://x.com/webtutorialcom">🐦 Twitter</a> </div> </div> <div class="footer-bottom"> <p>© 2026 Web-Tutorial.com — Code Without Borders</p> </div> </footer>  <style> /* ── 浮动按钮 ── / #report-float-btn { position: fixed; bottom: 24px; right: 80px; z-index: 9999; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--color-primary, #2563eb); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 3px 12px rgba(37,99,235,0.35); transition: transform 0.2s, box-shadow 0.2s; display: flex; align-items: center; justify-content: center; line-height: 1; } #report-float-btn:hover { transform: scale(1.1); box-shadow: 0 4px 16px rgba(37,99,235,0.5); } / ── 模态窗遮罩 ── / #report-modal-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); align-items: center; justify-content: center; } #report-modal-overlay.open { display: flex; } / ── 模态窗卡片 ── / .report-modal-box { background: #fff; border-radius: 14px; padding: 28px 32px 24px; max-width: 640px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.2); position: relative; } .report-modal-box h3 { margin: 0 0 12px 0; font-size: 18px; font-weight: 700; color: #1a1a2e; display: flex; align-items: center; gap: 8px; } .report-modal-box .close-x { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 22px; cursor: pointer; color: #999; line-height: 1; padding: 4px; } .report-modal-box .close-x:hover { color: #333; } .report-modal-box label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 6px; } .report-page-url { font-size: 12px; color: #888; margin-bottom: 16px; word-break: break-all; padding: 6px 10px; background: #f5f5f5; border-radius: 6px; } / ── 顶部暖文区 ── / .report-welcome { font-size: 14px; line-height: 1.7; color: #555; margin-bottom: 20px; padding: 14px 16px; background: #f0f7ff; border-radius: 10px; border-left: 3px solid var(--color-primary, #2563eb); } / ── 类型标签 ── / .report-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .report-type-tag { padding: 6px 14px; border-radius: 20px; border: 1.5px solid #ddd; background: #fafafa; font-size: 13px; cursor: pointer; transition: all 0.15s; color: #444; user-select: none; } .report-type-tag:hover { border-color: var(--color-primary, #2563eb); color: var(--color-primary, #2563eb); } .report-type-tag.active { background: var(--color-primary, #2563eb); border-color: var(--color-primary, #2563eb); color: #fff; } / ── 描述文本框 ── / .report-desc { width: 100%; height: 140px; padding: 10px 12px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 14px; font-family: inherit; resize: none; box-sizing: border-box; transition: border-color 0.15s; } .report-desc:focus { outline: none; border-color: var(--color-primary, #2563eb); } / ── 提交按钮 ── / .report-submit { display: block; width: 100%; padding: 11px 0; margin-top: 16px; border: none; border-radius: 8px; background: var(--color-primary, #2563eb); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; } .report-submit:hover { opacity: 0.9; } .report-submit:disabled { opacity: 0.5; cursor: not-allowed; } / ── 成功/失败消息 ── / .report-msg { display: none; text-align: center; padding: 32px 16px; font-size: 15px; font-weight: 500; line-height: 1.7; } .report-msg.show { display: block; } .report-msg.success { color: #2563eb; } .report-msg.error { color: #e74c3c; } .report-msg .report-msg-icon { font-size: 40px; display: block; margin-bottom: 12px; } / ── 蜜罐（对用户不可见） ── / .report-honeypot { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; overflow: hidden; } / ── RTL 适配 ── */ [dir="rtl"] #report-float-btn { right: auto; left: 24px; } [dir="rtl"] .report-modal-box .close-x { right: auto; left: 16px; } [dir="rtl"] .report-welcome { border-left: none; border-right: 3px solid var(--color-primary, #2563eb); } </style> <div id="report-bug-root">  <button id="report-float-btn" onclick="openReportModal()" aria-label="Report issue" title="Report issue">📝</button>  <div id="report-modal-overlay" onclick="closeReportModal(event)"> <div class="report-modal-box" onclick="event.stopPropagation()"> <button class="close-x" onclick="closeReportModal()" aria-label="Close">×</button>  <div id="report-form-area"> <h3 id="report-title">🙏 帮我们做得更好</h3>  <div class="report-welcome" id="report-welcome"> 我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……<br><br> 如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏 </div>  <div class="report-page-url" id="report-url-display" style="display:none"></div> <label id="report-type-label">问题类型</label> <div class="report-types" id="report-type-tags"></div> <label id="report-desc-label">问题描述</label> <textarea class="report-desc" id="report-desc" rows="4" placeholder="请描述一下您遇到的问题……">