: TEXTAREA 要素</h1> <p class="page-updated">最終更新：2026-09-12</p> <h2><textarea>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>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="/ja/html/reference/global-attributes.html" class="ref-attr-link">すべてのグローバル属性を見る →</a> <a href="/ja/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=ja&mode=playground&embed=1&code=%7B%22html%22%3A%20%22%3C%21--%20%E8%A4%87%E6%95%B0%E8%A1%8C%E3%81%AE%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%20--%3E%5Cn%3Clabel%20for%3D%5C%22msg%5C%22%3E%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%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%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%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> 既定値は 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="/ja/html/forms.html" title="HTML Forms">HTML Forms</a> <a class="ref-tag-card" href="/ja/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="/ja/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="/ja/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="/ja/about/" class="footer-sm-link">私たちについて</a> <a href="/ja/about/privacy.html" class="footer-sm-link">プライバシーポリシー</a> <a href="/ja/about/disclaimer.html" class="footer-sm-link">免責事項</a> <a href="mailto:postmaster@web-tutorial.com" 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="/ja/updates.html">すべての更新を見る →</a> </p> </div> <div class="footer-col"> <h4>オンラインツール</h4> <a href="/ja/tools/code-highlighter.html">コードハイライト</a> <a href="/ja/tools/json-formatter.html">JSONフォーマッター</a> <a href="/ja/tools/color-converter.html">カラーコンバーター</a> <a href="/ja/tools/regex-tester.html">正規表現テスター</a> <a href="/ja/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>  <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="请描述一下您遇到的问题……">