Forms

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.

obj

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).

Name

Surname

Bio

Must be a valid email address

Country (as select)

Country (as radio)

France Germany Italy

Colors

Red Green Blue

@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 / method

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>

baseaction

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>

buttons

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>

buttons_align

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>

formview

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>

Errors Handling

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.

Submit the form below with at least an empty field to trigger server-side validation, then back here to see the result.

<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).

Submit the form below with at least an empty field to trigger client-side validation.

<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>

Intro

Components

Forms

Containers

Custom Elements

More

Forms

obj

action / method

baseaction

buttons

buttons_align

formview

Errors Handling

Larastrap