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();
}

CSS does not physically alter the case of the letters, only makes them appear uppercase. If you want them to be submitted as uppercase, you have to use JavaScript. — fncombo, Nov 01 '12 at 22:21
As a side note... as a user I find values in all UPPERCASE to be hard to read and "ugly". Is there a very good reason why you are converting everything to upper case? e.g. I have never written my email as FIRSTNAME.LASTNAME@GMAIL.COM — scunliffe, Nov 01 '12 at 22:26
@scunliffe That is what IT wants for the database, so I was trying to simplify the process and inform the user there is no point trying to play with case as we don't take it that way. — Shane, Nov 01 '12 at 22:29
@Eugene Thank you, I learned something new about CSS, just wanted to have a fail safe if javascript disabled, but that is looking to be less and less the norm these days unless you are gaming or hacking. — Shane, Nov 01 '12 at 22:32
@Shane - Seriously? IT *want* upper case email addresses? Someone may want it, but I can't believe it's your IT people. (if it is, you have some incompetents in IT). It's worth pointing out to them that the user name portion of the may be case sensitive. If you force an email address to upper case, it may make it invalid. See http://stackoverflow.com/questions/9807909/are-email-addresses-case-sensitive — Spudley, Nov 01 '12 at 22:36
@Spudley +1 That link really helps, I will have to look into this. — Shane, Nov 01 '12 at 22:43
@Shane CSS is a poor technology for security measures, because it is so easily circumvented / disabled by the user. — KatieK, Nov 01 '12 at 22:44
@KatieK I was actually using both, but found that the CSS was for presentation by accident when testing. I was under the assumption it was a fall-back feature. — Shane, Nov 01 '12 at 22:46

score 14 · Accepted Answer · answered Nov 01 '12 at 22:38

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.

+1 Thank you, good points. I will have to look into more the reason we use uppercase for email. — Shane, Nov 01 '12 at 22:42

score 1 · Answer 2 · answered Feb 21 '17 at 21:10

Thought I would add to this answer, if you want the content to be returned as how it is presented via CSS, innerText will do this. See this example:

Here is a running example:

(function() {
  document.getElementById('output').innerHTML = document.getElementById('text-selector').innerText;
}());

.uppercase {
  text-transform: uppercase;
}

div {
  margin-bottom: 20px;
}

<label>Input:</label>
<div class="container uppercase">
  <div>Here is some text.</div>
  <div id="text-selector">This is the text that will be be selected.</div>

</div>

<label>Output:</label>
<div class="container">
  <div>Here is some text.</div>
  <div id="output"></div>
</div>

Spec: https://html.spec.whatwg.org/multipage/dom.html#the-innertext-idl-attribute

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

2 Answers2