Un modello HTML è tipicamente uno o più documenti HTML che forniscono un quadro per un sito web, ma che non comprende alcun contenuto. Un utente potrebbe acquistare un modello HTML per creare un sito web in modo rapido , inserendo la sua azienda le informazioni di contatto e completare le altre sezioni vuote nel modello con le informazioni specifiche per la sua compagnia . È possibile chiamare JavaScript da un modello HTML allo stesso modo si potrebbe chiamare da qualsiasi file HTML . Istruzioni
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 Template < /title> <br> 2 <p> creare qualche styling per il messaggio di errore verrà visualizzato se nessuna informazione è stata inserita in un campo nel modulo di ingresso : <br> <p> <style> <br> <p> errore { color: red; font. -weight: bold ; } <br> <p> < /style > <br> 3 <p> Creare una funzione JavaScript che verrà chiamata dal modello quando l' utente invia il form HTML e volontà confermare che l'utente ha immesso le informazioni per ogni campo di input . Riferimento ai singoli elementi del form con i loro nomi e il div per i messaggi di errore da parte loro ID . Restituisce vero se la validazione ha avuto successo e false se non ha avuto successo : <br> <p> <script> <br> funzione <p> validate ( ) { var <br> <p> NameError = document.getElementById ( " NameError " ) ; <br> <p> emailError var = document.getElementById ( " emailError " ) ; <br> <p> nameError.innerHTML = " " ; <br> <p> emailError.innerHTML = " " ; < br > <p> se ( document.contact.name.value == " " ) { <br> <p> nameError.innerHTML = " devi inserire un nome"; ! <br> <p> return false ; <br> <p> } <br> <p> se ( document.contact.email.value == " " ) { <br> <p> emailError.innerHTML = "Devi inserire un indirizzo email " ; ! <br> < p > return false ; } <br> <p> <br> <p> return true ; } <br> <p> <br> <p> < /script> <br> <p> < /head> <br> <br> 4 <p> Creare il modulo di contatto HTML . Assegnare lo stesso nome alla forma e ai valori di input , come si è utilizzato nella funzione javascript e gli stessi ID per il div di notifica di errore. Creare un pulsante di invio per il form e chiamare la funzione di convalida di JavaScript con l'evento " onSubmit " , che permetterà la forma da lavorare se la funzione restituisce true , ma non inviare il modulo se la funzione restituisce false : <br> <p> <body> <br> <p> Si prega di compilare le seguenti informazioni per saperne di più su la mia azienda : <br> <p> <form name="contact" onSubmit="return validate()"> <br> <p> Nome: <input type="text" name="name" width="30"> <span id="nameError" class="error"> < /span> < br > <p> Email : <input type="text" name="email" width="30"> <span id="emailError" class="error"> < /span> <br> < p > <input type="submit" name="submit" value="submit"> <br> <p> < /form > <br> <p> < /body> <br> <p> < /html > <br> 5 <p> Salvare il file HTML e aprirlo in un browser . Prova che la forma non presenta se uno dei campi di input contatto è vuoto . <br> <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Previous ： <a class='LinkPrevArticle' href='/Programmazione/javascript-programming/90950.html' >Come modificare un indice discesa in Javascript </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programmazione/javascript-programming/90952.html' >Come calcolare un totale Moving in Javascript </a></li></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Articoli Correlati </td> </tr>
</table>
<table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91239.html" title="Come trovare la data dell'ultima modifica di una pagina Web " target="_self">Come trovare la data dell'ultima modifica di una pagina…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90990.html" title="Come inserire elementi con DIV in Javascript " target="_self">Come inserire elementi con DIV in Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91156.html" title="Che cosa è l' Adobe ExtendScript Toolkit " target="_self">Che cosa è l' Adobe ExtendScript Toolkit </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91061.html" title="Come cancellare il testo da un campo di ricerca in una pagina HTML su Click " target="_self">Come cancellare il testo da un campo di ricerca in una …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91046.html" title="Come usare le espressioni regolari con Javascript " target="_self">Come usare le espressioni regolari con Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91150.html" title="Come implementare un distruttore di base in Javascript " target="_self">Come implementare un distruttore di base in Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91258.html" title="Come utilizzare Testo scorrevole in Javascript " target="_self">Come utilizzare Testo scorrevole in Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91189.html" title="Galleria Tutorial Javascript " target="_self">Galleria Tutorial Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90998.html" title="Come ottenere larghezza del browser " target="_self">Come ottenere larghezza del browser </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91047.html" title="Come prova di un array vuoto con JavaScript " target="_self">Come prova di un array vuoto con JavaScript </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="20" valign="top"></td>
<td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Articoli in evidenza </td> </tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/96296.html" title="Come collegare un database di Visual Basic " target="_self">Come collegare un database di Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/perl-programming/93379.html" title="Come nascondere password Personaggi in STDIN di Windows Perl " target="_self">Come nascondere password Personaggi in STDIN di Windows…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/python-programming/93995.html" title="Come sostituire il primo carattere in Python " target="_self">Come sostituire il primo carattere in Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/89813.html" title="Android App Development Tutorial " target="_self">Android App Development Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/96472.html" title="Funzioni matematiche in Visual Basic " target="_self">Funzioni matematiche in Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88144.html" title="Come partizionare e formato in DOS " target="_self">Come partizionare e formato in DOS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88855.html" title="Come scrivere codice informatico " target="_self">Come scrivere codice informatico </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92458.html" title="Come utilizzare le variabili PHP MySQL Query " target="_self">Come utilizzare le variabili PHP MySQL Query </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88037.html" title="Come usare Soluzioni Grafiche di modelli di programmazione lineare " target="_self">Come usare Soluzioni Grafiche di modelli di programmazi…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92487.html" title="Come applicare una funzione a ogni indice in array PHP " target="_self">Come applicare una funzione a ogni indice in array PHP </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="980" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90>
<tr>
<td class=bs height=90 align=middle>Copyright © Conoscenza Informatica http://it.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> 