Dans ce tutoriel, nous n'allons pas parler de Laravel mais plutôt de framework CSS. Je vais utiliser Bulma qui est une alternative à Bootstrap dont vous avez sans doute déjà entendu parler.
Mettre à jour notre structure
Tout d'abord nous allons modifier notre fichier layout.blade.php
afin d'ajouter le lien vers le CDN de Bulma.
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" />
</head>
<body>
<div class="container">
@yield('contenu')
</div>
</body>
</html>
Styliser notre formulaire
Nous allons nous rendre dans la documentation de Bulma pour les formulaires et copier un champ de type texte par défaut puis ajouter notre label
, et nos différents attributs sur la balise input
<div class="field">
<label class="label">Adresse e-mail</label>
<div class="control">
<input class="input" type="email" name="email" value="{{ old('email') }}">
</div>
</div>
Bulma nous fournit également deux classes utiles pour les erreurs : help
et is-danger
. Le champ final pour notre adresse e-mail ressemble donc à :
<div class="field">
<label class="label">Adresse e-mail</label>
<div class="control">
<input class="input" type="email" name="email" value="{{ old('email') }}">
</div>
@if($errors->has('email'))
<p class="help is-danger">{{ $errors->first('email') }}</p>
@endif
</div>
Nous pouvons faire la même chose pour les champs password
et password_confirmation
.
<div class="field">
<label class="label">Mot de passe</label>
<div class="control">
<input class="input" type="password" name="password">
</div>
@if($errors->has('password'))
<p class="help is-danger">{{ $errors->first('password') }}</p>
@endif
</div>
<div class="field">
<label class="label">Mot de passe (confirmation)</label>
<div class="control">
<input class="input" type="password" name="password_confirmation">
</div>
@if($errors->has('password_confirmation'))
<p class="help is-danger">{{ $errors->first('password_confirmation') }}</p>
@endif
</div>
Concernant le bouton « M'inscrire », les balises sont presques identiques :
<div class="field">
<div class="control">
<button class="button is-link" type="submit">M'inscrire</button>
</div>
</div>
J'ai également ajouté une classe section
à la balise form
de mon formulaire.
Notre application est bien plus jolie maintenant, nous pouvons passer au prochain tutoriel afin de traduire les différents messages d'erreur.