Form

TsgcHTMLComponent_Form — 一个数据驱动的表单构建器,渲染带有文本、选择、复选框、单选、文件、日期和范围字段、验证、垂直/水平/内联布局和 AI 表单生成的 Bootstrap 5 表单,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_Form

一个表单组件,从 Fields 集合构建 Bootstrap <form>。添加字段(或绑定数据集),选择布局,然后读取 HTML 属性。

组件类

TsgcHTMLComponent_Form

渲染为

Bootstrap 5 <form> 标记

语言

Delphi, C++ Builder, .NET

创建它、添加字段、渲染它

设置 ActionMethodLayout,添加一个或多个 Fields,然后读取 HTML(或将其放入 TsgcHTMLTemplate_Bootstrap 页面)。

uses
  sgcHTML_Enums, sgcHTML_Component_Form;

var
  oForm: TsgcHTMLComponent_Form;
  oField: TsgcHTMLFormField;
begin
  oForm := TsgcHTMLComponent_Form.Create(nil);
  try
    oForm.Action := '/contact';
    oForm.Method := fmPost;
    oForm.Layout := flVertical;
    oForm.SubmitText := 'Send';
    oForm.SubmitStyle := bsPrimary;
    oForm.ShowReset := True;

    oField := oForm.Fields.Add;
    oField.FieldType := ftText;
    oField.Name := 'name';
    oField.Label_ := 'Full name';
    oField.Required := True;

    oField := oForm.Fields.Add;
    oField.FieldType := ftEmail;
    oField.Name := 'email';
    oField.Label_ := 'Email';
    oField.Placeholder := 'you@example.com';

    WebModule.Response := oForm.HTML;   // Bootstrap <form> markup
  finally
    oForm.Free;
  end;
end;

// Or build the fields straight from a dataset:
oForm.LoadFromDataSet(qryCustomer);
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Form.hpp

TsgcHTMLComponent_Form *oForm = new TsgcHTMLComponent_Form(NULL);
try
{
  oForm->Action = "/contact";
  oForm->Method = fmPost;
  oForm->Layout = flVertical;
  oForm->SubmitText = "Send";
  oForm->SubmitStyle = bsPrimary;
  oForm->ShowReset = true;

  TsgcHTMLFormField *oField = oForm->Fields->Add();
  oField->FieldType = ftText;
  oField->Name = "name";
  oField->Label_ = "Full name";
  oField->Required = true;

  oField = oForm->Fields->Add();
  oField->FieldType = ftEmail;
  oField->Name = "email";
  oField->Label_ = "Email";
  oField->Placeholder = "you@example.com";

  String html = oForm->HTML;   // Bootstrap <form> markup
}
__finally
{
  delete oForm;
}
using esegece.sgcWebSockets;

var form = new TsgcHTMLComponent_Form();
form.Action = "/contact";
form.Method = TsgcHTMLFormMethod.fmPost;
form.Layout = TsgcHTMLFormLayout.flVertical;
form.SubmitText = "Send";
form.SubmitStyle = TsgcHTMLButtonStyle.bsPrimary;
form.ShowReset = true;

var field = form.Fields.Add();
field.FieldType = TsgcHTMLFieldType.ftText;
field.Name = "name";
field.Label_ = "Full name";
field.Required = true;

field = form.Fields.Add();
field.FieldType = TsgcHTMLFieldType.ftEmail;
field.Name = "email";
field.Label_ = "Email";
field.Placeholder = "you@example.com";

string html = form.HTML;   // Bootstrap <form> markup

关键属性与方法

您最常使用的成员。

字段

Fields 是一个 TsgcHTMLFormField 集合;调用 Fields.Add 并设置 FieldTypeftTextftEmailftSelectftCheckboxftRadioftFileftDateftRange 等)、NameLabel_ValueRequired

提交

ActionMethodfmGet / fmPost)确定提交目标;FormID 标识表单元素。

布局

Layout 选择 flVerticalflHorizontalflInlineLabelColWidthFieldColWidth 设置水平布局的列宽。

按钮

SubmitTextSubmitStyle(一个 TsgcHTMLButtonStyle)、ShowResetResetText 控制操作按钮。

数据集绑定

LoadFromDataSet(aDataSet) 从查询的列生成字段;LoadValuesFromDataSet(aDataSet) 用当前行的值重新填充现有字段。

AI 表单构建器

AIBuildEnabledAIBuildPlaceholder 添加一个提示栏;BuildFromAIDescription(aDescription) 触发 OnAIBuildFormLoadFieldsFromJSON(aJSON) 从 JSON 定义填充字段。

继续探索

所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。