Comment forcer la saisie en majuscule dans un formulaire HTML

J’utilise l’attribut style pour définir l’entrée de l’utilisateur en majuscules, de sorte que lorsque l’utilisateur commence à taper dans la zone de texte, par exemple hello, il soit transformé en majuscules comme HELLO sans que l’utilisateur doive appuyer sur le touche de verrouillage des majuscules.

<input type="text" class="crl" size="20" maxlength="20"> 
<img src="../image/logo.png" border="0" style='text-transform:uppercase'/>

Donc comment puis-je forcer la saisie en majuscule dans un formulaire HTML.

Vous avez mis l’attribut style sur la balise <img>, au lieu de la balise <input>.

<input type="text" class="crl" 
       size="20" maxlength="20" 
       style="text-transform:uppercase" /> 
<img src="../image/logo.png" border="0" />

Je pense que la solution la plus efficace pour s’assurer qu’elle est affichée en majuscules est d’utiliser la méthode oninput en ligne comme suit :

<input oninput="this.value = this.value.toUpperCase()" />

La réponses avec le style text-transformation:uppercase ne transmettent pas de données en majuscules au serveur lors de la soumission du formulaire. Vous pouvez faire quelque chose comme ceci à la place :

Pour l’input HTML, utilisez onkeydown :

<input name="myInput" onkeydown="upperCaseFun(this)"/>

Dans votre JavaScript :

function upperCaseFun(a){
    setTimeout(function(){
        a.value = a.value.toUpperCase();
    }, 1);
}

Avec la fonction upperCaseFun(), à chaque fois que l’on appuie sur une touche, la valeur de l’entrée va prendre sa forme majuscule.

Je vous recommande le tutoriel suivant: