Problem to integrate a tailwindcss / laravel8 form, does not retrieve data and found an error SQLSTATE [23000] Integrity violation: 1048 - laravel-blade

Question

I have two forms :
One works with the same data and the other don't.
I'm new to laravel and tailwindcss and i need to understand what is happening.
I must have made a mistake that I don't see or understand...
My form 1 : Data passes
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
#foreach ($errors->all() as $error)
<span class="block text-red-500">{{ $error }}</span>
#endforeach
<form action="{{ route('categories.posts.store', $category) }}" method="post" enctype="multipart/form-data">
#csrf
<x-label for="title" value="Titre du post" />
<x-input id="title" name="title" />
<x-label for="content" value="Contenu du post" />
<textarea id="content" name="content"></textarea>
<x-label for="image" value="Image du post" />
<x-input type="file" id="image" name="image"/>
<x-button style="display: block !important" class="mt-10">Créer mon post</x-button>
</form>
</div>
My form 2 : Data don't passes
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<div class="bg-white shadow rounded-lg p-6">
<div class="grid lg:grid gap-6">
<div class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1">
<div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
#foreach ($errors->all() as $error)
<span class="block text-red-500">{{ $error }}</span>
#endforeach
<form action="{{ route('categories.posts.store', $category) }}" method="post" enctype="multipart/form-data">
#csrf
<p>
<label for="title" class="bg-white text-gray-600 px-1">Titre du Post</label>
</p>
</div>
<p>
<input id="title" autocomplete="false" tabindex="0" type="text" class="py-1 px-1 text-gray-900 outline-none block h-full w-full">
</p>
</div>
<div class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1">
<div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
<p>
<label for="image" value="Image du post" class="bg-white text-gray-600 px-1">Contenu du post</label>
</p>
</div>
<p>
<input type="file" id="image" name="image" autocomplete="false" tabindex="0" type="text" class="py-1 px-1 outline-none block h-full w-full">
</p>
</div>
<div class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1">
<div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
<p>
<label for="Content" class="bg-white text-gray-600 px-1">Contenu du post</label>
</p>
</div>
<p>
<textarea id="content" name="content"
rows="4"
class="ring-1 ring-gray-300 w-full rounded-md px-4 py-2 mt-2 outline-none focus:ring-2 focus:ring-teal-300"
></textarea>
</p>
</div>
<div class="border-t mt-6 pt-3">
<button class="rounded text-white px-3 py-1 bg-green-500 hover:shadow-inner hover:bg-green-700 transition-all duration-300">
Créer mon post
</button>
</div>
</div>
</form>
</div>
</div>
I get a nice error : SQLSTATE[23000]: Integrity constraint violation: 1048

Answer 1

Please add the name attribute to your title input.
<input id="title" name="title" autocomplete="false" tabindex="0" type="text" class="py-1 px-1 text-gray-900 outline-none block h-full w-full">