Dator
 |  Startsida |  Hårdvara |  Nätverk |  Programmering |  Programvara |  Felsökning |  System |   
Programmering
  • C /C + + -programmering
  • Computer Programspråk
  • Delphi Programmering
  • Java Programming
  • JavaScript programmering
  • PHP /MySQL Programmering
  • perl Programmering
  • python Programming
  • Ruby programmering
  • Visual Basics Programmering
    		•
    * Dator Kunskap >> Programmering >> JavaScript programmering >> Content

    Hur man kan expandera ett formulär i Java Script
    Många av dagens blanketter webbsida använder JavaScript för att dynamiskt expandera eller för att bättre möta behoven hos personen med hjälp av formuläret . Till exempel skulle ett formulär för en användare att skriva in information om sina husdjur expandera endast om användaren angav ( via en alternativknapp , till exempel) som hon haft husdjur . Fördelen med att använda JavaScript för att expandera ett formulär är relativt hög säkerhet att manuset kommer att fungera . Denna försäkran resultat från JavaScript utbredd användning i webbläsare , till skillnad från det andra språk som VB Script eller Java . Instruktioner
    1

    Klistra in eller skriv följande formulär webbsida till ett nytt dokument i ett ordbehandlingsprogram .



    " Form expandera exempel " < /title > <br> <p> < /head > <br> <p> <body> <br> <p> <div> <br > <p> <form id="myform" style="display:none" action=""> <br> <p> Förnamn : <input type="text" name="fname" > <br> <p> <P> <p> Efternamn : <input type="text" name="lname" > <br> <p> </form > <br> <p> < /div > <br> <p> <div> <br> <p> < input name = " formButton " type = " knapp " onclick = " ShowHideForm ( ) ; " value = " Visa /Dölj formulär " > <br> <p> < /div > <br> <p> < /body> <br> <p> < /html > <br> <p> Denna webbsida visar en enkel form , där koden i de följande stegen kommer att expandera eller kollapsa när användaren trycker sidans knappen . Den " <input> " taggen visas i noteringen skapar denna knapp , en av vars attribut är " onclick " händelse specificerare . Detta Specifier pekar på JavaScript -kod som kommer att kollapsa eller expandera formuläret . <br> 2 <p> Klistra in följande JavaScript -programmet efter " head " -taggen i dokumentet . <br> <p> < Script typ = " text /JavaScript " > <br> <p> funktion ShowHideForm ( ) { <br> <p> var f = document.getElementById ( " myform " ) ; <br> <p> om ( f.style.display == " inline " ) { <br> <p> f.style.display = "none "; <br> <p> } <br> <p> else { <br> <p> f.style.display = " inline " , <br> <p> } <br> <p> } <br> <p> < /script > <br> <p> " ShowHideForm " -funktionen börjar genom att få en referens till formen , vilket den " getElementById " funktionsanrop ger. Den " f.style.display " uttalande använder som referens , via " f " variabel , för att komma till webbformuläret för " stil " attributet . HTML stilattribut innehåller CSS ( CSS ) koder som utvecklare använder för att positionera och stilisera webbinnehåll . Utvecklare använder CSS " display "-attribut , som i koden just gett , för att ställa in synlighet för ett HTML-element . Ett värde på "none " för detta attribut anger att HTML-element ( t.ex. form) kommer att vara osynlig . <br> 3 <p> Spara dokumentet som " Plain text ", och med vilket filnamn som har a " . htm " eller " . HTML " förlängning , vilket möjliggör visning i en webbläsare . <br> 4 <p> Öppna Utforskaren och navigera till den mapp som innehåller webbsidan . Dubbelklicka på sidan för att öppna den . <br> 5 <p> Klicka på knappen för att växelvis expandera och dra ihop formen . <br> 6 <p> Ersätt , i din ordbehandlare , koden mellan de " <SCRIPT> " taggar med följande kod : <br> <p> funktion ShowHideForm ( ) { <br> <p> var v = document.getElementById ( " opt_in " ) kontrolleras , <br> <p> . var f = document.getElementById ( " myform " ) ; <br> <p> if ( v ) { <br> <p> f.style.display = " inline " , <br> <p> } <br> <p> else { <br> <p> f.style.display = "none "; <br> <p> } <br> <p> } <br> <p> Denna reviderade manuset kommer expandera ett formulär när användaren kontrollerar en kryssruta , där du kan skapa nästa <br> 7 <p> Byt HTML-koden mellan "<body> " taggar med följande nya koden : . <br> <p> <div> <br> <p> <form id="myform" style="display:none" action=""> <br> <p> Förnamn : <input type="text" name="fname" > ; <br> <p> <P> <p> E-postadress : <input type="text" name="email" > <br> <p> </form > <br> <p> < /div > <br> <p> <div> <br> <p> <P> Markera rutan om du vill att vi ska skicka dig mer information om vår produkt . <br> <p> <input type="checkbox" id="opt_in" onchange="ShowHideForm();"> <br> <p> < /div > <br> <p> Denna revidering låter en användare ange att han skulle vilja få mer information om en hypotetisk produkt . <br> 8 <p> Spara ändrade dokument trycker " F5 " i webbläsaren för att uppdatera sidan . Klicka i kryssrutan för att expandera eller komprimera formuläret . <br> <br> <div class=dad2><script language='javascript' src='/ad/201310/4.js'></script></div> <div class=dad3><script language='javascript' src='/ad/201310/33.js'></script></div> </div> </td> </tr> </table> <table class=dhang1 bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <div class=dhang7></div> <table width="92%" height="51" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="50%"><p>Tidigare: <a class='LinkPrevArticle' href='http://www.dator.xyz/Programmering/javascript-programming/91135.html' >Så här aktiverar ASP i IIS 6 </a></li></p></td> </tr> <tr> <td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/javascript-programming/91137.html' >Hur aktiverar jag en JavaScript mycket lättare </a></li></td> </tr> </table></td> </tr> </table> <div class=dhang7></div> <table class=s770x246 > <tr> <td class=s375x246 ><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table class=c1 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> relaterade artiklar </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="http://www.dator.xyz/Programmering/javascript-programming/90990.html" title="Hur infoga element med div i JavaScript " target="_self">Hur infoga element med div i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91067.html" title="Hur man lägger JavaScript kod i ett PHP -fil " target="_self">Hur man lägger JavaScript kod i ett PHP -fil </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90807.html" title="Hur man gör en studsande boll Animation i HTML " target="_self">Hur man gör en studsande boll Animation i HTML </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91107.html" title="Hur att aktivera och inaktivera en Music Bild i JavaScript " target="_self">Hur att aktivera och inaktivera en Music Bild i JavaScr…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90998.html" title="Hur får Browser Width " target="_self">Hur får Browser Width </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91235.html" title="Så här visar XML Med JavaScript " target="_self">Så här visar XML Med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90891.html" title="Hur du gör din egen funktion i jQuery " target="_self">Hur du gör din egen funktion i jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90970.html" title="Så här aktiverar och inaktivera Scrollbars med javascript " target="_self">Så här aktiverar och inaktivera Scrollbars med javasc…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90853.html" title="Hur man klarar Javascript Variabel Coldfusion " target="_self">Hur man klarar Javascript Variabel Coldfusion </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90757.html" title="Vad är händelsestyrd Bubblande " target="_self">Vad är händelsestyrd Bubblande </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 class=c3 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">Utvalda artiklarna </td> </tr> </table> <table class=c4 > <tr> <td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95484.html" title="Hur man laddar en tabell från en CSV- fil med Visual Basic " target="_self">Hur man laddar en tabell från en CSV- fil med Visual B…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/90196.html" title="Hur man skriver ut ett datum i Java " target="_self">Hur man skriver ut ett datum i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87201.html" title="Aktivera knappen Ta bort i DataGridView i winforms " target="_self">Aktivera knappen Ta bort i DataGridView i winforms </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/91856.html" title="Vad är en PHP Argument " target="_self">Vad är en PHP Argument </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/90744.html" title="Hur man sätter in en Java-applet med Dreamweaver " target="_self">Hur man sätter in en Java-applet med Dreamweaver </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85230.html" title="Hur du använder Ctags Med UltraStudio " target="_self">Hur du använder Ctags Med UltraStudio </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88139.html" title="Hur du tar bort alla övergångar på VideoStudio " target="_self">Hur du tar bort alla övergångar på VideoStudio </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95322.html" title="Hur ansluta Visual Basic till SQL " target="_self">Hur ansluta Visual Basic till SQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/90236.html" title="Vilka är de stora skillnaderna mellan Java 1.4 och 1.5 " target="_self">Vilka är de stora skillnaderna mellan Java 1.4 och 1.5…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/88998.html" title="Hur Flip Pixels i Java med getPixel " target="_self">Hur Flip Pixels i Java med getPixel </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div class=dhang8></div> <div class=dhang1></div> <table class=b1> <tr> <td class=bs height=90 align=middle>Copyright © Dator Kunskap http://www.dator.xyz </td> </tr> </table> <div class=dhang1></div> </div> </body> </html>