Mettre en forme les champs texte et zones de texte
Appliquez des utilitaires de bordure, de remplissage intérieur, d’anneau et de focus aux champs texte et zones de texte pour créer des champs de formulaire clairs et accessibles.
Mettre en forme les champs texte et zones de texte est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
The Problem With Unstyled Inputs
Browsers render text inputs and textareas with their own default styles — different on every operating system and browser. On Chrome, the default input has a blue ring on focus; on Firefox, it may look different entirely.
Tailwind resets form elements with its preflight base styles, giving you a clean slate. From there, you apply your own border, padding, background, and focus styles explicitly, creating a consistent experience across all browsers.
<!-- Without styling: browser-dependent appearance -->
<input type="text" placeholder="Enter name" />
<!-- With Tailwind: consistent, styled input -->
<input
type="text"
placeholder="Enter name"
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>Base Input Structure
A well-styled text input combines sizing, border, background, and focus utilities. The core pattern is w-full px-3 py-2 text-sm bg-white border border-gray-300 rounded-lg for the default state.
Add placeholder:text-gray-400 to soften the placeholder text and text-gray-900 to ensure actual input text is dark and readable. The w-full utility ensures the input fills its container, which is the expected behavior for form fields.
<input
type="text"
placeholder="Full name"
class="w-full px-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg
placeholder:text-gray-400"
/>Focus Ring and Outline
The focus state is the most important interactive style for an input. Users navigating by keyboard need a clear visual indicator of which field is active. Use focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent to replace the browser's default outline with a Tailwind ring.
The focus:border-transparent removes the gray border when focused so the blue ring is not competing with it visually. Add transition-shadow duration-150 for a smooth ring appearance.
<input
type="email"
placeholder="you@example.com"
class="w-full px-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
transition-shadow duration-150"
/>Label and Input Pairing
Every input must have an associated label for accessibility. Wrap the label and input in a flex flex-col gap-1 container so they stack neatly. The label uses text-sm font-medium text-gray-700 and is connected to the input with matching for and id attributes.
Never rely solely on placeholder text as a label substitute — placeholders disappear when the user starts typing, leaving the field context-less.
<div class="flex flex-col gap-1">
<label for="email" class="text-sm font-medium text-gray-700">
Email address
</label>
<input
id="email"
type="email"
placeholder="you@example.com"
class="w-full px-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>Input With Icon Prefix
Many inputs benefit from a prefix icon that communicates the expected input type — a search magnifier, an envelope for email, or a lock for passwords. Use relative on the wrapper, absolute left-3 top-1/2 -translate-y-1/2 on the icon, and pl-10 on the input to indent the text past the icon.
This technique keeps the icon and input cleanly aligned without any extra wrapper elements affecting layout.
<div class="relative">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<input
type="email"
placeholder="you@example.com"
class="w-full pl-10 pr-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>Input With Suffix Button
A suffix button sits attached to the right edge of an input — common in password fields (show/hide toggle) or search inputs (submit button). Use a flex wrapper with overflow-hidden rounded-lg border border-gray-300 flex, set the input to flex-1 border-0 focus:ring-0, and style the button with a left border separator.
The border-0 on the input removes its border since the outer flex wrapper provides the shared border.
<div class="flex overflow-hidden rounded-lg border border-gray-300 focus-within:ring-2 focus-within:ring-blue-500">
<input
type="text"
placeholder="Search..."
class="flex-1 px-3 py-2 text-sm text-gray-900 border-0 focus:ring-0 focus:outline-none"
/>
<button class="px-4 py-2 bg-blue-600 text-white text-sm font-semibold
border-l border-gray-300 hover:bg-blue-700 transition-colors">
Search
</button>
</div>Styling Textareas
Textareas use the same utility classes as text inputs. Set a minimum height with min-h-24 or a fixed height with h-32, and add resize-none or resize-y to control whether the user can resize the element.
Use resize-y to allow vertical resizing (the most natural behavior for textareas) and prevent horizontal resizing that can break the layout. Adding leading-relaxed improves readability as users type multi-line content.
<div class="flex flex-col gap-1">
<label for="message" class="text-sm font-medium text-gray-700">Message</label>
<textarea
id="message"
rows="4"
placeholder="Write your message here..."
class="w-full px-3 py-2 text-sm text-gray-900 bg-white
border border-gray-300 rounded-lg
resize-y leading-relaxed
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
></textarea>
</div>Disabled Input Styling
Disabled inputs should be visually distinguished from active ones. Apply disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed to create a lighter, greyed-out appearance. Also add disabled:border-gray-200 to soften the border.
Always include the HTML disabled attribute — Tailwind's disabled: variant reads this attribute, so the styles only apply when the attribute is present.
<input
type="text"
value="Cannot edit this"
disabled
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
disabled:bg-gray-50 disabled:text-gray-400
disabled:cursor-not-allowed disabled:border-gray-200"
/>Read-Only Input Style
A readonly input displays a value users can read and copy but not modify. Unlike disabled, read-only inputs are still focusable and keyboard-navigable. Style them with read-only:bg-gray-50 read-only:text-gray-600 to subtly indicate they cannot be edited.
Read-only fields are used for computed values, confirmation fields, or reference data that users need to see but should not change.
<div class="flex flex-col gap-1">
<label for="ref" class="text-sm font-medium text-gray-700">Reference ID</label>
<input
id="ref"
type="text"
value="ORD-2026-00847"
readonly
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg
read-only:bg-gray-50 read-only:text-gray-600
focus:outline-none focus:ring-2 focus:ring-gray-400"
/>
</div>Input Size Variants
Forms in different contexts need different input sizes. Define a small, medium, and large variant by changing the padding and text size. A small input is ideal for inline filters; a large input suits hero search bars.
- Small:
px-2.5 py-1.5 text-xs - Medium:
px-3 py-2 text-sm(default) - Large:
px-4 py-3 text-base
<!-- Small -->
<input type="text" placeholder="Small" class="w-full px-2.5 py-1.5 text-xs border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500" />
<!-- Medium (default) -->
<input type="text" placeholder="Medium" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
<!-- Large -->
<input type="text" placeholder="Large" class="w-full px-4 py-3 text-base border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500" />Character Count Helper Text
Textareas for user-generated content often include a character count displayed below the field. Use a flex row with flex items-center justify-between mt-1 to position helper text on the left and the count on the right.
Style the helper text with text-xs text-gray-500 and the count with matching small gray text. JavaScript updates the count on each input event. When near the limit, switch the count color to text-red-600 as a warning.
<div class="flex flex-col gap-1">
<label for="bio" class="text-sm font-medium text-gray-700">Bio</label>
<textarea
id="bio"
maxlength="160"
rows="3"
oninput="document.getElementById('count').textContent = this.value.length"
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg resize-none
focus:outline-none focus:ring-2 focus:ring-blue-500"
></textarea>
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">Tell us about yourself</span>
<span class="text-xs text-gray-400"><span id="count">0</span>/160</span>
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: base input styling with border border-gray-300 rounded-lg px-3 py-2; focus rings replacing browser outlines using focus:outline-none focus:ring-2 focus:ring-blue-500; and special input patterns like icon prefixes with absolute positioning, suffix buttons using flex layout, and disabled/read-only variants. Next up we style select menus and checkboxes.
Questions Fréquemment Posées
La leçon « Mettre en forme les champs texte et zones de texte » est-elle gratuite ?
Oui — le texte complet de « Mettre en forme les champs texte et zones de texte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Mettre en forme les champs texte et zones de texte » ?
Appliquez des utilitaires de bordure, de remplissage intérieur, d’anneau et de focus aux champs texte et zones de texte pour créer des champs de formulaire clairs et accessibles. Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Mettre en forme les champs texte et zones de texte » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Mettre en forme les champs texte et zones de texte
- Menus de sélection et cases à cocher
- Modèles de disposition de formulaires
- Validation et états d’erreur