Écrire des formulaires dans Laravel avec Bootstrap 5, différentes possibilités

• laravelcollective/html
• html/blade
• blade-ui-kit
• Conclusion

Voyons comment coder un simple formulaire sous Bootstrap 5.

Je fais volontairement abstraction de la gestion des erreurs « inline » car cela complexifierait trop le code et je me contente du strict minimum ; mais chacun de ces exemples pourraient très facilement se complexifier très rapidement.

laravelcollective/html¶

Historiquement avec Laravel 4.x et la version 5.0 qui a extrait de le package dans un projet collaboratif nous sommes nombreux à avoir utilisé laravelcollective/html

En utilisant ce package cela donne quelque chose de cet ordre :

 1{!! Form::open(['route' => 'contact.post']) !!}
 2    <div class="mb-3">
 3        {!! Form::label('email', 'Adresse email', ['class' => 'form-label']); !!}
 4        {!! Form::email('email', old('email'), ['class' => 'form-control']) !!}
 5    </div>
 6    <div class="mb-3">
 7        {!! Form::label('subject', 'Sujet', ['class' => 'form-label']); !!}
 8        {!! Form::text('subject', old('subject'), ['class' => 'form-control']) !!}
 9    </div>
10    <div class="mb-3">
11        {!! Form::label('message', 'Message', ['class' => 'form-label']); !!}
12        {!! Form::textarea ('message', old('message'), ['class' => 'form-control']) !!}
13    </div>
14    <button type="submit" class="btn btn-primary">Envoyer</button>
15{!! Form::close() !!}

html/blade¶

Depuis un certain temps il y a un mouvement qui préconise d’abandonner laravelcollective/html au profit de HTLM et des utilitaires Blade.

De cette façon nous pouvons avoir quelque chose qui ressemble à cela :

 1<form action="{!! route('contact.post') !!}" method="POST">
 2    @csrf
 3    <div class="mb-3">
 4        <label for="email" class="form-label">Adresse email</label>
 5        <input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}">
 6    </div>
 7    <div class="mb-3">
 8        <label for="subject" class="form-label">Sujet</label>
 9        <input type="text" name="subject" id="subject" class="form-control" value="{{ old('subject') }}">
10    </div>
11    <div class="mb-3">
12        <label for="message" class="form-label">Message</label>
13        <textarea name="message" id="message" class="form-control">{{ old('message') }}</textarea>
14    </div>
15    <button type="submit" class="btn btn-primary">Envoyer</button>
16</form>

blade-ui-kit¶

Mais, depuis maintenant longtemps Laravel propose les « components » Blade qui permettent une syntaxe proche de HTML tout en allant à l’essentiel. Un projet a vu le jour Blade UI Kit qui propose (notamment) des composants pour créer des éléments de formulaire.

 1<x-form action="{!! route('contact.post') !!}">
 2    <div class="mb-3">
 3        <x-label for="email" class="form-label">Adresse email</x-label>
 4        <x-email name="email" class="form-control" />
 5    </div>
 6    <div class="mb-3">
 7        <x-label for="subject" class="form-label">Sujet</x-label>
 8        <x-input name="subject" class="form-control" />
 9    </div>
10    <div class="mb-3">
11        <x-label for="message" class="form-label">Message</x-label>
12        <x-textarea name="message" class="form-control" />
13    </div>
14    <button type="submit" class="btn btn-primary">Envoyer</button>
15</x-form>

Conclusion¶

De toute évidence la version Blade UI Kit est ma préférée, mais comme je l’ai dis en introduction : il ne s’agit que d’un exemple rudimentaire qui ne prend pas en charge plusieurs aspects.

Idéalement j’aimerais écrire :

 1<x-form action="{!! route('contact.post') !!}">
 2    <div class="mb-3">
 3        <x-label for="email">Adresse email</x-label>
 4        <x-email name="email" />
 5    </div>
 6    <div class="mb-3">
 7        <x-label for="subject">Sujet</x-label>
 8        <x-input name="subject" />
 9    </div>
10    <div class="mb-3">
11        <x-label for="message">Message</x-label>
12        <x-textarea name="message" />
13    </div>
14    <button type="submit" class="btn btn-primary">Envoyer</button>
15</x-form>

Et qu’en plus les erreurs « inline » soient gérées.

Je réflechis donc à un package qui utiliserait Blade UI Kit mais préparé à Bootstrap. Affaire à suivre…