Css capitalize won't affect in http-post

Question

I noticed that when I capitalize with css text-transform:capitalize; and send this input with an http-post to another page, it won't affect the value for this form-element.

1. Why ?
2. Is there a workaround for it without using php's ucwords() ?

Answer 1

The answers, in brief:

1. Because CSS changes only the presentation of the data, not the underlying data itself.

2. Not that I can think of. Unless you're willing to use JavaScript to capitalize individual words prior to form submission?

If, however, you're willing to use JavaScript:

var form = document.getElementById('form'),
    input = form.getElementById('input');

function capitalizeInput(elem){
    var inputString = elem.value;
    var capitalizedString = inputString.replace(/(\b[a-z])/g, function(char){return char.toUpperCase();});
    return capitalizedString;
}

form.onsubmit = function(){
    this.value = capitalizeInput(input);
    return false;
};

JS Fiddle demo.

This is, obviously, a much simplified demonstration of the capabilities, but is, I think, enough to get you started, albeit only if you intend to go this route. And, if you do, remember that you must validate on the server-side too.

References:

• Mozilla Developer Network RegExp page.
• .replace().

Answer 2

1) You are styling the content, not modifying it.
2) PHP's ucwords() is there to be used, is it not? ;)

Answer 3

CSS will only affect the display of the value, not the text value itself.

Why don't you just capitalize on the server side?

If you must do this on the client end, see this question for ideas:

Change Input to Upper Case