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

Discussione in 'Javascript' iniziata da Domenico_Falco1, 17 Giugno 2019.

  1. Domenico_Falco1

    Domenico_Falco1 Nuovo Utente

    Registrato:
    27 Maggio 2019
    Messaggi:
    26
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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
     
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.908
    Mi Piace Ricevuti:
    290
    Punteggio:
    83
    Sesso:
    Maschio
    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
     
  3. Domenico_Falco1

    Domenico_Falco1 Nuovo Utente

    Registrato:
    27 Maggio 2019
    Messaggi:
    26
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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;
    }
     
  4. Domenico_Falco1

    Domenico_Falco1 Nuovo Utente

    Registrato:
    27 Maggio 2019
    Messaggi:
    26
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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 
    "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.
     
  5. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.908
    Mi Piace Ricevuti:
    290
    Punteggio:
    83
    Sesso:
    Maschio
    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?
     
  6. Domenico_Falco1

    Domenico_Falco1 Nuovo Utente

    Registrato:
    27 Maggio 2019
    Messaggi:
    26
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Js e scusami :)
     
Sto caricando...

Condividi questa Pagina