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 .
"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>
<ul class="mhjkhjlj">
<li> <a class='LinkPrevArticle' href='/Programmazione/Programmazione-Javascript/1182270.html' >Come abilitare ASP in IIS 6 </a></li>
<li> <a class='LinkNextArticle' href='/Programmazione/Programmazione-Javascript/1182274.html' >Come faccio ad attivare un javascript molto più facile </a></li>
</ul>
<div class="deep">
<div class="guanggadsadswqew"><script language='javascript' src='http://www.354353.com/AD/it3.js'></script></div>
<div class="guanggadsadswqew1"></div>
</div>
<div class="xiangguanleitong">
<div class="vbfdghgjt65f"><h4>Informazioni correlate</h4></div>
<ul>
<li><a href="/Programmazione/PHP--MySQL-Programmazione/1185090.html" target="_blank">Come iniziare una applicazione Google Maps con PHP </a></li><li><a href="/Programmazione/C--C-----Programming/1171852.html" target="_blank">Come fare il tuo gioco PSP </a></li><li><a href="/Programmazione/PHP--MySQL-Programmazione/1185690.html" target="_blank">Come estrarre un indirizzo email sul PHP </a></li><li><a href="/Programmazione/Nozioni-di-base-di-Visual-Programming/1190244.html" target="_blank">Il codice per ottenere un numero di elementi in un controllo ListBox in Visual Basic </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181530.html" target="_blank">Cosa posso usare al posto delle Javascript </a></li><li><a href="/Programmazione/Nozioni-di-base-di-Visual-Programming/1191540.html" target="_blank">Modalità di accesso a VBA Copia query da un altro database </a></li><li><a href="/Programmazione/Computer-Programming-Languages/1173868.html" target="_blank">Come convertire un poligono di un percorso </a></li><li><a href="/Programmazione/Nozioni-di-base-di-Visual-Programming/1188890.html" target="_blank">Come convertire ActiveX per Vb.NET & Vice Versa </a></li>
</ul>
</div>
</div>
</div>
<div class="woshiyouleirog">
<div class="zxtjianasd">
<div class="bidssdfjm3"><h4>Articoli consigliati</h4></div>
<div class="dasdcdfurit33">
<ul>
<li><a href="/Programmazione/Programmazione-Javascript/1181732.html" target="_blank">Come dividere un URL lungo in 2 </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181980.html" target="_blank">Come inserire elementi con DIV in Javascript </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182208.html" target="_blank">Come usare NetBeans per eseguire il debug di MATLAB </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181704.html" target="_blank">Come Fade Out Quando Rilasciare una pagina in JQuery </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182246.html" target="_blank">Come controllare per un tipo numerico in Javascript </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182018.html" target="_blank">Come visualizzare le Ore e Minuti in due campi con Javascript </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182038.html" target="_blank">Come inviare una funzione JavaScript in un collegamento ipertestuale </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182566.html" target="_blank">Come fare un Javascript Presentazione </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181712.html" target="_blank">Spiegazione di arrotondamento e troncamento in Javascript </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182568.html" target="_blank">Come creare effetti speciali per il tuo sito - anche se non possibile scrivere codice </a></li>
</ul>
</div>
</div>
<div class="guanggandgsa32a"> </div>
<div class="huosirengs">
<li><a class='childclass' href='/Programmazione/C--C-----Programming/' target="_self">C /C + + Programming</a></li> <li><a class='childclass' href='/Programmazione/Computer-Programming-Languages/' target="_self">Computer Programming Languages</a></li> <li><a class='childclass' href='/Programmazione/Delphi-Programming/' target="_self">Delphi Programming</a></li> <li><a class='childclass' href='/Programmazione/Java-Programming/' target="_self">Java Programming</a></li> <li><a class='childclass' href='/Programmazione/Programmazione-Javascript/' target="_self">Programmazione Javascript</a></li> <li><a class='childclass' href='/Programmazione/PHP--MySQL-Programmazione/' target="_self">PHP /MySQL Programmazione</a></li> <li><a class='childclass' href='/Programmazione/Perl-Programming/' target="_self">Perl Programming</a></li> <li><a class='childclass' href='/Programmazione/Python-Programming/' target="_self">Python Programming</a></li> <li><a class='childclass' href='/Programmazione/rubino-Programmazione/' target="_self">rubino Programmazione</a></li> <li><a class='childclass' href='/Programmazione/Nozioni-di-base-di-Visual-Programming/' target="_self">Nozioni di base di Visual Programming</a></li>
</div>
</div>
</div>
<div class="dsadsafa-da">
<p class="sdqwfwe42"> </p>
<p class="vbnhg654">Programmazione © www.354353.com</p>
<p class="iop8iud"> </p>
</div>
</div>
</body>
</html>