HTML表单项
HTML表单项组件,用于在表单中插入自定义的HTML内容,可用于显示提示信息、说明文字或自定义布局。
用法示例
<?php
use plugin\xbCode\builder\Builder;
use plugin\xbCode\builder\Renders\Form;
// 创建表单
Builder::form(function (Form $builder) {
// 添加简单HTML提示
$builder->addRowHtml('<div class="alert alert-info">请仔细填写以下信息</div>');
// 添加带样式的HTML内容
$builder->addRowHtml('
<div style="padding: 15px; background: #f5f5f5; border-radius: 4px;">
<h4 style="margin-top: 0;">重要提示</h4>
<ul>
<li>请确保信息的准确性</li>
<li>必填项不能为空</li>
<li>提交后不可修改</li>
</ul>
</div>
');
// 添加分隔线
$builder->addRowHtml('<hr style="margin: 20px 0; border-color: #ddd;">');
// 添加富文本说明
$builder->addRowHtml('
<div class="form-description">
<p><strong>填写说明:</strong></p>
<p>1. 用户名长度为3-20个字符</p>
<p>2. 密码必须包含字母和数字</p>
<p>3. 邮箱格式必须正确</p>
</div>
');
// 添加图片
$builder->addRowHtml('<img src="/images/banner.jpg" alt="提示" style="width: 100%; max-width: 600px;">');
// 添加视频
$builder->addRowHtml('
<video width="100%" controls>
<source src="/videos/tutorial.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
');
});
组件参数
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| html | string | - | HTML内容,必填 |
使用说明
- 基本使用:通过
addRowHtml()方法添加HTML内容,参数为HTML字符串 - 内容类型:支持任意有效的HTML标签和内容
- 样式控制:可以使用内联样式或CSS类名来控制显示效果
- 安全性:HTML内容会被直接渲染,请确保内容来源可信,避免XSS攻击
常见用途:
- 显示表单说明和提示信息
- 添加分隔线和空白区域
- 插入图片、视频等媒体内容
- 展示格式化的文本内容
- 创建自定义布局结构
注意事项:
- HTML内容不会被转义,需要自行处理特殊字符
- 不要包含可执行的JavaScript代码
- 建议使用简单的HTML结构,避免复杂的嵌套