Form

TsgcHTMLComponent_Form — Delphi、C++ Builder、.NET で、テキスト、セレクト、チェックボックス、ラジオ、ファイル、日付、範囲の各フィールド、検証、垂直/水平/インラインのレイアウト、AI フォーム生成を備えた Bootstrap 5 フォームをレンダリングする、データ駆動型のフォームビルダーです。

TsgcHTMLComponent_Form

Fields コレクションから Bootstrap の <form> を構築するフォームコンポーネントです。フィールドを追加し(またはデータセットをバインドし)、レイアウトを選択してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Form

レンダリング内容

Bootstrap 5 の <form> マークアップ

ファミリー

フォーム & 入力

言語

Delphi, C++ Builder, .NET

作成し、フィールドを追加し、レンダリングする

ActionMethodLayout を設定し、1 つ以上の 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

FieldsTsgcHTMLFormField のコレクションです。Fields.Add を呼び出し、FieldTypeftTextftEmailftSelectftCheckboxftRadioftFileftDateftRange など)、NameLabel_ValueRequired を設定します。

Submission

ActionMethodfmGet / fmPost)は送信先を指定します。FormID はフォーム要素を識別します。

Layout

LayoutflVerticalflHorizontalflInline を選択します。LabelColWidthFieldColWidth は水平レイアウトの列のサイズを決めます。

Buttons

SubmitTextSubmitStyleTsgcHTMLButtonStyle)、ShowResetResetText がアクションボタンを制御します。

Dataset binding

LoadFromDataSet(aDataSet) はクエリの列からフィールドを生成します。LoadValuesFromDataSet(aDataSet) は既存のフィールドを現在の行の値で再度埋めます。

AI form builder

AIBuildEnabledAIBuildPlaceholder はプロンプトバーを追加します。BuildFromAIDescription(aDescription)OnAIBuildForm を発生させ、LoadFieldsFromJSON(aJSON) は JSON 定義からフィールドを生成します。

さらに詳しく

すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。
無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET で Web UI の構築を始めましょう。