Perché la trasformazione del testo nei CSS non mantiene la trasformazione (maiuscola) quando viene inviata nel modulo?

Question

Quindi, se ho il codice

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

sul sito http://www.thediabetesnetwork.com specifico per i nostri campi del modulo in fondo, si vede la conversione in lettere maiuscole durante la digitazione, ma i dati vengono esportati nel caso che avete digitato Ad esempio, se digito Shane, visualizza visivamente SHANE. Al momento dell'invio tornerà a Shane nel database (prima o poi).

La mia domanda è: perché fa questo e quali sono le opzioni di lavoro? La mia altra opzione è

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

Answer 1

CSS è solo per presentazione dei contenuti. Pertanto, non modifica i valori immessi dall'utente o ciò che viene inviato dal modulo al database.

Se il tuo requisito aziendale è quello di accettare tutti i valori maiuscoli nel database, sarebbe meglio gestirlo nel back-end. Ad esempio: $input = strtoupper($input); se si utilizza PHP. Fare ciò sul back-end garantirà che l'elaborazione avvenga anche se l'utente ha disattivato JavaScript.

Per esigenze di bassa sicurezza, l'idea di gestirlo tramite JavaScript dovrebbe funzionare; è sufficiente attivare la funzione toUpCase prima di inviare il modulo.

Dal punto di vista dell'usabilità, non è proprio compito dell'utente preoccuparsi di ciò che viene inserito nel database; e probabilmente non hanno bisogno di sapere. Ma ti renderai la vita un po 'più facile se applichi il caso corretto dietro le quinte ogni volta che usi quei punti dati, ad esempio al log-in.

Answer 2

Pensavo di aggiungere a questa risposta, se si desidera che il contenuto venga restituito come viene presentato tramite CSS, lo farà con innerText. Vedere questo esempio:

Ecco un esempio di esecuzione:

(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