Why does text-transform in CSS not keep transform(uppercase) when submitted in form?

Question

So if I have the code

.rsform-input-box {text-transform: uppercase;}

at the website http://www.thediabetesnetwork.com specific to our form fields at the bottom, you see the conversion to uppercase as you type, but the data is exported in the case you have typed it in. For example if I type Shane, it visually displays SHANE. On submit it will revert back to Shane in the database (at some point before).

My question is why does it do this and what are the work around options? My other option is

 function toUpCase()
{
document.getElementById("first").value=document.getElementById("first").value.toUpperCase();
document.getElementById("last").value=document.getElementById("last").value.toUpperCase();
document.getElementById("email").value=document.getElementById("email").value.toUpperCase();
}  

Answer 1

CSS is only for presentation of content. Therefore it does not change the values entered by the user, or what is submitted by the form to your database.

If your business requirement is to only accept all uppercase values into the database, it would be best to handle this in the back-end. For example: $input = strtoupper($input); if using PHP. Doing this on the back-end will ensure that your processing occurs even if the user has JavaScript turned off.

For a low-security requirement, your idea of handling it via JavaScript should work; just fire your toUpCase function before submittting the form.

From a usability standpoint - it's not really the user's job to worry about what goes into the database; and they probably don't need to know. But you'll make their life a little easier if you enforce the correct case behind the scenes each time you use those data points - at log-in for example.