doc: 增加表单示例

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/OtpInputs.razor

@@ -6,6 +6,10 @@
         .input-group-text {
             --bb-input-group-label-width: 100px;
         }
+
+        .otp-input-demo {
+            text-align: center;
+        }
     </style>
 </HeadContent>
 
@@ -17,9 +21,9 @@
     <p>@((MarkupString)Localizer["OtpInputsTips"].Value)</p>
 </Tips>
 
-<DemoBlock Title="@Localizer["OtpInputsTypeTitle"]"
-           Introduction="@Localizer["OtpInputsTypeIntro"]"
-           Name="Type">
+<DemoBlock Title="@Localizer["OtpInputsNormalTitle"]"
+           Introduction="@Localizer["OtpInputsNormalIntro"]"
+           Name="Normal">
     <div class="row g-3 mb-3">
         <div class="col-12 col-sm-6">
             <BootstrapInputGroup>
@@ -48,3 +52,23 @@
     </div>
     <OtpInput Value="@_value" Type="_otpInputType" PlaceHolder="@_placeHolder" IsReadonly="_readonly" IsDisabled="_disabled"></OtpInput>
 </DemoBlock>
+
+<DemoBlock Title="@Localizer["OtpInputsValidateFormTitle"]"
+           Introduction="@Localizer["OtpInputsValidateFormIntro"]"
+           Name="ValidateForm">
+    <ValidateForm Model="@_model">
+        <div class="row g-3">
+            <div class="col-12">
+                <BootstrapInput @bind-Value="@_model.UserName" />
+            </div>
+            <div class="col-12">
+                <GroupBox Title="2FA" class="otp-input-demo">
+                    <OtpInput @bind-Value="@_model.Password"></OtpInput>
+                </GroupBox>
+            </div>
+            <div class="col-12">
+                <Button ButtonType="ButtonType.Submit" Icon="fa-fw fa-solid fa-save" Text="Submit"></Button>
+            </div>
+        </div>
+    </ValidateForm>
+</DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/OtpInputs.razor.cs

@@ -19,4 +19,6 @@ public partial class OtpInputs
     private bool _readonly = false;
 
     private bool _disabled = false;
+
+    private LoginModel _model = new() { UserName = "Admin", Password = "" };
 }