May 11
Un modello HTML è in genere uno o più documenti HTML che forniscono un quadro per un sito web, ma che non includono alcun contenuto. Un utente potrebbe acquistare un modello HTML per creare un sito web in modo rapido inserendo la sua Compagnia e completando altre sezioni vuote nel modello con le informazioni specifiche per la sua compagnia. È possibile chiamare JavaScript da un modello HTML nello stesso modo si potrebbe chiamare da qualsiasi file HTML.
1 Creare un modello HTML che include un modulo di contatto e chiamare JavaScript dal modello per verificare che l'utente ha inserito le informazioni nel modulo di contatto. Creare un nuovo file HTML utilizzando il blocco note o un editor HTML e inserire le informazioni di intestazione HTML nel file:
<! DOCTYPE HTML>
<Html lang = "it">
<Head>
<Meta charset = "utf-8">
<Title> modello HTML </ title>
2 Creare alcuni styling per il messaggio di errore si mostrerà se nessuna informazione è stata inserita in un campo nel modulo di ingresso:
<Style>
.error {color: red; font-weight: bold; }
</ Style>
3 Creare una funzione JavaScript che verrà chiamata dal modello quando l'utente invia il modulo HTML e convalida che l'utente ha inserito le informazioni per ogni campo di input. Fare riferimento ai singoli elementi del modulo con i loro nomi e le div per i messaggi di errore da parte loro ID. Restituisce vero se la convalida ha avuto successo e false se non ha avuto successo:
<Script>
Funzione validate () {
var nameError = document.getElementById("nameError");
var emailError = document.getElementById ( "emailError");
nameError.innerHTML = "";
emailError.innerHTML = "";
if (document.contact.name.value == "") {
nameError.innerHTML = "Devi inserire un nome!";
return false;
}
if (document.contact.email.value == "") {
emailError.innerHTML = "È necessario immettere un indirizzo di posta elettronica!";
return false;
}
return true;
}
</ Script>
</ Head>
4 Creare il modulo di contatto HTML. Assegnare gli stessi nomi alla forma e ai valori di input, come si è utilizzato nella funzione JavaScript e gli stessi ID alle div notifica di errore. Creare un pulsante di invio per la forma e chiamare la funzione di validazione JavaScript con l'evento "onSubmit", che permetterà la forma da lavorare se la funzione restituisce vero, ma non inviare il modulo se la funzione restituisce false:
<Body>
Si prega di compilare le seguenti informazioni per saperne di più su mia azienda:
<Form name = "contatto" onSubmit = "ritorno validate ()">
Nome: <input type = "text" name = "nome" width = "30"> <span id = "NameError" class = "error"> </ span>
E-mail: <input type = "text" name = "email" width = "30"> <span id = "emailError" class = "error"> </ span>
<Input type = "submit" name = "submit" value = "submit">
</ Form>
</ Body>
</ Html>
5 Salvare il file HTML e aprirlo in un browser. Prova che la forma non presenta se uno dei campi di input di contatto è vuota.