Molti dei moduli delle pagine web di oggi utilizzare JavaScript per dinamicamente espandere o contrarre per meglio soddisfare le esigenze della persona che utilizza il modulo. Ad esempio, un modulo per un utente di immettere informazioni sui suoi animali domestici espanderà solo se l'utente indicato (tramite un pulsante di opzione, per esempio) che ha avuta gli animali domestici. Il vantaggio di usare JavaScript per espandere una forma è garanzia relativamente elevata che lo script funzionerà. Questa certezza deriva dall'uso diffuso di JavaScript nel browser, in contrasto con quella di altre lingue come VB Script o Java.
Istruzioni
1
Incollare o digitare il seguente modulo di pagina web in un nuovo documento in qualsiasi word processor.
< html >
< head >
< title > "Modulo espandere esempio" < / title >
< / head >
< corpo >
< div >
< id modulo = "myform" style = "display: none" azione = "" >
Nome: < input type = "testo" nome = "fname" >
< P >
Cognome: < input type = "text" name = "lname" >
< / form >
< / div >
< div >
< nome input = "formButton" type = "button" onclick="ShowHideForm();" valore = "Espandi/Comprimi form" >
< / div >
< / body >
< / html >
Questa pagina web Visualizza una forma semplice, che il codice nei passaggi seguenti verrà espandere o comprimere quando l'utente preme il pulsante della pagina. Il tag "< input >" visualizzato nell'elenco Crea questo pulsante, uno dei cui attributi è l'identificatore di evento "onclick". Questo identificatore indica il codice JavaScript che verrà comprimere o espandere il modulo.
2
Incollare il seguente programma JavaScript dopo il tag "head" del documento.
< script type = "text/JavaScript" >
Function ShowHideForm () {
var f = document.getElementById("myform");
Se (f.style.display=="inline") {
f.Style.display="None";
}
else {
f.Style.display="inline";
}
}
< / script >
La funzione di "ShowHideForm" inizia da ottenere un riferimento al form, che prevede la chiamata di funzione "getElementById". L'istruzione a "f.style.display" utilizza questo riferimento, tramite la variabile "f", per accedere attributo di "stile" del web form. Gli attributi di stile HTML contengono codici di (CSS) del foglio stile CSS utilizzati dagli sviluppatori per posizionare e stilizzare il contenuto web. Gli sviluppatori utilizzano l'attributo CSS "display", come il codice appena dato, per impostare la visibilità di un elemento HTML. Il valore "none" per questo attributo specifica che l'elemento HTML (ad es. modulo) sarà invisibile.
3
Salvare il documento come "Testo normale" e con qualsiasi nome di file che ha un ". htm" o ". Estensione di HTML", che consente di visualizzare in un browser.
4
Aprire Esplora risorse e passare alla cartella contenente la pagina web. Doppio clic sulla pagina per aprirlo.
5
Fare clic sul pulsante per alternativamente si espandono e contraggono la forma.
6
Sostituire, nel vostro word processor, il codice tra i tag "< SCRIPT >" con il seguente codice:
Function ShowHideForm () {
v var = document.getElementById("opt_in").checked;
var f = document.getElementById("myform");
Se (v) {
f.Style.display="inline";
}
else {
f.Style.display="None";
}
}
Questo script modificato si espanderà un modulo quando un utente archivia una casella di controllo, che ti consente di creare successivamente.
7
Sostituire il codice HTML tra i tag "< BODY >" con il seguente nuovo codice:
< div >
< id modulo = "myform" style = "display: none" azione = "" >
Nome: < input type = "testo" nome = "fname" >
< P >
Indirizzo email: < input type = "testo" nome = "e-mail" >
< / form >
< / div >
< div >
< P > selezionare questa casella se desideri ricevere ulteriori informazioni sul nostro prodotto.
< input type = "checkbox" id = "opt_in" onchange="ShowHideForm();" >
< / div >
Questa revisione consente di indicare che vorrebbe ricevere maggiori informazioni su un ipotetico prodotto.
8
Salvare il documento modificato, quindi premere "F5" nel browser per aggiornare la pagina. Fare clic sulla casella per espandere o comprimere la forma.