diff --git a/en/use-dify/nodes/template.mdx b/en/use-dify/nodes/template.mdx
index 2a2e91bd9..e450cf203 100644
--- a/en/use-dify/nodes/template.mdx
+++ b/en/use-dify/nodes/template.mdx
@@ -62,7 +62,7 @@ Jinja2 filters transform data during template rendering:
 {{ name | upper }}
 {{ price | round(2) }}
 {{ content | replace('\n', '<br>') }}
-{{ timestamp | strftime('%B %d, %Y') }}
+{{ tags | join(', ') }}
 {{ score | default('No score available') }}
 ```
 
@@ -77,30 +77,107 @@ Handle missing or invalid data gracefully using default values and conditional c
 
 ## Interactive Forms
 
-Templates can generate interactive HTML forms for structured data collection in chat interfaces:
+Templates can generate interactive HTML forms for structured data collection in Chatflows.
+
+On submit, the form values are sent to the chat as the end user's next message. The format depends on the `<form>`'s `data-format` attribute:
+
+- **`data-format="json"`**: values are serialized as a JSON object. A downstream Code node or Parameter Extractor can `JSON.parse` it (or pattern-match it) to pull out each field.
+- **Unset (or any other value)**: values are sent as plain text, one `name: value` per line. Easier for an LLM to read.
+
+For example:
+
+<Columns>
+  <Column>
 
 ```html
 <form data-format="json">
   <label for="username">Username:</label>
-  <input type="text" name="username" required />
-  
-  <label for="priority">Priority:</label>
-  <input type="select" name="priority" data-options='["low","medium","high"]'/>
-  
-  <label for="message">Message:</label>
-  <textarea name="message" placeholder="Enter your message"></textarea>
-  
-  <input type="checkbox" name="urgent" data-tip="Mark as urgent"/>
-  <button data-variant="primary">Submit</button>
+  <input type="text" name="username" placeholder="Please enter" />
+  <label for="password">Password:</label>
+  <input type="password" name="password" placeholder="Please enter" />
+  <label for="content">Content:</label>
+  <textarea name="content"></textarea>
+  <label for="date">Date:</label>
+  <input type="date" name="date" />
+  <label for="time">Time:</label>
+  <input type="time" name="time" />
+  <label for="datetime">Datetime:</label>
+  <input type="datetime" name="datetime" />
+  <label for="select">Select:</label>
+  <input type="select" name="select" data-options='["Option A","Option B","Option C"]' />
+  <input type="checkbox" name="agreed" data-tip="By checking this means you agreed" />
+  <button data-variant="primary">Login</button>
 </form>
 ```
 
-<Frame caption="Interactive Form Rendered in Chat Interface">
-  ![Interactive Form Rendered in Chat Interface](https://assets-docs.dify.ai/2025/04/9d24e9cfa3cdde00e4eee15bd4bbea76.png)
+  </Column>
+  <Column>
+    <Frame>
+      <img src="https://assets-docs.dify.ai/2025/04/9d24e9cfa3cdde00e4eee15bd4bbea76.png" alt="Interactive Form Rendered in Chat Interface" width="100%" />
+    </Frame>
+  </Column>
+</Columns>
+
+### Supported Tags
+
+| <div style={{width: '30px'}}>Tag</div> | Attributes | Notes |
+|:---|:---|:---|
+| `<form>` | `data-format` | Container for form fields.<br></br><br></br>Set `data-format="json"` to receive submissions as JSON; any other value (or unset) sends plain text. |
+| `<label>` | `for` | Renders the inner text as a field label.<br></br><br></br>Set `for` to the field's `name` to associate them. Place the `<label>` before its field in the source so it appears above. |
+| `<input>` | `type`, `name`, `value`, `placeholder`, `checked`, `data-tip`, `data-options` | See input types below. `name` is required for the field to appear in the submission and must match `[A-Za-z][A-Za-z0-9_-]*`. |
+| `<textarea>` | `name`, `placeholder`, `value` | Multi-line text input. |
+| `<button>` | `data-variant`, `data-size` | Submits the form. <ul><li>Variants: `primary`, `warning`, `secondary`, `secondary-accent`, `ghost`, `ghost-accent`, `tertiary`.</li><li>Sizes: `small`, `medium`, `large`.</li></ul>Values outside these lists are ignored and the button falls back to the default styling.<br></br><br></br>Ignores `data-message` and `data-link`, which only apply to [quick-reply buttons](#quick-reply-buttons).|
+
+<Note>
+Do not leave blank lines between tags inside `<form>`. A blank line ends the HTML block during markdown parsing, and any tags after the break will fail to render as form fields.
+</Note>
+
+### Supported Input Types
+
+| `type` value | Renders as | Submitted as |
+|:---|:---|:---|
+| `text`, `password`, `email`, `number` | Single-line input with matching HTML semantics | String |
+| `date` | Date picker | ISO date string (e.g., `2026-01-10`) |
+| `datetime` | Date picker with time selection | ISO date-time string (e.g., `2026-01-10T14:30:00.000+08:00`) |
+| `time` | Time picker | String (includes a full date prefix, not just the time) |
+| `checkbox` | Checkbox followed by the `data-tip` text as a label | Boolean (`true` or `false`) |
+| `select` | Dropdown built from the `data-options` JSON array of strings | Selected option string |
+| `hidden` | Renders as an `<input type="hidden">` element; not visible in the UI | String |
+
+- Any other `type` value renders an "Unsupported tag" fallback in place of the field.
+
+- HTML5 validation attributes such as `required`, `min`, `max`, and `pattern` are not enforced.
+
+- Browsers may autofill `<input type="password">` and `<input type="email">` with saved credentials for the current site; use `<input type="text">` for fields that should not be prefilled.
+
+### Quick-Reply Buttons
+
+A standalone `<button>` placed outside any `<form>` renders as a clickable button in the chat. Use these to offer canned responses or external links inline with the assistant's message. For example:
+
+```html wrap
+Would you like to see more options?
+<button data-variant="primary" data-message="Yes, show me more">Yes</button> <button data-variant="secondary" data-message="No, that is enough">No</button> <button data-variant="secondary-accent" data-link="https://docs.dify.ai">Read the docs</button>
+```
+
+<Frame>
+  ![Quick Reply Button](/images/use-dify/workflow/template-quick-reply-button.png)
 </Frame>
 
-When users submit forms, responses become structured JSON data available for immediate processing in downstream workflow nodes.
+| Attribute | Click behavior |
+|:---|:---|
+| `data-message` | Sends the text as the end user's next chat message. |
+| `data-link` | Opens the URL in a new tab. Must be a valid URL. |
+
+If both are set, `data-link` takes precedence. A button with neither renders but performs no action when clicked. 
+
+Apply `data-variant` and `data-size` for styling, using the same values listed for [form buttons above](#supported-tags).
+
+<Note>
+Unlike form buttons, standalone buttons pass `data-variant` and `data-size` through to the underlying component without validation. An unrecognized value can leave the button rendered as plain text rather than a styled button. 
+
+Use only the values listed above.
+</Note>
 
 ## Output Limits
 
-Template output is limited to **80,000 characters** (configurable via `TEMPLATE_TRANSFORM_MAX_LENGTH`). This prevents memory issues and ensures reasonable processing times for large template outputs.
+Template output is limited to **400,000 characters** (configurable via `TEMPLATE_TRANSFORM_MAX_LENGTH`). This prevents memory issues and ensures reasonable processing times for large template outputs.
diff --git a/images/use-dify/workflow/template-quick-reply-button.png b/images/use-dify/workflow/template-quick-reply-button.png
new file mode 100644
index 000000000..33e732190
Binary files /dev/null and b/images/use-dify/workflow/template-quick-reply-button.png differ
diff --git a/ja/use-dify/nodes/template.mdx b/ja/use-dify/nodes/template.mdx
index ed04164f9..3539bfe0d 100644
--- a/ja/use-dify/nodes/template.mdx
+++ b/ja/use-dify/nodes/template.mdx
@@ -1,24 +1,23 @@
 ---
-title: "テンプレート"
-description: "Jinja2テンプレートを使用してデータを変換およびフォーマット"
+title: テンプレート
+description: Jinja2 テンプレートを使用してデータを変換およびフォーマット
 ---
 
 <Note> ⚠️ このドキュメントは AI によって自動翻訳されています。不正確な部分がある場合は、[英語版](/en/use-dify/nodes/template) を参照してください。</Note>
 
-
-テンプレートノードは、Jinja2テンプレートを使用して複数のソースからのデータを構造化されたテキストに変換・フォーマットします。変数の結合、出力のフォーマット、下流のノードやエンドユーザー向けのデータ準備に使用します。
+テンプレートノードは、Jinja2 テンプレートを使用して複数のソースからのデータを構造化されたテキストに変換・フォーマットします。変数の結合、出力のフォーマット、下流のノードやエンドユーザー向けのデータ準備に使用します。
 
 <Frame caption="テンプレートノード設定インターフェース">
   ![テンプレートノード設定インターフェース](https://assets-docs.dify.ai/2025/04/0838bb5c7e1d1a58ed30fcd9fc48920f.png)
 </Frame>
 
-## Jinja2テンプレート
+## Jinja2 テンプレート
 
-テンプレートノードはJinja2テンプレート構文を使用して、ワークフローデータに基づいて適応する動的コンテンツを作成します。これにより、ループ、条件分岐、フィルターなどのプログラミング的機能を使用した高度なテキスト生成が可能になります。
+テンプレートノードは Jinja2 テンプレート構文を使用し、ワークフローのデータに応じて動的にコンテンツを生成します。ループ、条件分岐、フィルターといったプログラミング的な機能を活用して、複雑なテキスト生成が可能です。
 
 ### 変数の置換
 
-二重波括弧を使用してワークフロー変数を参照します：`{{ variable_name }}`。ドット記法とブラケット構文を使用して、ネストされたオブジェクトプロパティや配列要素にアクセスできます。
+二重波括弧でワークフロー変数を参照します：`{{ variable_name }}`。ドット記法とブラケット構文により、ネストされたオブジェクトプロパティや配列要素にアクセスできます。
 
 ```jinja
 {{ user.name }}
@@ -28,24 +27,24 @@ description: "Jinja2テンプレートを使用してデータを変換および
 
 ### 条件分岐ロジック
 
-if-else文を使用してデータ値に基づいて異なるコンテンツを表示します：
+if-else 文を使用して、データ値に応じて異なるコンテンツを表示します：
 
 ```jinja
 {% if user.subscription == 'premium' %}
-おかえりなさい、プレミアムメンバー様！すべての機能にアクセスできます。
+Welcome back, Premium Member! You have access to all features.
 {% else %}
-追加機能をご利用いただくため、プレミアムへのアップグレードをご検討ください。
+Consider upgrading to Premium for additional capabilities.
 {% endif %}
 ```
 
 ### ループと反復処理
 
-for ループを使用して配列とオブジェクトを処理し、反復的なコンテンツを生成します：
+for ループで配列やオブジェクトを処理し、反復的なコンテンツを生成します：
 
 ```jinja
 {% for item in search_results %}
-### 結果 {{ loop.index }}
-**スコア**: {{ item.score | round(2) }}
+### Result {{ loop.index }}
+**Score**: {{ item.score | round(2) }}
 {{ item.content }}
 ---
 {% endfor %}
@@ -59,14 +58,14 @@ for ループを使用して配列とオブジェクトを処理し、反復的
 
 ### フィルター
 
-Jinja2フィルターはテンプレートレンダリング中にデータを変換します：
+Jinja2 フィルターはテンプレートレンダリング時にデータを変換します：
 
 ```jinja
 {{ name | upper }}
 {{ price | round(2) }}
 {{ content | replace('\n', '<br>') }}
-{{ timestamp | strftime('%B %d, %Y') }}
-{{ score | default('スコア利用不可') }}
+{{ tags | join(', ') }}
+{{ score | default('No score available') }}
 ```
 
 ### エラーハンドリング
@@ -74,57 +73,113 @@ Jinja2フィルターはテンプレートレンダリング中にデータを
 デフォルト値と条件チェックを使用して、欠損または無効なデータを適切に処理します：
 
 ```jinja
-{{ user.email | default('メールアドレスが提供されていません') }}
-{{ metrics.accuracy | round(2) if metrics.accuracy else '計算されていません' }}
+{{ user.email | default('No email provided') }}
+{{ metrics.accuracy | round(2) if metrics.accuracy else 'Not calculated' }}
 ```
 
 ## インタラクティブフォーム
 
-テンプレートはチャットインターフェースで構造化データ収集のためのインタラクティブHTMLフォームを生成できます：
+テンプレートは Chatflow で構造化データ収集用のインタラクティブな HTML フォームを生成できます。
+
+送信されると、フォームの値はエンドユーザーの次のチャットメッセージとして送信されます。フォーマットは `<form>` の `data-format` 属性によって決まります：
+
+- **`data-format="json"`**：値は JSON オブジェクトにシリアライズされます。下流のコード実行ノードやパラメータ抽出は `JSON.parse`（またはパターンマッチ）で各フィールドを取り出せます。
+- **未設定（またはその他の値）**：値はプレーンテキスト（1 行に 1 つの `name: value`）として送信されます。LLM が読みやすい形式です。
+
+例：
+
+<Columns>
+  <Column>
 
 ```html
 <form data-format="json">
-  <label for="username">ユーザー名:</label>
-  <input type="text" name="username" required />
-  
-  <label for="priority">優先度:</label>
-  <input type="select" name="priority" data-options='["low","medium","high"]'/>
-  
-  <label for="message">メッセージ:</label>
-  <textarea name="message" placeholder="メッセージを入力してください"></textarea>
-  
-  <input type="checkbox" name="variant="primary">送信</button>
+  <label for="username">Username:</label>
+  <input type="text" name="username" placeholder="Please enter" />
+  <label for="password">Password:</label>
+  <input type="password" name="password" placeholder="Please enter" />
+  <label for="content">Content:</label>
+  <textarea name="content"></textarea>
+  <label for="date">Date:</label>
+  <input type="date" name="date" />
+  <label for="time">Time:</label>
+  <input type="time" name="time" />
+  <label for="datetime">Datetime:</label>
+  <input type="datetime" name="datetime" />
+  <label for="select">Select:</label>
+  <input type="select" name="select" data-options='["Option A","Option B","Option C"]' />
+  <input type="checkbox" name="agreed" data-tip="By checking this means you agreed" />
+  <button data-variant="primary">Login</button>
 </form>
 ```
 
-<Frame caption="チャットインターフェースでレンダリングされたインタラクティブフォーム">
-  ![チャットインターフェースでレンダリングされたインタラクティブフォーム](https://assets-docs.dify.ai/2025/04/9d24e9cfa3cdde00e4eee15bd4bbea76.png)
-</Frame>
+  </Column>
+  <Column>
+    <Frame>
+      <img src="https://assets-docs.dify.ai/2025/04/9d24e9cfa3cdde00e4eee15bd4bbea76.png" alt="チャットインターフェースで描画されたインタラクティブフォーム" width="100%" />
+    </Frame>
+  </Column>
+</Columns>
 
-ユーザーがフォームを送信すると、レスポンスは下流のワークフローノードで即座に処理できる構造化JSONデータになります。
+### サポートされるタグ
 
-## 出力制限
+| <div style={{width: '30px'}}>タグ</div> | 属性 | 説明 |
+|:---|:---|:---|
+| `<form>` | `data-format` | フォームフィールドのコンテナ。<br></br><br></br>`data-format="json"` を設定すると JSON で送信、それ以外の値（または未設定）はプレーンテキストで送信されます。 |
+| `<label>` | `for` | 内部テキストをフィールドのラベルとして描画します。<br></br><br></br>`for` をフィールドの `name` に設定して関連付けます。`<label>` をフィールドの前に配置すると、ラベルが上部に表示されます。 |
+| `<input>` | `type`、`name`、`value`、`placeholder`、`checked`、`data-tip`、`data-options` | 下記の入力タイプを参照してください。`name` は送信内容にフィールドを含めるために必須で、`[A-Za-z][A-Za-z0-9_-]*` にマッチする必要があります。 |
+| `<textarea>` | `name`、`placeholder`、`value` | 複数行のテキスト入力。 |
+| `<button>` | `data-variant`、`data-size` | フォームを送信します。<ul><li>バリアント：`primary`、`warning`、`secondary`、`secondary-accent`、`ghost`、`ghost-accent`、`tertiary`。</li><li>サイズ：`small`、`medium`、`large`。</li></ul>上記以外の値は無視され、ボタンはデフォルトスタイルにフォールバックします。<br></br><br></br>`data-message` と `data-link` は無視されます。これらの属性は [クイック返信ボタン](#クイック返信ボタン) にのみ適用されます。|
 
-テンプレート出力は**80,000文字**に制限されています（`TEMPLATE_TRANSFORM_MAX_LENGTH`で設定可能）。これにより、メモリ問題を防ぎ、大きなテンプレート出力の適切な処理時間を確保します。
+<Note>
+`<form>` 内のタグの間に空行を入れないでください。空行があると markdown 解析で HTML ブロックが終了し、空行以降のタグはフォームフィールドとして描画されません。
+</Note>
 
-## 一般的な使用例
+### サポートされる入力タイプ
 
-**レポート生成** - 複数のソースからのデータを一貫した構造とスタイリングを持つフォーマットされたレポートに結合します。
+| `type` 値 | 描画 | 送信形式 |
+|:---|:---|:---|
+| `text`、`password`、`email`、`number` | HTML セマンティクスに対応する 1 行入力 | 文字列 |
+| `date` | 日付ピッカー | ISO 日付文字列（例：`2026-01-10`） |
+| `datetime` | 日付ピッカー（時刻選択あり） | ISO 日付時刻文字列（例：`2026-01-10T14:30:00.000+08:00`） |
+| `time` | 時刻ピッカー | 文字列（時刻のみではなく完全な日付プレフィックスを含む） |
+| `checkbox` | チェックボックスの後にラベルとして `data-tip` テキスト | 真偽値（`true` または `false`） |
+| `select` | `data-options` の JSON 文字列配列から構築されるドロップダウン | 選択されたオプション文字列 |
+| `hidden` | `<input type="hidden">` 要素として描画され、UI には表示されない | 文字列 |
 
-**APIレスポンスフォーマット** - 内部データ構造を外部消費用のユーザーフレンドリーなフォーマットに変換します。
+- 上記以外の `type` 値は、フィールドの位置に「Unsupported tag」フォールバックとして描画されます。
 
-**大規模言語モデルプロンプト準備** - 複雑なデータを適切にフォーマットされたプロンプトに構造化し、大規模言語モデルの処理精度を向上させます。
+- `required`、`min`、`max`、`pattern` などの HTML5 バリデーション属性は強制されません。
 
-**メールと通知テンプレート** - ユーザーデータとワークフロー結果に基づいて動的コンテンツを含むパーソナライズされたメッセージを生成します。
+- ブラウザは `<input type="password">` と `<input type="email">` を、サイトに保存された認証情報で自動入力する場合があります。自動入力を避けたい場合は `<input type="text">` を使用してください。
 
-**データ変換** - 外部システムとの統合のために異なるデータフォーマットと構造間で変換します。
+### クイック返信ボタン
 
-## ベストプラクティス
+どの `<form>` の外にも配置されたスタンドアロンの `<button>` は、チャット内でクリック可能なボタンとして描画されます。アシスタントのメッセージにあらかじめ用意した返答や外部リンクを表示するのに使用します。例：
 
-**分かりやすい変数名を使用する** - 特に複雑なデータ構造を処理する際に、テンプレートを読みやすく保守しやすくします。
+```html wrap
+Would you like to see more options?
+<button data-variant="primary" data-message="Yes, show me more">Yes</button> <button data-variant="secondary" data-message="No, that is enough">No</button> <button data-variant="secondary-accent" data-link="https://docs.dify.ai">Read the docs</button>
+```
 
-**欠損データの処理** - デフォルト値と条件チェックを使用してテンプレートレンダリングエラーを防止します。
+<Frame>
+  ![クイック返信ボタン](/images/use-dify/workflow/template-quick-reply-button.png)
+</Frame>
+
+| 属性 | クリック時の動作 |
+|:---|:---|
+| `data-message` | テキストをエンドユーザーの次のチャットメッセージとして送信します。 |
+| `data-link` | 新しいタブで URL を開きます。有効な URL である必要があります。 |
+
+両方が設定されている場合は `data-link` が優先されます。どちらも設定されていない場合、ボタンは描画されますがクリックしても動作しません。
+
+`data-variant` と `data-size` でスタイルを設定できます。値は上記の [フォームボタン](#サポートされるタグ) と同じです。
 
-**可読性のためのフォーマット** - 適切な間隔、改行、フォーマットを使用して清潔でプロフェッショナルな出力を作成します。
+<Note>
+フォームボタンとは異なり、スタンドアロンボタンは `data-variant` と `data-size` をバリデーションせずに下層コンポーネントに渡します。認識されない値を渡すと、スタイル付きボタンではなくプレーンテキストとして描画される場合があります。
+
+上記の値のみを使用してください。
+</Note>
+
+## 出力制限
 
-**サンプルデータでテスト** - テンプレートがエッジケースを処理し、異なる入力シナリオで期待される結果を生成することを確認します。
+テンプレート出力は **400,000 文字** に制限されています（`TEMPLATE_TRANSFORM_MAX_LENGTH` で設定可能）。この制限により、メモリ問題を防ぎ、大きなテンプレート出力でも適切な処理時間を確保します。
diff --git a/zh/use-dify/nodes/template.mdx b/zh/use-dify/nodes/template.mdx
index 0d7db37c2..56beef604 100644
--- a/zh/use-dify/nodes/template.mdx
+++ b/zh/use-dify/nodes/template.mdx
@@ -1,23 +1,23 @@
 ---
-title: "模板"
+title: 模板转换
+description: 使用 Jinja2 模板转换和格式化数据
 ---
 
 <Note> ⚠️ 本文档由 AI 自动翻译。如有任何不准确之处，请参考 [英文原版](/en/use-dify/nodes/template)。</Note>
 
+模板转换节点使用 Jinja2 模板语法将来自多个来源的数据转换和格式化为结构化文本。可使用它来组合变量、格式化输出，并为下游节点或终端用户准备数据。
 
-模板节点使用 Jinja2 模板语法将来自多个来源的数据转换和格式化为结构化文本。使用它来组合变量、格式化输出，并为下游节点或最终用户准备数据。
-
-<Frame caption="模板节点配置界面">
-  ![模板节点配置界面](https://assets-docs.dify.ai/2025/04/0838bb5c7e1d1a58ed30fcd9fc48920f.png)
+<Frame caption="模板转换节点配置界面">
+  ![模板转换节点配置界面](https://assets-docs.dify.ai/2025/04/0838bb5c7e1d1a58ed30fcd9fc48920f.png)
 </Frame>
 
 ## Jinja2 模板
 
-模板节点使用 Jinja2 模板语法创建基于工作流数据自适应的动态内容。这提供了类似编程的功能，包括循环、条件判断和过滤器，用于复杂的文本生成。
+模板转换节点使用 Jinja2 模板语法，根据工作流数据动态生成内容。该语法提供类似编程的能力，包括循环、条件判断和过滤器，适用于复杂的文本生成。
 
 ### 变量替换
 
-使用双花括号引用工作流变量：`{{ variable_name }}`。你可以使用点号和括号语法访问嵌套对象属性和数组元素。
+使用双花括号引用工作流变量：`{{ variable_name }}`。可使用点号和括号语法访问嵌套对象属性和数组元素。
 
 ```jinja
 {{ user.name }}
@@ -31,9 +31,9 @@ title: "模板"
 
 ```jinja
 {% if user.subscription == 'premium' %}
-欢迎回来，高级会员！你可以访问所有功能。
+Welcome back, Premium Member! You have access to all features.
 {% else %}
-考虑升级到高级会员以获得更多功能。
+Consider upgrading to Premium for additional capabilities.
 {% endif %}
 ```
 
@@ -43,8 +43,8 @@ title: "模板"
 
 ```jinja
 {% for item in search_results %}
-### 结果 {{ loop.index }}
-**分数**: {{ item.score | round(2) }}
+### Result {{ loop.index }}
+**Score**: {{ item.score | round(2) }}
 {{ item.content }}
 ---
 {% endfor %}
@@ -58,73 +58,128 @@ title: "模板"
 
 ### 过滤器
 
-Jinja2 过滤器在模板渲染期间转换数据：
+Jinja2 过滤器在模板渲染时转换数据：
 
 ```jinja
 {{ name | upper }}
 {{ price | round(2) }}
 {{ content | replace('\n', '<br>') }}
-{{ timestamp | strftime('%B %d, %Y') }}
-{{ score | default('无可用分数') }}
+{{ tags | join(', ') }}
+{{ score | default('No score available') }}
 ```
 
 ### 错误处理
 
-使用默认值和条件检查优雅地处理缺失或无效数据：
+使用默认值和条件检查优雅处理缺失或无效数据：
 
 ```jinja
-{{ user.email | default('未提供邮箱') }}
-{{ metrics.accuracy | round(2) if metrics.accuracy else '未计算' }}
+{{ user.email | default('No email provided') }}
+{{ metrics.accuracy | round(2) if metrics.accuracy else 'Not calculated' }}
 ```
 
 ## 交互式表单
 
-模板可以生成交互式 HTML 表单，用于在聊天界面中进行结构化数据收集：
+模板转换节点可在 Chatflow 中生成交互式 HTML 表单，用于收集结构化数据。
+
+提交后，表单值会作为终端用户的下一条聊天消息发送。具体格式取决于 `<form>` 的 `data-format` 属性：
+
+- **`data-format="json"`**：值会序列化为 JSON 对象。下游的代码执行节点或参数提取器可调用 `JSON.parse`（或用模式匹配）提取各字段。
+- **未设置（或为其他值）**：值以纯文本发送，每行一个 `name: value`。便于 LLM 阅读。
+
+例如：
+
+<Columns>
+  <Column>
 
 ```html
 <form data-format="json">
-  <label for="username">用户名:</label>
-  <input type="text" name="username" required />
-  
-  <label for="priority">优先级:</label>
-  <input type="select" name="priority" data-options='["low","medium","high"]'/>
-  
-  <label for="message">消息:</label>
-  <textarea name="message" placeholder="输入你的消息"></textarea>
-  
-  <input type="checkbox" name="urgent" data-tip="标记为紧急"/>
-  <button data-variant="primary">提交</button>
+  <label for="username">Username:</label>
+  <input type="text" name="username" placeholder="Please enter" />
+  <label for="password">Password:</label>
+  <input type="password" name="password" placeholder="Please enter" />
+  <label for="content">Content:</label>
+  <textarea name="content"></textarea>
+  <label for="date">Date:</label>
+  <input type="date" name="date" />
+  <label for="time">Time:</label>
+  <input type="time" name="time" />
+  <label for="datetime">Datetime:</label>
+  <input type="datetime" name="datetime" />
+  <label for="select">Select:</label>
+  <input type="select" name="select" data-options='["Option A","Option B","Option C"]' />
+  <input type="checkbox" name="agreed" data-tip="By checking this means you agreed" />
+  <button data-variant="primary">Login</button>
 </form>
 ```
 
-<Frame caption="在聊天界面中渲染的交互式表单">
-  ![在聊天界面中渲染的交互式表单](https://assets-docs.dify.ai/2025/04/9d24e9cfa3cdde00e4eee15bd4bbea76.png)
-</Frame>
+  </Column>
+  <Column>
+    <Frame>
+      <img src="https://assets-docs.dify.ai/2025/04/9d24e9cfa3cdde00e4eee15bd4bbea76.png" alt="聊天界面中渲染的交互式表单" width="100%" />
+    </Frame>
+  </Column>
+</Columns>
 
-当用户提交表单时，响应会成为结构化 JSON 数据，可立即在下游工作流节点中处理。
+### 支持的标签
 
-## 输出限制
+| <div style={{width: '30px'}}>标签</div> | 属性 | 说明 |
+|:---|:---|:---|
+| `<form>` | `data-format` | 表单字段的容器。<br></br><br></br>设置 `data-format="json"` 以 JSON 形式接收提交内容；其他值（或未设置）则以纯文本发送。 |
+| `<label>` | `for` | 将内部文本渲染为字段标签。<br></br><br></br>将 `for` 设置为字段的 `name` 以关联两者。将 `<label>` 放在字段之前，使其显示在字段上方。 |
+| `<input>` | `type`、`name`、`value`、`placeholder`、`checked`、`data-tip`、`data-options` | 参见下方输入类型。字段必须设置 `name` 才会出现在提交内容中，且其值需匹配 `[A-Za-z][A-Za-z0-9_-]*`。 |
+| `<textarea>` | `name`、`placeholder`、`value` | 多行文本输入。 |
+| `<button>` | `data-variant`、`data-size` | 提交表单。<ul><li>变体：`primary`、`warning`、`secondary`、`secondary-accent`、`ghost`、`ghost-accent`、`tertiary`。</li><li>尺寸：`small`、`medium`、`large`。</li></ul>不在以上列表中的值会被忽略，按钮回退为默认样式。<br></br><br></br>忽略 `data-message` 和 `data-link`，这些属性仅适用于 [快速回复按钮](#快速回复按钮)。|
 
-模板输出限制为 **80,000 个字符**（可通过 `TEMPLATE_TRANSFORM_MAX_LENGTH` 配置）。这可以防止内存问题并确保大型模板输出的合理处理时间。
+<Note>
+不要在 `<form>` 内部的标签之间留空行。空行会在 markdown 解析时结束 HTML 块，断行之后的标签将无法渲染为表单字段。
+</Note>
 
-## 常见用例
+### 支持的输入类型
 
-**报告生成** - 将来自多个来源的数据组合成具有一致结构和样式的格式化报告。
+| `type` 值 | 渲染为 | 提交为 |
+|:---|:---|:---|
+| `text`、`password`、`email`、`number` | 与 HTML 语义匹配的单行输入框 | 字符串 |
+| `date` | 日期选择器 | ISO 日期字符串（如 `2026-01-10`） |
+| `datetime` | 日期选择器（含时间选择） | ISO 日期时间字符串（如 `2026-01-10T14:30:00.000+08:00`） |
+| `time` | 时间选择器 | 字符串（包含完整日期前缀，并非仅时间） |
+| `checkbox` | 复选框，后跟 `data-tip` 文本作为标签 | 布尔值（`true` 或 `false`） |
+| `select` | 下拉框，选项来自 `data-options` 中的 JSON 字符串数组 | 选中的选项字符串 |
+| `hidden` | 渲染为 `<input type="hidden">` 元素；不在 UI 中显示 | 字符串 |
 
-**API 响应格式化** - 将内部数据结构转换为用户友好的格式以供外部使用。
+- 其他 `type` 值会在字段处显示为「Unsupported tag」提示信息。
 
-**大型语言模型提示词准备** - 将复杂数据结构化为格式良好的提示词，以提高大型语言模型处理准确性。
+- HTML5 验证属性 `required`、`min`、`max` 和 `pattern` 不会强制生效。
 
-**邮件和通知模板** - 基于用户数据和工作流结果生成具有动态内容的个性化消息。
+- 浏览器可能会用当前站点保存的凭据自动填充 `<input type="password">` 和 `<input type="email">`；如不希望预填充，可改用 `<input type="text">`。
 
-**数据转换据格式和结构之间进行转换，以便与外部系统集成。
+### 快速回复按钮
 
-## 最佳实践
+位于 `<form>` 之外的独立 `<button>` 会在聊天中渲染为可点击按钮，可用于在消息中提供预设回复或外部链接。例如：
 
-**使用描述性变量名** 使模板可读且易于维护，特别是在处理复杂数据结构时。
+```html wrap
+Would you like to see more options?
+<button data-variant="primary" data-message="Yes, show me more">Yes</button> <button data-variant="secondary" data-message="No, that is enough">No</button> <button data-variant="secondary-accent" data-link="https://docs.dify.ai">Read the docs</button>
+```
 
-**处理缺失数据** 使用默认值和条件检查来防止模板渲染错误。
+<Frame>
+  ![快速回复按钮](/images/use-dify/workflow/template-quick-reply-button.png)
+</Frame>
+
+| 属性 | 点击行为 |
+|:---|:---|
+| `data-message` | 将文本作为终端用户的下一条聊天消息发送。 |
+| `data-link` | 在新标签页中打开 URL。必须是有效的 URL。 |
+
+如果两者都设置，`data-link` 优先。若两者都未设置，按钮仍会渲染，但点击不会触发任何动作。
+
+可使用 `data-variant` 和 `data-size` 设置样式，取值与上方 [表单按钮](#支持的标签) 相同。
 
-**格式化以提高可读性** 通过使用适当的间距、换行符和格式来创建干净、专业的输出。
+<Note>
+与表单按钮不同，独立按钮会将 `data-variant` 和 `data-size` 原样传给底层组件，不做校验。无法识别的值可能让按钮失去样式，只显示为纯文本。
+
+仅使用上述列表中的值。
+</Note>
+
+## 输出限制
 
-**使用示例数据测试** 确保模板处理边缘情况并在不同输入场景下产生预期结果。
+模板转换节点的输出限制为 **400,000 个字符**（可通过 `TEMPLATE_TRANSFORM_MAX_LENGTH` 配置）。此限制可避免内存问题，并让大型模板输出在合理时间内完成处理。