Veel van de huidige webpagina formulieren gebruiken JavaScript om dynamisch vergroten of om beter aan de behoeften van de persoon met behulp van het formulier . Bijvoorbeeld , zou een vorm voor een gebruiker om informatie over haar huisdieren treedt pas uitbreiden als de gebruiker aangegeven ( via een keuzerondje bijvoorbeeld ) dat ze huisdieren . Het voordeel van het gebruik van JavaScript om een formulier te breiden is relatief hoog zekerheid dat het script zal werken . Deze zekerheid resultaten van JavaScript is wijdverspreid gebruik in browsers , in tegenstelling tot die van andere talen zoals VB Script of Java . Instructies
1 Plak of typ de volgende webpagina vorm in een nieuw document in een tekstverwerker .
< Br > "Form breiden bijvoorbeeld " < /title > <br> <p> < /head > <p> <body> <br> <p> <br> <div> < br <p> <form id="myform" style="display:none" action=""> <p> Voornaam > <br> : <input type="text" name="fname" > <p> <P> <p> Achternaam <br> : <input type="text" > <br> <p> < /form > <br> <p name="lname" > < /div > <p> <div> <br> <p> < naaminvoer = " formButton " type = " button " onclick = " ShowHideForm ( ) ; " <br> value = " Toon /Verberg formulier " > <br> <p> < /div > <p> < /body > Telefoonkaarten <p> < /html > <br> <p> Deze webpagina toont een eenvoudige vorm , die de code in de volgende stappen zal uitbreiden of samenvouwen wanneer de knop van de pagina 's de gebruiker op . De " <input> " tag weergegeven in de lijst zorgt deze knop , waarvan een van de kenmerken is de " onclick " event specificatie . Dit specifier wijst op de JavaScript- code die de vorm zal instorten of uitbreiden . Kopen van 2 <p> Plak volgende JavaScript -programma na de " hoofd " -tag in het document . <br> <p> < Script soort = " text /JavaScript " > <p> functie ShowHideForm <br> ( ) { <br> <p> var f = document.getElementById ( " mijnform " ) ; <br> <p> if ( f.style.display == " inline " ) { <p> f.style.display <br> = " none " ; <br> <p> } <br> <p> else { <p> f.style.display <br> = " inline " ; <br> <p> } <p> } <br> <p> < /script > <br> <p> de functie " ShowHideForm " begint met het krijgen van een verwijzing naar de vorm, die <br> de " getElementById " functie aanroep levert . De " f.style.display " statement gebruikt die verwijzen , via de variabele " f" , om toegang te krijgen attribuut het webformulier de "stijl " . HTML stijlkenmerken bevatten cascading style sheet ( CSS ) codes die ontwikkelaars gebruiken voor het positioneren en stileren webcontent . Ontwikkelaars gebruiken de attribuut CSS " scherm " , zoals in de code gewoon gegeven , om de zichtbaarheid van een HTML -element ingesteld . Een waarde van " niets " voor dit kenmerk geeft aan dat de HTML-element (bijv. vorm ) onzichtbaar zal zijn . <br> 3 <p> Sla het document als " Plain text , " en bij elke bestandsnaam die moet a ' . htm "of" HTML . " extensie , die display maakt in een browser . <br> 4 <p> Open Windows Verkenner en navigeer naar de map met de webpagina . Dubbelklik op de pagina om deze te openen . <br> 5 <p> Klik op de knop om afwisselend uitzetten en krimpen van het formulier . <br> <p> Vervangen , in uw tekstverwerker , de code tussen 6 de " <SCRIPT> " tags met de volgende code : <p> functie ShowHideForm <br> ( ) { <br> <p> var v = document.getElementById ( " opt_in " ) gecontroleerd ; <br> <p> . var f = document.getElementById ( " mijnform " ) ; <br> <p> if ( v ) { <p> f.style.display <br> = " inline " ; <br> <p> } <br> <p > else { <p> f.style.display <br> = " none " ; <br> <p> } <br> <p> } <br> <p> Deze herziene script zal een formulier uit te breiden wanneer een gebruiker controleert een checkbox , waar u de volgende keer gaat maken <br> 7 <p> Vervang de HTML-code tussen de " <BODY> " tags met de volgende nieuwe code : . <p> <div> <br> <p> <form id="myform" style="display:none" action=""> <p> Voornaam <br> : <input type="text" name="fname" > ; <p> <P> p E-mail adres <br> : <input type="text" > <br> <p> < /form > <br> name="email" <p > < /div > <p> <div> <p> <P> <br> Schakel dit vakje in als u wilt dat wij u meer informatie over onze producten te sturen . <br> <p > <input type="checkbox" id="opt_in" onchange="ShowHideForm();"> <br> <p> < /div > <br> <p> Deze herziening laat een gebruiker aangeven dat hij zou graag meer informatie over een hypothetische product wilt ontvangen . <br> 8 <p> Sla het gewijzigde document , druk daarna op " F5 " in de browser om de pagina bij te werken . Klik op het selectievakje om het formulier uit-of samenvouwen . <br> <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/javascript-programming/201309/91135.html' >Hoe te ASP inschakelen in IIS 6 </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/javascript-programming/201309/91137.html' >Hoe activeer ik een webbrowser veel gemakkelijker ? </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>JavaScript Programmeren</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91216.html" title="Hoe te Lettertype wijzigen Kleuren Met Javascript " target="_self">Hoe te Lettertype wijzigen Kle…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90805.html" title="Hoe te gebruiken Code DBL " target="_self">Hoe te gebruiken Code DBL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90993.html" title="Hoe maak je een ruimte verwijderen van een variabele in de JavaScript-methode " target="_self">Hoe maak je een ruimte verwijd…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90992.html" title="Hoe maak je een DIV Zichtbaar met een Scroll in JavaScript maken " target="_self">Hoe maak je een DIV Zichtbaar …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91068.html" title="Hoe om te controleren Als een Object Property Bestaat in JavaScript " target="_self">Hoe om te controleren Als een …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91089.html" title="Hoe te Turn on JavaScript voor een UTStarcom CDM - 7126 " target="_self">Hoe te Turn on JavaScript voor…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91222.html" title="Hoe kan ik een afbeelding zoeken op een website te maken " target="_self">Hoe kan ik een afbeelding zoek…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90763.html" title="Hoe kan ik meerdere plugins gebruiken Met JW Player " target="_self">Hoe kan ik meerdere plugins ge…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90782.html" title="Combinatie van JavaScript Sneltoetsen " target="_self">Combinatie van JavaScript Snel…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88147.html" title="Wat is een Proxy Class ? " target="_self">Wat is een Proxy Class ? </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/perl-programming/201309/93276.html" title="Hoe om te controleren of er een geldige datum in Perl " target="_self">Hoe om te controleren of er een geldige …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88494.html" title="Tutorial voor Microsoft Visual Studio " target="_self">Tutorial voor Microsoft Visual Studio </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/94393.html" title="Hoe kan ik een XML- Merge Into Crystal Reports " target="_self">Hoe kan ik een XML- Merge Into Crystal R…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88735.html" title="Hoe maak XSD " target="_self">Hoe maak XSD </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95507.html" title="Hoe te Gecodeerde VBS Script Creëren " target="_self">Hoe te Gecodeerde VBS Script Creëren </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95121.html" title="Hoe de Dir -functie in VBA Gebruik " target="_self">Hoe de Dir -functie in VBA Gebruik </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89587.html" title="Hoe maak je een Android Game Installeer Via een PC met APK " target="_self">Hoe maak je een Android Game Installeer …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/python-programming/201309/93481.html" title="Hoe de module CV in OpenCV Krijg voor Python " target="_self">Hoe de module CV in OpenCV Krijg voor Py…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
