Как добавить заголовок в форму?

Question

Я хочу добавить заголовок в форму, но не смог найти никакого способа сделать это, ниже приведен мой код, и в конце я дал ссылку на изображения о том, как я хочу, чтобы заголовок отображался

<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
    <div class="content p-24">
        <div class="mb-24" fxLayout="column" fxLayoutAlign="start" fxLayout.gt-md="row">

            <form class="mat-card mat-elevation-z4 p-24 mr-24" fxLayout="column" fxLayoutAlign="start" fxFlex="1 0 auto" name="form" [formGroup]="form">
                <!-- <mat-card>New sales person</mat-card> -->
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>ID</mat-label>
                        <input matInput formControlName="company">
                        <mat-icon matSuffix>domain</mat-icon>
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Name</mat-label>
                        <input matInput formControlName="firstName" required>
                        <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                        <mat-error> Name is required!</mat-error>
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Gender</mat-label>
                        <mat-select>
                            <mat-option>
                                Male
                            </mat-option>
                            <mat-option>
                                Female
                            </mat-option>
                            <mat-option>
                                Rather Not to say.
                            </mat-option>
                        </mat-select>
                    </mat-form-field>

                </div>


                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <input type='number' matInput name="" id="" placeholder="Phone">
                        <mat-icon matSuffix>phone</mat-icon>
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <input type='email' matInput name="" id="" placeholder="Email">
                        <mat-icon matSuffix>email</mat-icon>
                    </mat-form-field>

                </div>


                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <input type='text' matInput name="" id="" placeholder="Team">
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <input type='text' matInput name="" id="" placeholder="Team Leader">
                    </mat-form-field>

                </div>





                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>County</mat-label>
                        <mat-select>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                        </mat-select>
                    </mat-form-field>



                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Sub County</mat-label>
                        <mat-select>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                            <mat-option>
                                Lorem.
                            </mat-option>
                        </mat-select>
                    </mat-form-field>


                </div>




                <div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100">
                        <mat-label>Physical Address</mat-label>
                        <textarea matInput formControlName="address" required>

                        </textarea>
                        <mat-error>Address is required!</mat-error>
                    </mat-form-field>

                    <mat-form-field appearance="outline" fxFlex="100">
                        <mat-label>Additional Information </mat-label>
                        <textarea matInput formControlName="address2"></textarea>
                        <mat-error>Additional is required!</mat-error>
                    </mat-form-field>

                </div>


                <!-- 
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">

                    <mat-form-field appearance="outline" fxFlex="100">
                        <mat-label>Country</mat-label>
                        <mat-select formControlName="country" required>
                            <mat-option [value]="'United States of America'">
                                United States of America
                            </mat-option>
                            <mat-option [value]="'United Kingdom'">
                                United Kingdom
                            </mat-option>
                            <mat-option [value]="'Russia'">
                                Russia
                            </mat-option>
                            <mat-option [value]="'China'">
                                China
                            </mat-option>
                            <mat-option [value]="'Japan'">
                                Japan
                            </mat-option>
                            <mat-option [value]="'Turkey'">
                                Turkey
                            </mat-option>
                        </mat-select>
                        <mat-icon matSuffix class="secondary-text">outlined_flag</mat-icon>
                        <mat-error>Country is required!</mat-error>
                    </mat-form-field>

                </div> -->
                <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">




                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Input 1</mat-label>
                        <input matInput formControlName="Input1" required>
                        <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                        <mat-error> Input 1 is required!</mat-error>
                    </mat-form-field>


                    <mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                        <mat-label>Input 2</mat-label>
                        <input matInput formControlName="Input2" required>
                        <mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
                        <mat-error> Input 1 is required!</mat-error>
                    </mat-form-field>



                </div>



                <button mat-raised-button class='submitButton' style="background-color: #27803f;  color: white;">Submit
                    form</button>
            </form>
        </div>
    </div>
</div>

Заголовок, который я хочу добавить в свою форму, выглядит следующим образом:

И моя форма выглядит следующим образом:

Я пытался положить карту, но она не сработала

Answer 1

Здесь у меня есть mat-card отредактированный для ваших пожеланий: https://stackblitz.com/edit/angular-qvnzza

Answer 2

Я предполагаю, что вы хотите добавить заголовок только с помощью CSS. Вы можете сделать это с помощью этого CSS:

#forms:before {
    content: 'This is your heading';
    background: #00398e;
    width: 100%;
    display: block;
    padding: 10px 20px;
    color: white;
    font-family: Arial;
    font-size: 26px;
}

Или попробуйте это:

form.mat-card.mat-elevation-z4:before {
    content: 'This is your heading';
    background: #00398e;
    width: 100%;
    display: block;
    padding: 10px 20px;
    color: white;
    font-family: Arial;
    font-size: 26px;
}

Или, если вы хотите добавить его в свой HTML, возможно, используя md-toolbar:

<md-card>
  <md-toolbar color="primary">
    <span>Title</span>
  </md-toolbar>

Или это:

   <md-card-header>
      <md-card-title>Your title goes here</mat-card-title>
   </md-card-header>

https://material.angularjs.org/latest/api/directive/mdCard