x-larastrap::form is one of the most complex (and useful) components in Larastrap. It plays well with x-larastrap::field to provide a powerful tool to organize, populate and handle the forms of your Laravel application.
As all other Containers, forms have an obj parameter which can be populated with an object (eventually: an Eloquent model). This parameter is inherited by all child input fields, which values are then inited with the proper attributes matched by their name.
When obj
is null
, all child inputs are left with their explicit value (if set at all).
@php
$obj = (object) ['id' => 1234, 'name' => 'Foo', 'bio' => 'A very smart guy!', 'email' => 'foo@bar.baz', 'country' => 'it', 'colors' => ['red', 'blue']];
$countries = ['fr' => 'France', 'de' => 'Germany', 'it' => 'Italy'];
@endphp
<x-larastrap::form :obj="$obj">
<x-larastrap::hidden name="id" />
<x-larastrap::number name="id" label="ID" disabled="true" />
<x-larastrap::text name="name" label="Name" />
<x-larastrap::text name="surname" label="Surname" value="Bar" />
<x-larastrap::textarea name="bio" label="Bio" />
<x-larastrap::email name="email" label="EMail" help="Must be a valid email address" />
<x-larastrap::select name="country" label="Country (as select)" :options="$countries" />
<x-larastrap::radios name="country" label="Country (as radio)" :options="$countries" color="danger" />
<x-larastrap::checks name="colors" label="Colors" :options="['red' => 'Red', 'green' => 'Green', 'blue' => 'Blue']" color="warning" />
</x-larastrap::form>
<form id="form-34173cb38f07f89ddbebc2ac9128303f" class="" method="post" name="form-34173cb38f07f89ddbebc2ac9128303f">
<input type="hidden" name="_token" value="Bl0fGU5G5zV6lq3ktJWXEzMg1S2SnVQgOjkylEDB"> <input id="hidden-5c3c885a0b2512d67f15a3483d4ab0b3" type="hidden" class="" name="id" value="1234">
<div class="row mb-3">
<label for="input-634dd39e0c39d697644de7c8856372e3" class="col-4 col-form-label">ID</label>
<div class="col-8">
<input id="input-634dd39e0c39d697644de7c8856372e3" type="number" class="form-control-plaintext" name="id" value="1234" step="1" min="-9223372036854775808" max="9223372036854775807" disabled>
</div>
</div>
<div class="row mb-3">
<label for="input-e0a7653515620c3a9a79bcad72dd8666" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="input-e0a7653515620c3a9a79bcad72dd8666" type="text" class="form-control" name="name" value="Foo">
</div>
</div>
<div class="row mb-3">
<label for="input-2c0762720e40aadeaa34590d395fee37" class="col-4 col-form-label">Surname</label>
<div class="col-8">
<input id="input-2c0762720e40aadeaa34590d395fee37" type="text" class="form-control" name="surname" value="Bar">
</div>
</div>
<div class="row mb-3">
<label for="textarea-dab479b21a8b3d20f711fe70d04e6d7d" class="col-4 col-form-label">Bio</label>
<div class="col-8">
<textarea id="textarea-dab479b21a8b3d20f711fe70d04e6d7d" class="form-control" name="bio">A very smart guy!</textarea>
</div>
</div>
<div class="row mb-3">
<label for="input-ac48a26822bf224eef216504ca52d1ca" class="col-4 col-form-label">EMail</label>
<div class="col-8">
<input id="input-ac48a26822bf224eef216504ca52d1ca" type="email" class="form-control" name="email" value="foo@bar.baz">
<div class="form-text">
Must be a valid email address
</div>
</div>
</div>
<div class="row mb-3">
<label for="select-d14db29cacd91e40185b989d674b4602" class="col-4 col-form-label">Country (as select)</label>
<div class="col-8">
<select class="form-select" name="country">
<option value="fr">
France
</option>
<option value="de">
Germany
</option>
<option value="it" selected>
Italy
</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="radios-66aa1d4374e161f30b797b7a703cd73c" class="col-4 col-form-label col-4 col-form-label">Country (as radio)</label>
<div class="col-8">
<div class="btn-group" role="group">
<input type="radio" class="btn-check" name="country" id="radios-66aa1d4374e161f30b797b7a703cd73c-0309a6c666a7a803fdb9db95de71cf01" autocomplete="off" value="fr"> <label class="btn btn-danger" for="radios-66aa1d4374e161f30b797b7a703cd73c-0309a6c666a7a803fdb9db95de71cf01">France</label> <input type="radio" class="btn-check" name="country" id="radios-66aa1d4374e161f30b797b7a703cd73c-d8b00929dec65d422303256336ada04f" autocomplete="off" value="de"> <label class="btn btn-danger" for="radios-66aa1d4374e161f30b797b7a703cd73c-d8b00929dec65d422303256336ada04f">Germany</label> <input type="radio" class="btn-check" name="country" id="radios-66aa1d4374e161f30b797b7a703cd73c-1007e1b7f894dfbf72a0eaa80f3bc57e" autocomplete="off" value="it" checked> <label class="btn btn-danger" for="radios-66aa1d4374e161f30b797b7a703cd73c-1007e1b7f894dfbf72a0eaa80f3bc57e">Italy</label>
</div>
</div>
</div>
<div class="row mb-3">
<label for="checks-049f34fa7610fb3134bd85d21a1e8eaf" class="col-4 col-form-label col-4 col-form-label">Colors</label>
<div class="col-8">
<div class="btn-group" role="group">
<input type="checkbox" class="btn-check" name="colors[]" id="checks-049f34fa7610fb3134bd85d21a1e8eaf-ee38e4d5dd68c4e440825018d549cb47" autocomplete="off" value="red" checked> <label class="btn btn-warning" for="checks-049f34fa7610fb3134bd85d21a1e8eaf-ee38e4d5dd68c4e440825018d549cb47">Red</label> <input type="checkbox" class="btn-check" name="colors[]" id="checks-049f34fa7610fb3134bd85d21a1e8eaf-d382816a3cbeed082c9e216e7392eed1" autocomplete="off" value="green"> <label class="btn btn-warning" for="checks-049f34fa7610fb3134bd85d21a1e8eaf-d382816a3cbeed082c9e216e7392eed1">Green</label> <input type="checkbox" class="btn-check" name="colors[]" id="checks-049f34fa7610fb3134bd85d21a1e8eaf-9594eec95be70e7b1710f730fdda33d9" autocomplete="off" value="blue" checked> <label class="btn btn-warning" for="checks-049f34fa7610fb3134bd85d21a1e8eaf-9594eec95be70e7b1710f730fdda33d9">Blue</label>
</div>
</div>
</div>
<div class="col-12 text-end">
<button id="button-17506290181e0d66d00e883afc01d353" class="btn btn-primary" type="submit">Save</button>
</div>
</form>
action
and method
parameters are equivalent to the classic HTML attributes for forms. But you can specify once a default method
in your configuration file (by default it is POST
).
Any method
different than POST
or GET
translates to @method('XYZ')
, as supported by Laravel.
<x-larastrap::form method="DELETE" :buttons="[['label' => 'Delete!', 'color' => 'danger', 'type' => 'submit']]">
<div class="alert alert-danger">This is a delete form!</div>
</x-larastrap::form>
<form id="form-072b030ba126b2f4b2374f342be9ed44" class="" method="post" name="form-072b030ba126b2f4b2374f342be9ed44">
<input type="hidden" name="_token" value="Bl0fGU5G5zV6lq3ktJWXEzMg1S2SnVQgOjkylEDB"> <input type="hidden" name="_method" value="DELETE">
<div class="alert alert-danger">
This is a delete form!
</div>
<div class="col-12 text-end">
<button id="button-42975d090802ec9f131ef10d558c29cf" class="btn btn-danger">Delete!</button>
</div>
</form>
A bit more articulated is baseaction : this is intended to be the prefix of a Laravel's Resource Controller.
In the following example, when obj
is set to NULL
it is assigned as action
the value route('user.store')
; otherwise, if obj
is a valid object, it will become route('user.update', $obj->id)
. This is handy to have a single edit form to both create and update the same kind of model.
Of course, when in update mode, the proper PUT
method
is used.
<x-larastrap::form :obj="null" baseaction="user">
<div class="alert alert-info">
This form creates a new model.
</div>
<x-larastrap::text name="name" label="Name" />
<x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>
<br>
@php
$obj = (object) [
'id' => 123,
'name' => 'Foo Bar',
'email' => 'foobar@example.com',
];
@endphp
<x-larastrap::form :obj="$obj" baseaction="user">
<div class="alert alert-info">
This form updates the existing model.
</div>
<x-larastrap::text name="name" label="Name" />
<x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>
<form id="form-fe9fc289c3ff0af142b6d3bead98a923" class="" method="post" action="https://larastrap.madbob.org/user" name="form-fe9fc289c3ff0af142b6d3bead98a923">
<input type="hidden" name="_token" value="Bl0fGU5G5zV6lq3ktJWXEzMg1S2SnVQgOjkylEDB">
<div class="alert alert-info">
This form creates a new model.
</div>
<div class="row mb-3">
<label for="input-b2e0925a560126bf09e5366d917bb82d" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="input-b2e0925a560126bf09e5366d917bb82d" type="text" class="form-control" name="name" value="">
</div>
</div>
<div class="row mb-3">
<label for="input-1d744571c4dc9b844d9ef5ac5e0d0a01" class="col-4 col-form-label">EMail</label>
<div class="col-8">
<input id="input-1d744571c4dc9b844d9ef5ac5e0d0a01" type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="col-12 text-end">
<button id="button-a753492703e375dcff583e1dc9d838fe" class="btn btn-primary" type="submit">Save</button>
</div>
</form><br>
<form id="form-7647966b7343c29048673252e490f736" class="" method="post" action="https://larastrap.madbob.org/user/123" name="form-7647966b7343c29048673252e490f736">
<input type="hidden" name="_token" value="Bl0fGU5G5zV6lq3ktJWXEzMg1S2SnVQgOjkylEDB"> <input type="hidden" name="_method" value="PUT">
<div class="alert alert-info">
This form updates the existing model.
</div>
<div class="row mb-3">
<label for="input-c3aeb95e411866179a73eac295306a3a" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="input-c3aeb95e411866179a73eac295306a3a" type="text" class="form-control" name="name" value="Foo Bar">
</div>
</div>
<div class="row mb-3">
<label for="input-d215b8ae133d3a87633a058ba4157936" class="col-4 col-form-label">EMail</label>
<div class="col-8">
<input id="input-d215b8ae133d3a87633a058ba4157936" type="email" class="form-control" name="email" value="foobar@example.com">
</div>
</div>
<div class="col-12 text-end">
<button id="button-a614642a79198599d6fb9e5a219a6165" class="btn btn-primary" type="submit">Save</button>
</div>
</form>
The form's buttons (notably: the submit button) are generally not included within the x-larastrap::form node but are defined using the buttons parameter, which has to be an array of arrays, each rappresenting a button and with the parameters for the relevant x-larastrap::button.
<x-larastrap::form :buttons="[['color' => 'success', 'label' => 'Submit', 'attributes' => ['type' => 'submit']], ['color' => 'danger', 'label' => 'Reset', 'attributes' => ['type' => 'reset']]]">
<x-larastrap::text name="firstname" label="First Name" />
<x-larastrap::text name="lastname" label="Last Name" />
<x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>
<form id="form-a97da629b098b75c294dffdc3e463904" class="" method="post" name="form-a97da629b098b75c294dffdc3e463904">
<input type="hidden" name="_token" value="Bl0fGU5G5zV6lq3ktJWXEzMg1S2SnVQgOjkylEDB">
<div class="row mb-3">
<label for="input-0c271a374420f5395baf2f28ffe4864d" class="col-4 col-form-label">First Name</label>
<div class="col-8">
<input id="input-0c271a374420f5395baf2f28ffe4864d" type="text" class="form-control" name="firstname" value="">
</div>
</div>
<div class="row mb-3">
<label for="input-b04657c2acb558688ce14f2f1fd77434" class="col-4 col-form-label">Last Name</label>
<div class="col-8">
<input id="input-b04657c2acb558688ce14f2f1fd77434" type="text" class="form-control" name="lastname" value="">
</div>
</div>
<div class="row mb-3">
<label for="input-91bdf3145f576cf2b1107651cb399ce9" class="col-4 col-form-label">EMail</label>
<div class="col-8">
<input id="input-91bdf3145f576cf2b1107651cb399ce9" type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="col-12 text-end">
<button id="button-e2a018f4fe0eac2129a58eabf2121bf0" class="btn btn-success" type="submit">Submit</button> <button id="button-595806e1eae04ba1cc981628d1cbd0ca" class="btn btn-danger" type="reset">Reset</button>
</div>
</form>
A peculiar parameter which can be used for those buttons is element
, that permits to use a different node type for the element. By default it is of course larastrap::button
, but can be any other Blade's Component identifier (remember to prefix Larastrap's widgets with larastrap::
).
@php
$buttons = [
['element' => 'larastrap::link', 'label' => 'This is a Link', 'href' => 'https://larastrap.madbob.org/'],
['color' => 'success', 'label' => 'Submit', 'attributes' => ['type' => 'submit']]
];
@endphp
<x-larastrap::form :buttons="$buttons">
<x-larastrap::text name="firstname" label="First Name" />
<x-larastrap::text name="lastname" label="Last Name" />
<x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>
<form id="form-76dc611d6ebaafc66cc0879c71b5db5c" class="" method="post" name="form-76dc611d6ebaafc66cc0879c71b5db5c">
<input type="hidden" name="_token" value="Bl0fGU5G5zV6lq3ktJWXEzMg1S2SnVQgOjkylEDB">
<div class="row mb-3">
<label for="input-154e05b58e681b8cbd4cad9b24dd952e" class="col-4 col-form-label">First Name</label>
<div class="col-8">
<input id="input-154e05b58e681b8cbd4cad9b24dd952e" type="text" class="form-control" name="firstname" value="">
</div>
</div>
<div class="row mb-3">
<label for="input-357b072873882693b9f60e2b0ced0ed7" class="col-4 col-form-label">Last Name</label>
<div class="col-8">
<input id="input-357b072873882693b9f60e2b0ced0ed7" type="text" class="form-control" name="lastname" value="">
</div>
</div>
<div class="row mb-3">
<label for="input-baf41086642c559a2e51600ec039e15d" class="col-4 col-form-label">EMail</label>
<div class="col-8">
<input id="input-baf41086642c559a2e51600ec039e15d" type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="col-12 text-end">
<a id="link-f930d1c568e03aed004f404201e16170" class="btn btn-primary" href="https://larastrap.madbob.org/">This is a Link</a> <button id="button-a20eca2691ca35cc4c1f472deede7d3d" class="btn btn-success" type="submit">Submit</button>
</div>
</form>
Leveraging the Typography widget, you are actually able to append in the Form's footer any kind of text. Even better: any kind of text generated from the contextual obj .
@php
$user = App\Models\User::inRandomOrder()->first();
$buttons = [
['element' => 'larastrap::t', 'node' => 'small', 'name' => 'updated_at', 'prelabel' => 'Last update: ', 'classes' => ['float-start']],
['color' => 'success', 'label' => 'Submit', 'attributes' => ['type' => 'submit']]
];
@endphp
<x-larastrap::form :buttons="$buttons" :obj="$user">
<x-larastrap::text name="name" label="Name" />
<x-larastrap::email name="email" label="EMail" />
<hr>
</x-larastrap::form>
<form id="form-2b24d495052a8ce66358eb576b8912c8" class="" method="post" name="form-2b24d495052a8ce66358eb576b8912c8">
<input type="hidden" name="_token" value="Bl0fGU5G5zV6lq3ktJWXEzMg1S2SnVQgOjkylEDB">
<div class="row mb-3">
<label for="input-27585cb2fbfb6d6565e2bc7b98702ca4" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="input-27585cb2fbfb6d6565e2bc7b98702ca4" type="text" class="form-control" name="name" value="Miss Earnestine Lowe">
</div>
</div>
<div class="row mb-3">
<label for="input-822f1241602f040b4b38bdcd1c04cb50" class="col-4 col-form-label">EMail</label>
<div class="col-8">
<input id="input-822f1241602f040b4b38bdcd1c04cb50" type="email" class="form-control" name="email" value="langosh.rosalyn@example.com">
</div>
</div>
<hr>
<div class="col-12 text-end">
<small class="float-start">Last update: 2023-05-07 00:15:11</small> <button id="button-06ba53e7ce778c514f324279ceb7927b" class="btn btn-success" type="submit">Submit</button>
</div>
</form>
The buttons_align
parameter permit to define where to put buttons
within the form: by default their are aligned to end
, but can also be at start
or center
.
<x-larastrap::form formview="vertical" buttons_align="start">
<x-larastrap::text name="firstname" label="First Name" />
<x-larastrap::text name="lastname" label="Last Name" />
<x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>
<form id="form-7e7757b1e12abcb736ab9a754ffb617a" class="" method="post" name="form-7e7757b1e12abcb736ab9a754ffb617a">
<input type="hidden" name="_token" value="Bl0fGU5G5zV6lq3ktJWXEzMg1S2SnVQgOjkylEDB">
<div class="mb-3">
<label for="input-e232457a80880f828b7c9995b7aa007b" class="form-label">First Name</label> <input id="input-e232457a80880f828b7c9995b7aa007b" type="text" class="form-control" name="firstname" value="">
</div>
<div class="mb-3">
<label for="input-a267f703d0219685859581ec13da7e68" class="form-label">Last Name</label> <input id="input-a267f703d0219685859581ec13da7e68" type="text" class="form-control" name="lastname" value="">
</div>
<div class="mb-3">
<label for="input-b40734bc8d397964d3cdb45a92910ced" class="form-label">EMail</label> <input id="input-b40734bc8d397964d3cdb45a92910ced" type="email" class="form-control" name="email" value="">
</div>
<div class="col-12 text-start">
<button id="button-febcebcbd8ee691a8766f4ac50aed2e8" class="btn btn-primary" type="submit">Save</button>
</div>
</form>
It is possible to organize the layout of the Form in multiple ways, using the formview
parameter. horizontal
is the default value and behavior, but it is possible to opt for inline
; it this case, please note that labels are converted in placeholders to accomodate into the row.
<x-larastrap::form formview="inline">
<x-larastrap::text name="firstname" label="First Name" />
<x-larastrap::text name="lastname" label="Last Name" />
<x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>
<form id="form-9872ed9fc22fc182d371c3e9ed316094" class="row row-cols-lg-auto g-3 align-items-center" method="post" name="form-9872ed9fc22fc182d371c3e9ed316094">
<input type="hidden" name="_token" value="Bl0fGU5G5zV6lq3ktJWXEzMg1S2SnVQgOjkylEDB">
<div class="col-12">
<label for="input-72daf85b3ca937b12c427c5394686c03" class="d-none">First Name</label> <input id="input-72daf85b3ca937b12c427c5394686c03" type="text" class="form-control" name="firstname" value="" placeholder="First Name">
</div>
<div class="col-12">
<label for="input-70511208c0982ff8a75bcbde59c7d7c1" class="d-none">Last Name</label> <input id="input-70511208c0982ff8a75bcbde59c7d7c1" type="text" class="form-control" name="lastname" value="" placeholder="Last Name">
</div>
<div class="col-12">
<label for="input-e32eebaf5bc808ec481d4ad9eb7ddce0" class="d-none">EMail</label> <input id="input-e32eebaf5bc808ec481d4ad9eb7ddce0" type="email" class="form-control" name="email" value="" placeholder="EMail">
</div>
<div class="col-12 text-end">
<button id="button-09c775ef4f66d367bd01dc3a6a059c6f" class="btn btn-primary" type="submit">Save</button>
</div>
</form>
Another option is the vertical
value for formview
.
<x-larastrap::form formview="vertical">
<x-larastrap::text name="firstname" label="First Name" />
<x-larastrap::text name="lastname" label="Last Name" />
<x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>
<form id="form-274ad4786c3abca69fa097b85867d9a4" class="" method="post" name="form-274ad4786c3abca69fa097b85867d9a4">
<input type="hidden" name="_token" value="Bl0fGU5G5zV6lq3ktJWXEzMg1S2SnVQgOjkylEDB">
<div class="mb-3">
<label for="input-5ef7860bc67422c4ba9f2fe5eb207b07" class="form-label">First Name</label> <input id="input-5ef7860bc67422c4ba9f2fe5eb207b07" type="text" class="form-control" name="firstname" value="">
</div>
<div class="mb-3">
<label for="input-dbcb7dca1ae82ee5d8872d32e9ca99ff" class="form-label">Last Name</label> <input id="input-dbcb7dca1ae82ee5d8872d32e9ca99ff" type="text" class="form-control" name="lastname" value="">
</div>
<div class="mb-3">
<label for="input-1e0de745af5ff48c9d6df1edb7bf5b47" class="form-label">EMail</label> <input id="input-1e0de745af5ff48c9d6df1edb7bf5b47" type="email" class="form-control" name="email" value="">
</div>
<div class="col-12 text-end">
<button id="button-9b7035d968afb6c9bfc16b9bbda58a93" class="btn btn-primary" type="submit">Save</button>
</div>
</form>
Larastrap's forms have built-in integration with Laravel's Validation, and a few parameters to deal with it.
By default error_handling
is set to true
and error_bag
is set to default
. To ignore validation just set error_handling
to false
. To change the name of the "error bag" used by your server-side Laravel's validator, set error_bag
accordingly.
<x-larastrap::form action="/validated" error_bag="special">
<x-larastrap::text name="name" label="Name" />
<x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>
<form id="form-6d1c325bc78cbef26c9b12c17de51dcc" class="" method="post" action="/validated" name="form-6d1c325bc78cbef26c9b12c17de51dcc">
<input type="hidden" name="_token" value="Bl0fGU5G5zV6lq3ktJWXEzMg1S2SnVQgOjkylEDB">
<div class="row mb-3">
<label for="input-0626a5a50fc66ad2b5b011d6e7b2ce7d" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="input-0626a5a50fc66ad2b5b011d6e7b2ce7d" type="text" class="form-control" name="name" value="">
</div>
</div>
<div class="row mb-3">
<label for="input-9305af51825d7d37585246280ba45d21" class="col-4 col-form-label">EMail</label>
<div class="col-8">
<input id="input-9305af51825d7d37585246280ba45d21" type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="col-12 text-end">
<button id="button-5b6784d92013659ecb58cf086c660cb6" class="btn btn-primary" type="submit">Save</button>
</div>
</form>
To, indeed, leverage Bootstrap's client-side validation functionality, use the client_side_errors parameter to deploy the relevant attributes in the HTML markup (and do not forget to init the proper Javascript code).
<x-larastrap::form id="native-validated" client_side_errors="true">
<x-larastrap::text name="name" label="Name" required />
<x-larastrap::email name="email" label="EMail" required />
</x-larastrap::form>
<script>
(() => {
let form = document.getElementById('native-validated');
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false);
})();
</script>
<form id="native-validated" class="needs-validation" method="post" novalidate="1" name="native-validated">
<input type="hidden" name="_token" value="Bl0fGU5G5zV6lq3ktJWXEzMg1S2SnVQgOjkylEDB">
<div class="row mb-3" novalidate="1">
<label for="input-281f31e3b5dd8fcfaaa4b16711f88067" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="input-281f31e3b5dd8fcfaaa4b16711f88067" type="text" class="form-control" name="name" value="" required="" novalidate="1">
</div>
</div>
<div class="row mb-3" novalidate="1">
<label for="input-0eabfea1e8b51532dcff00b0c2b5569f" class="col-4 col-form-label">EMail</label>
<div class="col-8">
<input id="input-0eabfea1e8b51532dcff00b0c2b5569f" type="email" class="form-control" name="email" value="" required="" novalidate="1">
</div>
</div>
<div class="col-12 text-end">
<button id="button-83d0957ef1c06bfd1f514c0aa374d04a" class="btn btn-primary" novalidate="1" type="submit">Save</button>
</div>
</form>
<script>
(() => {
let form = document.getElementById('native-validated');
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false);
})();
</script>