: 文本域标签</h1> <p class="page-updated">最后更新：2026-09-12</p> <h2><textarea>文本域标签</h2> <p class="tutorial-intro">多行纯文本输入框，适合留言、评论、代码等长文本输入。</p> <div class="tag-quickinfo"><table class="ref-detail-table"><tbody> <tr><th>分类</th><td><span class="tag-badge badge-cat">表单</span></td></tr> <tr><th>内容模型</th><td>流式内容</td></tr> <tr><th>允许的父元素</th><td>接受流式内容的元素</td></tr> <tr><th>闭合标签</th><td>需要 <code></textarea></code> 标签</td></tr> <tr><th>状态</th><td><span class="tag-badge badge-stable">标准</span></td></tr> </tbody></table></div> <h2 id="syntax">📝 语法</h2> <pre class="ref-syntax-block"><code class="language-html"><textarea name="msg" rows="4" cols="50">默认文本</textarea></code></pre> <h2 id="attributes">⚙️ 属性</h2> <p class="ref-attr-intro">该元素支持全局属性及以下专有属性：</p> <table class="ref-detail-table"><thead><tr><th>属性</th><th>值</th><th>描述</th></tr></thead><tbody> <tr><td><code>name</code></td><td></td><td>提交到服务器的字段名。</td></tr> <tr><td><code>rows</code></td><td></td><td>可见行数。</td></tr> <tr><td><code>cols</code></td><td></td><td>可见列数（宽度）。</td></tr> <tr><td><code>placeholder</code></td><td></td><td>空值时的提示文字。</td></tr> <tr><td><code>required</code></td><td></td><td>提交前必须填写。</td></tr> <tr><td><code>maxlength</code></td><td></td><td>允许输入的最大字符数。</td></tr> <tr><td><code>readonly</code></td><td></td><td>只读，不可编辑。</td></tr> <tr><td><code>disabled</code></td><td></td><td>禁用该输入框。</td></tr> <tr><td><code>wrap</code></td><td></td><td>换行方式：soft（提交不含换行）或 hard（含换行）。</td></tr> </tbody></table> <div class="ref-attr-links"> <a href="/cn/html/reference/global-attributes.html" class="ref-attr-link">查看所有全局属性 →</a> <a href="/cn/html/reference/event-attributes.html" class="ref-attr-link">查看所有事件属性 →</a> </div> <h2 id="example" class="example-heading">▶ 示例</h2> <p class="tryit-intro">编辑下方代码，在 playground 中查看实时效果：</p> <div class="tryit-wrapper"><iframe class="tryit-iframe" src="/html/editor.html?lang=zh&mode=playground&embed=1&code=%7B%22html%22%3A%20%22%3C%21--%20%E5%A4%9A%E8%A1%8C%E7%95%99%E8%A8%80%E6%A1%86%20--%3E%5Cn%3Clabel%20for%3D%5C%22msg%5C%22%3E%E7%95%99%E8%A8%80%EF%BC%9A%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%22%E8%AF%B7%E8%BE%93%E5%85%A5%E6%82%A8%E7%9A%84%E7%95%99%E8%A8%80%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)">▶ 试一试</a></div> <h2 id="browser-support">🌐 浏览器支持</h2> <div class="ref-browser-support"> <table class="ref-browser-table"> <thead><tr> <th class="ref-browser-el">浏览器</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">所有主流浏览器均支持</td></tr> </tbody></table> </div> <div class="note-box tip"><strong>提示：</strong> textarea 的默认值写在开闭标签之间，不能用 value 属性设置。</div> <h2 id="related-tags">🏷️ 相关标签</h2> <div class="related-tags ref-tag-grid"> <a class="ref-tag-card" href="label.html" title="label 元素"><label></a> <a class="ref-tag-card" href="input.html" title="input 元素"><input></a> <a class="ref-tag-card" href="form.html" title="form 元素"><form></a> </div> <h2 id="related-cases">💡 相关案例</h2> <div class="ref-case-empty">更多案例即将上线，敬请期待。</div> <h2 id="see-also">📚 相关教程</h2> <div class="ref-tag-grid"> <a class="ref-tag-card" href="/cn/html/forms.html" title="HTML Forms">HTML Forms</a> <a class="ref-tag-card" href="/cn/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="/cn/html/reference/"> <div class="ref-tutorial-card-title">HTML 标签参考手册</div> <div class="ref-tutorial-card-desc">查看全部 HTML 标签的语法、属性与示例。</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 技术团队</strong></p> <p class="author-desc" itemprop="description">由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。</p> <p class="author-links"> <a href="/cn/about/" itemprop="url">关于我们</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> 本页目录</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>关于我们</h4> <a href="/cn/about/" class="footer-sm-link">关于我们</a> <a href="/cn/about/privacy.html" class="footer-sm-link">隐私政策</a> <a href="/cn/about/disclaimer.html" class="footer-sm-link">免责说明</a> <a href="javascript:void(0)" onclick="openReportModal()" class="footer-sm-link">纠错</a> </div> <div class="footer-col"> <h4>最近更新</h4> <p class="footer-sm"> 2026-09-07 Java 学习路线上线（5 种语言）<br> 2026-09-05 前端开发工程师能力图谱上线<br> 2026-09-03 JavaScript 学习路线上线<br> 2026-08-31 Vibe Coding 系列课程上线（7 门）<br> <a href="/cn/updates.html">查看所有更新 →</a> </p> </div> <div class="footer-col"> <h4>在线工具</h4> <a href="/cn/tools/code-highlighter.html">代码高亮</a> <a href="/cn/tools/json-formatter.html">JSON 格式化</a> <a href="/cn/tools/color-converter.html">颜色转换器</a> <a href="/cn/tools/regex-tester.html">正则测试</a> <a href="/cn/tools/base64.html">Base64 编解码</a> </div> <div class="footer-col"> <h4>联系我们</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 — 代码无国界</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="请描述一下您遇到的问题……">