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().