为什么CSS中的text-transform在表单中提交时不保留transform（大写）？答案

【问题标题】：Why does text-transform in CSS not keep transform(uppercase) when submitted in form?为什么CSS中的text-transform在表单中提交时不保留transform（大写）？
【发布时间】：2012-10-22 14:10:12
【问题描述】：

如果我有代码

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

在特定于底部表单字段的网站http://www.thediabetesnetwork.com 上，您会在键入时看到转换为大写，但在您输入的情况下会导出数据。例如，如果我键入 Shane，它直观地显示 SHANE。提交后，它将恢复到数据库中的 Shane（在之前的某个时间点）。

我的问题是它为什么要这样做，有哪些解决方法？我的另一个选择是

 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 不会物理改变字母的大小写，只会使它们显示为大写。如果您希望它们以大写形式提交，则必须使用 JavaScript。
... 或者您可以在收到它们时在服务器端修复它们。
作为旁注......作为用户，我发现所有大写的值都难以阅读和“丑陋”。将所有内容都转换为大写字母有很好的理由吗？例如我从未将我的电子邮件写为 FIRSTNAME.LASTNAME@GMAIL.COM
@Shane - 认真的吗？ IT 想要大写电子邮件地址？有人可能想要它，但我不敢相信这是您的 IT 人员。（如果是，您在 IT 方面有些不称职）。值得向他们指出，用户名部分可能区分大小写。如果您将电子邮件地址强制为大写，可能会使其无效。见stackoverflow.com/questions/9807909/…
@Shane CSS 是一种糟糕的安全措施技术，因为它很容易被用户规避/禁用。

标签： html css forms validation

【解决方案1】：

我想我会添加到这个答案中，如果您希望内容以通过 CSS 呈现的方式返回，innerText 将执行此操作。看这个例子：

这是一个运行示例：

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

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

【讨论】：

【解决方案2】：

CSS 仅用于呈现内容。因此，它不会更改用户输入的值，或表单提交到数据库的内容。

如果您的业务需求是只接受所有大写值到数据库中，最好在后端处理这个问题。例如：$input = strtoupper($input); 如果使用 PHP。在后端执行此操作将确保您的处理发生，即使用户关闭了 JavaScript。

对于低安全性要求，您通过 JavaScript 处理它的想法应该可行；只需在提交表单之前触发您的toUpCase 函数。

从可用性的角度来看 - 担心什么进入数据库并不是用户的工作；他们可能不需要知道。但是，如果您在每次使用这些数据点时（例如在登录时）都在幕后强制执行正确的案例，您会让他们的生活更轻松一些。

【讨论】：

+1 谢谢，好点子。我将不得不进一步研究我们在电子邮件中使用大写字母的原因。