在输入元素上使用文本转换实际上会转换文本? [关闭]

Considering text-transform is a CSS property, I don't understand how the text in the input field which has text-transform set to uppercase is actually posting uppercase text to the page when the form is submitted. Isn't CSS just supposed to modify the appearance of the page and not the content itself? If I type something in lowercase in the form, shouldn't it submit in lowercase and just appear in uppercase in the form field?

I'm using PHP to process the post variables and any text that I type with text-transform set to uppercase is actually in uppercase. I modifying a value which was lowercase, the string 'This is a test.' for example... If I delete test and retype it in the input field and submit it, then print the submitted value, it will print out 'This is a TEST.' with the retyped text in uppercase and any original text in the same case as before. Is this just a glitch behavior or something?

Test code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<style type="text/css"><!--
textarea, input{
    text-transform: uppercase;
}
--></style>
</head>
<body>

<?

if( !empty($_POST) ){
    echo '<pre>' . htmlspecialchars(print_r($_POST, TRUE)) . '</pre>';
}

?>


<form action="" method="post">
    <textarea name="textarea" rows="3" cols="40">Default</textarea>
    <input name="text" value="Default">
    <input type="submit">
</form>

</body>
</html>

Interesting findings:

  • Opera 10 ignores text-transform: uppercase in textareas
  • Chrome 4 sends a GET request for the POST form
  • None of the browsers I've tested (Windows XP) feature the behaviour your describe: Firefox 3.6, IE 6, IE7, IE8, Opera 10...

IMHO there's a great chance that you're using JavaScript...

Well, if all the major browsers do actually transform the field contents, then your concern is of only philosophical interest. One could argue that for input fields (as opposed, say, to <h1> elements) having the on-screen appearance of user-typed text be different than what's actually submitted would be pretty unfriendly and confusing.

edit Testing browsers now ...

  • Chrome 4 on Windows applies the style visually but submitted text is not changed
  • Firefox 3.6 on Windows applies the style visually but submitted text is not changed
  • IE8 applies the style visually but submitted text is not changed

I am therefore starting to wonder what it is that makes you think that the posted field contents are converted by the CSS rule.