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

Domenico_Falco1

Nuovo Utente
27 Mag 2019
26
0
1
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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

Nuovo Utente
27 Mag 2019
26
0
1
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 :

HTML:
<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 :

Codice:
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

Nuovo Utente
27 Mag 2019
26
0
1
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:
<?php
$miamail = "[email protected]";
$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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
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?
 
Discussioni simili
Autore Titolo Forum Risposte Data
V [Javascript] [HTML] Attivazione nuovi campi di input Javascript 2
F Creare elementi html con javascript Javascript 3
Shyson Meglio Javascript o HTML? Javascript 4
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
Giacomo Boccherini [Javascript] [HTML] Hover Javascript 1
T [Javascript] Richiamare un file.js (iframe) in html Javascript 1
Emix [Javascript] Somma con array input HTML Javascript 1
S [Javascript] [HTML] App incorpora pagina web - Come impedirlo? Javascript 0
K [Javascript] [HTML] Invertire colori alternati in tabella Javascript 3
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
M [Javascript] [HTML] link interno Javascript 1
N [Javascript] [HTML] Scelta di una select e compilazione automatica delle restanti Javascript 0
D [Javascript] [HTML] Evidenziare testo di una text Javascript 1
D [Javascript] [HTML] Insertimento audio Javascript 8
S [Javascript] [HTML] creare stringhe di riferimento da riutilizzare Javascript 5
C [Javascript] [HTML] È possibile "puntare" un iframe? Javascript 14
M [Javascript] [HTML] come aumentare il valore di una progress bar quando si preme un bottone Javascript 1
W [Javascript] Eseguire script residente nel sistema da html remota Javascript 0
Marcox360 Tris con HTML e JavaScript Javascript 0
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
A [Javascript] NodeJs e HTML Javascript 2
D [Javascript] [HTML] Countdown su Mobirise di 24 ore relative per ogni utente. Javascript 4
W [Javascript] [HTML] menù responsive fisso Javascript 2
C [Javascript] cambio dinamico riferimento elemento html Javascript 2
V Passaggio codice html a javascript Javascript 8
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
A [Javascript] Passare variabile tra pagine html diverse Javascript 13
Monz94 [Javascript] [HTML] Creare Checkbox o Radio con Immagini Javascript 0
S [Javascript] [HTML] problema nella stampa degli elementi della pagina Javascript 3
zammaeng [Javascript] [HTML] globo 3D Javascript 5
trattorino [Javascript] [HTML] risultato imput dentro text area Javascript 2
trattorino [Javascript] [PHP] due righe su sorgente html Javascript 3
C [Javascript] HTML form attributes: combining charset with enctype HTML e CSS 4
R [Javascript] [HTML] [PHP] Javascript 2
U [Javascript] [HTML] doppio click Javascript 18
S [Javascript] Slider html: Mostrare immagini su 4 colonne Javascript 20
A [Javascript] [HTML] Gestire una pagina esterna con 2 iframe Javascript 4
S [Javascript] Sostituire elemento HTML preso randomicamente dentro array Javascript 1
D [Javascript] Come creare un equalizzatore HTML collegato a files audio Javascript 1
asevenx [Javascript] [HTML] personalizzare stili input select Javascript 5
romeocharly errore del codice html con javascript durante ottimizzazione websitex5 Javascript 7
R Javascript e html - estrazione EXIF da jpg con link per geolocalizzazione google maps Javascript 0
A [CERCO] cerco esperto di codici HTML e JavaScript per lavorare ad 1 applicazione Offerte e Richieste di Lavoro e/o Collaborazione 1
U Far partire una funzione JavaScript premendo bottone in html Javascript 13
Devil-94 Javascript: script che permetta di inserire immagini in un certo elemento html. Javascript 2
I Pubblicare un sito realizzato con html, css e javascript Webdesign e Grafica 13
A eseguire codice html da funzione javascript Javascript 2
P text/ javascript in html Javascript 3

Discussioni simili