[Javascript] [HTML] Campi form con sfondo imposto dal browser

[Domenico_Falco1]

Buon giorno a tutti

Sto realizzando un semplice form in javascript, ho notato che se clicco su un campo, il browser in automatico mi fa comparire una sorta di select di scelta di nome o email, memorizzati sull'account google, bene nessun problema, ma nel momento che scelgo una di quelle opzioni, lo sfondo del campo si colora di azzurrino, invece se lo scrivo io senza alcuna scelta, il campo rimane del colore da me imposto nel CSS.

Mi chiedevo se c'è un modo per evitare quello sfondo, ho provato ad usare la tecnica dell' !important, ma ignorata.

Ci sono suggerimenti o consigli a riguardo ?

Grazie per eventuali risposte.

Saluti

Domenico

 

[Max 1]

Se vuoi una risposta dovresti postare il codice interessato o meglio ancora il link alla pagina online, perché così si fa molta fatica a darti un consiglio

 

[Domenico_Falco1]

Buona sera Max, certo con piacere, non mi piace invadere subito con tante righe di codice, se qualcuno mi risponde mi attivo

Ecco il codice che uso per il mio modulo contatti, non vi spaventate per tutti quei if, ho provato a fare con i for ma mi si complica ancora di più la vita, comunque ecco a voi, innanzitutto il codice HTML del form :

<form method="post" name="invio" action ="formmail.php" class="flex-form" id="myForm">

<div class="fcontainer">
<label for="nome" class="flabel">Nome:</label>
<input  type="text" class="fnome" name="nome" onchange="insernome()"; placeholder="Inserire il proprio Nome">
</div>

<div class="fcontainer">
<label for="cognome" class="flabel">Cognome:</label>
<input  type="text" class="finput" name="cognome" onchange="insercognome()"; placeholder="Inserire il proprio Cognome" disabled>
</div>

<div class="fcontainer">
<label for="email" class="flabel">Email:</label>
<input type="text"   class="finput" name="email" onchange="contremail()" placeholder="Inserire la propria Email" disabled>
</div>

<div class="fcontainer">
<label for="cognome" class="flabel">Messaggio:</label>
<textarea  class="ftext" name="messaggio" rows="6" cols="21" disabled onchange="scrivimes()" placeholder="Inserire il Messaggio" disabled resize:"autoResize"></textarea>
</div>

<div class="fcontainer">
<label for="cognome" class="flabel"></label>
<button type="submit" class="fbutton" value="Invia" name="myButton"> INVIA </button>
<button  type="button" class="fbutton" value="Invia" name="myReset"  onclick="resetForm()"> RESET </button>
</div>
</form>

e poi il codice in javascript per i vari controlli :

function insernome() {
var elements = document.getElementsByTagName("input")
var nome = document.invio.nome.value;
var nome_valid = /^[a-zA-Z/\s/]+$/;
var n = nome.length;
if ((nome == "") || (nome == "undefined") || (!nome_valid.test(nome)) || (n > 20)) {
//alert("Il campo Nome è obbligatorio.");
document.invio.nome.value ="";
document.invio.nome.style.backgroundColor = "white";
document.invio.nome.style.border = "solid #333";
document.invio.nome.placeholder="Nome non valido";
document.invio.cognome.style.border = "solid #333";
document.invio.email.style.border = "solid #333";
document.invio.messaggio.style.border = "solid #333";
if ( document.invio.cognome.value !="") { document.invio.cognome.disabled = true;
document.invio.cognome.style.backgroundColor = "#E8F0FE"; };
if ( document.invio.cognome.value =="") { document.invio.cognome.disabled = true;
document.invio.cognome.style.backgroundColor = "#c0c0c0"; };
if ( document.invio.email.value !="") { document.invio.email.disabled = true;
document.invio.email.style.backgroundColor = "#E8F0FE"; };
if ( document.invio.email.value =="" ) { document.invio.email.disabled = true;
document.invio.email.style.backgroundColor = "#c0c0c0"; };
if ( document.invio.messaggio.value !="") { document.invio.messaggio.disabled = true;
document.invio.messaggio.style.backgroundColor = "#E8F0FE"; };
if ( document.invio.messaggio.value =="") { document.invio.messaggio.disabled = true;
document.invio.messaggio.style.backgroundColor = "#c0c0c0"; };
return false;
}
else  {
document.invio.nome.style.backgroundColor = "#E8F0FE";
document.invio.nome.style.border = "solid red";
if ( document.invio.cognome.value !="")  { document.invio.cognome.disabled = false; document.invio.cognome.style.backgroundColor = "#E8F0FE";
document.invio.cognome.style.border = "solid red"; }
if ( document.invio.cognome.value =="")  { document.invio.cognome.disabled = false; document.invio.cognome.style.border = "solid #333";
document.invio.cognome.style.backgroundColor = "white"; }
if ( document.invio.email.value !="")  { document.invio.email.disabled = false; document.invio.email.style.backgroundColor = "#E8F0FE";
document.invio.email.style.border = "solid red"; }
if ((document.invio.email.value =="") && (document.invio.cognome.value !=""))  { document.invio.email.disabled = false; document.invio.email.style.border = "solid #333";
document.invio.email.style.backgroundColor = "white"; }
if ((document.invio.email.value =="") && (document.invio.cognome.value ==""))  { document.invio.email.disabled = true; document.invio.email.style.border = "solid #333";
document.invio.email.style.backgroundColor = "#c0c0c0"; }
if ( document.invio.messaggio.value !="")  { document.invio.messaggio.disabled = false; document.invio.messaggio.style.backgroundColor = "#E8F0FE";
document.invio.messaggio.style.border = "solid red"; }
if ((document.invio.messaggio.value =="") && (document.invio.email.value !=""))  { document.invio.messaggio.disabled = false; document.invio.messaggio.style.border = "solid #333";
document.invio.messaggio.style.backgroundColor = "white"; }
if ((document.invio.messaggio.value =="") && (document.invio.email.value ==""))  { document.invio.messaggio.disabled = true; document.invio.messaggio.style.border = "solid #333";
document.invio.messaggio.style.backgroundColor = "#c0c0c0"; }
return false }
}

function insercognome() {
var cognome = document.invio.cognome.value;
var cognome_valid = /^[a-zA-Z/\s/]+$/;               
var n = cognome.length;

if ((cognome == "") || (cognome == "undefined") || (!cognome_valid.test(cognome)) || (n > 20)) {
//alert("Il campo Nome è obbligatorio.");

document.invio.cognome.value ="";
document.invio.cognome.style.backgroundColor = "white";
document.invio.cognome.style.border = "solid #333";
document.invio.cognome.placeholder="Cognome non valido";
document.invio.email.style.border = "solid #333";
document.invio.messaggio.style.border = "solid #333";
if ( document.invio.email.value !="") { document.invio.email.disabled = true;
document.invio.email.style.backgroundColor = "#E8F0FE"; };
if ( document.invio.email.value =="") { document.invio.email.disabled = true;
document.invio.email.style.backgroundColor = "#c0c0c0"; };
if ( document.invio.messaggio.value !="") { document.invio.messaggio.disabled = true;
document.invio.messaggio.style.backgroundColor = "#E8F0FE"; };
if ( document.invio.messaggio.value =="") { document.invio.messaggio.disabled = true;
document.invio.messaggio.style.backgroundColor = "#c0c0c0"; };
return false;
}
else  {
document.invio.cognome.style.backgroundColor = "#E8F0FE";
document.invio.cognome.style.border = "solid red";
if ( document.invio.email.value !="")  { document.invio.email.disabled = false; document.invio.email.style.backgroundColor = "#E8F0FE";
document.invio.email.style.border = "solid red"; }
if ( document.invio.email.value =="")  { document.invio.email.disabled = false; document.invio.email.style.border = "solid #333";
document.invio.email.style.backgroundColor = "white"; }
if ( document.invio.messaggio.value !="")  { document.invio.messaggio.disabled = false; document.invio.messaggio.style.backgroundColor = "#E8F0FE";
document.invio.messaggio.style.border = "solid red"; }
if ((document.invio.messaggio.value =="") && (document.invio.email.value !=""))  { document.invio.messaggio.disabled = false; document.invio.messaggio.style.border = "solid #333";
document.invio.messaggio.style.backgroundColor = "white"; }
if ((document.invio.messaggio.value =="") && (document.invio.email.value ==""))  { document.invio.messaggio.disabled = true; document.invio.messaggio.style.border = "solid #333";
document.invio.messaggio.style.backgroundColor = "#c0c0c0"; }
return false }
}


function contremail() {
var email = document.invio.email.value;
var email_valid = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/;
if (!email_valid.test(email)) {
document.invio.email.value ="";
document.invio.email.style.border = "solid #333";
document.invio.email.style.backgroundColor = "white";
document.invio.email.placeholder="Email errata";
if ( document.invio.messaggio.value !="") { document.invio.messaggio.disabled = true;
document.invio.messaggio.style.backgroundColor = "#E8F0FE"; document.invio.messaggio.style.border = "solid #333";};
if ( document.invio.messaggio.value =="") { document.invio.messaggio.disabled = true;
document.invio.messaggio.style.backgroundColor = "#c0c0c0"; };
return false }

else {
document.invio.email.style.backgroundColor = "#E8F0FE";
document.invio.email.style.border = "solid red";
document.invio.messaggio.disabled = false;
if ( document.invio.messaggio.value !="")  { document.invio.messaggio.disabled = false; document.invio.messaggio.style.backgroundColor = "#E8F0FE";
document.invio.messaggio.style.border = "solid red"; }
if (document.invio.messaggio.value =="")  { document.invio.messaggio.disabled = false; document.invio.messaggio.style.border = "solid #333";
document.invio.messaggio.style.backgroundColor = "white"; }
return false }
 }


function scrivimes() {
var messaggio = document.invio.messaggio.value;
if (messaggio == "") { document.invio.messaggio.style.border = "solid #333";
document.invio.messaggio.style.backgroundColor = "white";
document.invio.messaggio.placeholder="Nessun Testo"
return false } else {
document.invio.messaggio.style.backgroundColor = "#E8F0FE";
document.invio.messaggio.style.border = "solid red";
 }
 }

function resetForm() {
document.invio.nome.value ="";
document.invio.nome.style.backgroundColor = "white ";
document.invio.nome.style.border = "solid #333";
document.invio.cognome.value ="";
document.invio.cognome.style.border = "solid #333";
document.invio.cognome.style.backgroundColor = "#c0c0c0";
document.invio.cognome.disabled = true;
document.invio.email.value ="";
document.invio.email.style.border = "solid #333";
document.invio.email.style.backgroundColor = "#c0c0c0";
document.invio.email.disabled = true;
document.invio.messaggio.value ="";
document.invio.messaggio.style.border = "solid #333";
document.invio.messaggio.style.backgroundColor = "#c0c0c0";
document.invio.messaggio.disabled = true;
}

 

[Domenico_Falco1]

e poi per il codice php per l'invio, per adesso sto usando questo semplicissimo, ma sto studiando quelli fatti per un ulteriore controllo ed anti spam ( anzzi se avete consigli e dirmi dome leggere vi ringrazio di cuore ) :

<?php
$miamail = "trinitycoret@trinitycoret.cloud";
$successo = $_POST['successo'];
$nome = $_POST['nome'];
$cognome = $_POST['cognome'];
$email = $_POST['email'];
$msg = $_POST['messaggio'];
$messaggio = "Nome: " . $nome . "\nCognome: " . $cognome . "\nEmail: " . $email . "\nMessaggio: " . $msg;
$headers = "From: " . $miamail . "\r\n" . "Reply-To: " . $miamail;
mail($miamail,"Messaggio dal sito",$messaggio,$headers);
header("location:http://www.trinitycoret.cloud/CONTATTI.php" . $successo);
?>

Lo so è tremendamente lungo ma così riesco a controllare tutti gli sfondi e i disable per le varie azioni dell'utente, ad esempio se scrive tutto i campi e poi cancella il nome, tutto si blocca se non rimette un nome valido.

 

[Max 1]

Il tuo problema a questo punto non riguarda più html ma JS e PHP pertanto ti devo spostare in una di queste sezioni!
Pensi ti vada meglio JS o PHP?

 

[Domenico_Falco1]

Js e scusami