logo oujood
🔍

HTML Attribut readonly de la balise input : Guide pratique

Maîtrisez l'utilisation de l'attribut readonly pour créer des champs de formulaire HTML en lecture seule avec notre guide complet et nos exemples commentés

OUJOOD.COM

Définition et utilisation de l'attribut readonly en HTML

LES BALISES HTML

L'attribut readonly est un attribut booléen HTML essentiel pour contrôler l'interaction utilisateur avec les champs de formulaire. Cet attribut permet de créer des champs en lecture seule qui affichent des informations sans permettre leur modification directe par l'utilisateur.

Lorsque l'attribut readonly est présent sur un élément input HTML, il spécifie qu'un champ d'entrée est en mode lecture seule. Cette propriété s'avère particulièrement utile dans les formulaires HTML5 pour afficher des données préremplies ou calculées automatiquement.

Un champ input readonly ne peut pas être modifié par l'utilisateur final, mais conserve sa valeur lors de la soumission du formulaire. Cette caractéristique le distingue de l'attribut disabled, qui empêche également la modification mais n'envoie pas la valeur du champ lors de la soumission.

L'attribut readonly peut être défini stratégiquement pour empêcher un utilisateur de modifier une valeur jusqu'à ce que certaines conditions préalables soient remplies (comme la validation d'une case à cocher, la sélection d'une option spécifique, ou l'authentification). Par la suite, un script JavaScript peut dynamiquement retirer l'attribut readonly et rendre le champ modifiable, offrant ainsi une expérience utilisateur interactive et contrôlée.

Syntaxe de l'attribut readonly HTML

<input readonly="readonly">

Exemple pratique : Formulaire HTML avec champ readonly

Cet exemple illustre l'utilisation d'un formulaire HTML5 avec champ en lecture seule. Le champ "Pays" est prérempli avec la valeur "France" et ne peut pas être modifié par l'utilisateur, garantissant ainsi l'intégrité des données transmises.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulaire HTML avec attribut readonly</title>
</head>
<body>
<form action="page-cible.php" method="post">
<!-- Champ nom modifiable par l'utilisateur -->
Nom: <input type="text" name="nom" placeholder="Votre nom complet"><br><br>
<!-- Champ email standard -->
Email: <input type="email" name="email" placeholder="votre@email.com"><br><br>
<!-- Champ pays en lecture seule avec readonly -->
Pays: <input type="text" name="country" value="France" readonly="readonly"><br><br>
<!-- Bouton de soumission du formulaire -->
<input type="submit" value="Envoyer">
</form>
</body>
</html>

Exemple avancé : Activation dynamique d'un champ readonly avec JavaScript

Dans cet exemple plus élaboré, nous démontrons comment manipuler l'attribut readonly avec JavaScript pour créer une expérience utilisateur interactive. Le champ d'adresse reste en lecture seule jusqu'à ce que l'utilisateur coche la case de confirmation.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Contrôle dynamique attribut readonly</title>
</head>
<body>
<form>
<!-- Case à cocher pour activer la modification -->
<input type="checkbox" id="autoriser" onclick="activerChamp()">
<label for="autoriser">Autoriser la modification de l'adresse</label><br><br>
<!-- Champ readonly désactivable -->
Adresse: <input type="text" id="adresse" value="123 Rue Exemple" readonly="readonly">
</form>
<script>
// Fonction pour activer ou désactiver le champ
function activerChamp() {
var checkbox = document.getElementById('autoriser');
var champAdresse = document.getElementById('adresse');
// Si la case est cochée, on retire readonly
if(checkbox.checked) {
champAdresse.removeAttribute('readonly');
champAdresse.style.backgroundColor = '#ffffff';
} else {
// Sinon on remet readonly
champAdresse.setAttribute('readonly', 'readonly');
champAdresse.style.backgroundColor = '#f0f0f0';
}
}
</script>
</body>
</html>

Compatibilité et support navigateurs de l'attribut readonly

Internet ExplorerFirefoxOperaGoogle ChromeSafari

L'attribut readonly est pris en charge dans tous les navigateurs modernes incluant Internet Explorer, Firefox, Opera, Chrome et Safari. Cette compatibilité universelle garantit que vos formulaires HTML avec champs readonly fonctionneront de manière cohérente sur toutes les plateformes web.

Différences entre HTML 4.01 et HTML5 pour readonly

Il n'existe aucune différence de syntaxe ou de comportement de l'attribut readonly entre HTML 4.01 et HTML5. L'attribut conserve exactement les mêmes fonctionnalités et la même utilisation dans les deux versions du langage HTML.

Readonly vs Disabled : Quelle différence ?

Il est crucial de comprendre la distinction entre readonly et disabled en HTML :

Attribut readonly : Le champ reste actif, peut recevoir le focus, sa valeur est envoyée lors de la soumission du formulaire, et il peut être stylisé normalement.

Attribut disabled : Le champ est complètement désactivé, ne peut pas recevoir le focus, sa valeur n'est PAS envoyée lors de la soumission, et il apparaît souvent grisé.

Remarque importante : L'attribut readonly est un attribut booléen et peut être défini de plusieurs manières équivalentes selon les standards HTML :
<input readonly>
<input readonly="readonly">
<input readonly="">
Ces trois syntaxes sont valides et produisent le même résultat en HTML5.

Bonnes pratiques d'utilisation de readonly

Pour optimiser l'utilisation de l'attribut readonly dans vos formulaires HTML, privilégiez son emploi pour les données calculées automatiquement, les identifiants système, les valeurs provenant de bases de données qui ne doivent pas être modifiées, et les champs conditionnels nécessitant une validation préalable.

Pensez à styliser visuellement vos champs readonly avec du CSS pour indiquer clairement à l'utilisateur qu'ils ne sont pas modifiables, par exemple avec une couleur de fond différente ou une bordure spécifique.

Liste des balises html

Par carabde | Mis à jour le 21 janvier 2026