How do you automatically set text box to Uppercase?

You've put the style attribute on the <img> tag, instead of the <input>.

It is also not a good idea to have the spaces between the attribute name and the value...

<input type="text" class="normal" 
       name="Name" size="20" maxlength="20" 
       style="text-transform:uppercase" /> 
<img src="../images/tickmark.gif" border="0" />

Please note this transformation is purely visual, and does not change the text that is sent in POST.

NOTE: If you want to set the actual input value to uppercase and ensure that the text submitted by the form is in uppercase, you can use the following code:

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

I think the most robust solution that will insure that it is posted in uppercase is to use the oninput method inline like:

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

EDIT

Some people have been complaining that the cursor jumps to the end when editing the value, so this slightly expanded version should resolve that

<input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />

Tags:

Html