|
|
|
| Come espandere un form in Java Script |
|
Molti dei moduli delle pagine web di oggi usano JavaScript per espandere o contrarre per meglio soddisfare le esigenze della persona utilizzando il modulo in modo dinamico . Ad esempio, un modulo per un utente di inserire le informazioni su i suoi animali si espanderebbe solo se l'utente indicato (tramite un pulsante di opzione , per esempio) che aveva gli animali domestici . Il vantaggio di utilizzare JavaScript per espandere una forma è relativamente alta garanzia che lo script funzionerà . Risultati di questa garanzia da uso diffuso di JavaScript nei browser , a differenza di quella di altri linguaggi come VB Script o Java . Istruzioni 1 incollare o digitare il seguente modulo pagina web in un nuovo documento in qualsiasi word processor .
< Br > "Modulo di espandere esempio " < /title> <br> <p> < /head> <br> <p> <body> <br> <p> <div> <br> <p> <form id="myform" style="display:none" action=""> <br> <p> nome : <input type="text" name="fname" > <br> <p> <br> <p> Cognome : <input type="text" name="lname" > <br> <p> < /form > <br> < p > < /div > <br> <p> <div> <br> <p> < name = ingresso di tipo " formButton " = "button" onclick = " ShowHideForm (); " value = " forma Espandi /Comprimi "> <br> <p> < /div > <br> <p> < /body> <br> <p> < /html > <br> <p> la pagina web viene visualizzata una forma semplice , che il codice nei seguenti passi saranno espandere o comprimere quando l'utente preme il pulsante della pagina . Il tag " <input> " visualizzato nella lista crea questo pulsante , una delle cui caratteristiche è il "onclick " evento specificatore . Ciò indica identificatori al codice JavaScript che comprimere o espandere la forma . <br> 2 <p> Incolla il seguente programma JavaScript dopo il tag "testa" nel documento . <br> <p> < Tipo di script = "text /javascript " > <br> <p> funzione ShowHideForm ( ) { <br> <p> var f = document.getElementById ( " MyForm " ) ; <br> <p> se ( f.style.display == "inline " ) { <br> <p> f.style.display = "none" ; <br> <p> } <br> <p> else { <br> <p> f.style.display = "in linea" ; <br> <p> } <br> <p> } <br> <p> < /script> <br> <p> la funzione " ShowHideForm " inizia da ottenere un riferimento al modulo , che il " getElementById " chiamata di funzione fornisce . L'affermazione " f.style.display " utilizza tale riferimento , tramite la variabile "f" , per accedere attributo " style" del modulo web. Attributi di stile HTML contengono Cascading Style Sheet ( CSS codici ) che gli sviluppatori utilizzano per posizionare e stilizzare i contenuti web . Gli sviluppatori utilizzano l'attributo CSS " visualizzazione " , come nel codice appena dato , per impostare la visibilità di un elemento HTML . Un valore di " nessuno " per questo attributo specifica che l'elemento HTML (ad esempio sotto forma ) sarà invisibile . <br> 3 <p> Salvare il documento come " Testo normale ", e con qualsiasi nome di file che ha una " . htm" o l'estensione " . HTML" , che consente la visualizzazione in un browser. <br> 4 <p> Aprire Esplora risorse e passare alla cartella contenente la pagina web . Fare doppio clic sulla pagina per aprirlo . <br> 5 <p> Fare clic sul pulsante per espandere alternativamente e contrarre la forma . <br> 6 <p> Sostituisci, nel vostro word processor , il codice tra i tag " <SCRIPT> " con il seguente codice : <br> <p> funzione ShowHideForm ( ) { var <br> <p> v = document.getElementById ( " opt_in " ) controllata ; <br> <p> . var f = document.getElementById ( " MyForm " ) ; <br> <p> se (v ) { <br> <p> f.style.display = " inline " ; <br> <p> } <br> < p > else { <br> <p> f.style.display = "none" ; <br> <p> } <br> <p> } <br> <p> Questo script riveduto si espanderà un modulo quando un utente controlla una casella di controllo , che si creerà dopo <br> 7 <p> Sostituire il codice HTML tra i tag " <BODY> " con il seguente nuovo codice : . <br> <p> <div> <br> <p> <form id="myform" style="display:none" action=""> <br> <p> nome : <input type="text" name="fname" > ; <br> <p> <br> <p> indirizzo e-mail: <input type="text" name="email" > <br> <p> < /form > <br> < p > < /div > <br> <p> <div> <br> <p> Selezionare questa casella se si desidera che noi gli trasmettiamo ulteriori informazioni sul nostro prodotto . <br> < p > <input type="checkbox" id="opt_in" onchange="ShowHideForm();"> <br> <p> < /div > <br> <p> Questa revisione permette a un utente indica che aveva Desidero ricevere maggiori informazioni su un prodotto ipotetico . <br> 8 <p> salvare il documento modificato , quindi premere "F5" nel browser per aggiornare la pagina . Fare clic sulla casella di controllo per espandere o comprimere la forma . <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/91135.html' >Come abilitare ASP in IIS 6 </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programmazione/javascript-programming/91137.html' >Come faccio ad attivare un javascript molto più facile </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/91242.html" title="Come creare Google Maps applicazione " target="_self">Come creare Google Maps applicazione </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91163.html" title="JavaScript Tutorial and Reference " target="_self">JavaScript Tutorial and Reference </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91276.html" title="Come aggiungere il pulsante Condividi con Facebook per il tuo sito web " target="_self">Come aggiungere il pulsante Condividi con Facebook per …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91123.html" title="Come controllare per un tipo numerico in Javascript " target="_self">Come controllare per un tipo numerico in Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91042.html" title="Come passare una variabile a JavaScript " target="_self">Come passare una variabile a JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91209.html" title="Come eseguire un orologio su una pagina Web utilizzando Javascript " target="_self">Come eseguire un orologio su una pagina Web utilizzando…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90756.html" title="Come Evidenziare un Tag in iFrame contenuto " target="_self">Come Evidenziare un Tag in iFrame contenuto </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90747.html" title="JavaScript: Apostrophe Problema nella URL " target="_self">JavaScript: Apostrophe Problema nella URL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90798.html" title="Procedura: Modifica e Redirect un URL con Java " target="_self">Procedura: Modifica e Redirect un URL con Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91273.html" title="Cosa è JavaScript usato per " target="_self">Cosa è JavaScript usato per </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/cc-programming/85857.html" title="Come aggiungere decimali in C + + " target="_self">Come aggiungere decimali in C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/perl-programming/93235.html" title="A proposito del Perl Funzione Chr " target="_self">A proposito del Perl Funzione Chr </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/cc-programming/85470.html" title="Come ottenere un valore selezionato da una Listbox in C " target="_self">Come ottenere un valore selezionato da una Listbox in C…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92672.html" title="Come cambiare la password di uno script in PHP " target="_self">Come cambiare la password di uno script in PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/95822.html" title="Come passare i dati da un form in un Access Query " target="_self">Come passare i dati da un form in un Access Query </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91215.html" title="Stili di carattere comuni " target="_self">Stili di carattere comuni </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/95318.html" title="Come utilizzare 2 Form con Visual Basic 6.0 " target="_self">Come utilizzare 2 Form con Visual Basic 6.0 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90832.html" title="Come convertire ColdFusion oggetti in JSON " target="_self">Come convertire ColdFusion oggetti in JSON </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/cc-programming/86116.html" title="Come utilizzare uno switch case con intervalli nei C + + " target="_self">Come utilizzare uno switch case con intervalli nei C + …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/94720.html" title="Tipi di dati in VB6 " target="_self">Tipi di dati in VB6 </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> | | |
