|
|
|
| Hvordan Utvid et skjema i Java Script |
|
Mange av dagens websideskjemaer bruker JavaScript til dynamisk utvide eller kontrakt å bedre møte behovene til personen ved hjelp av skjemaet . For eksempel vil en form for en bruker å legge inn informasjon om sine kjæledyr utvide bare hvis brukeren angitt (via et alternativ knappen , for eksempel) at hun hadde kjæledyr . Fordelen med å bruke JavaScript for å utvide et skjema er relativt høy sikkerhet for at skriptet vil fungere. Denne forsikringen resultater fra JavaScript er utbredt bruk i nettlesere , i kontrast til andre språk som VB Script eller Java . Instruksjoner en Kopier eller skriv inn følgende nettside skjema inn i et nytt dokument i enhver tekstbehandler .
" Form utvide eksempel " < /title > <br> <p> < /head > <br> <p> <body> <br> <p> <div> <br> <p> <form id="myform" style="display:none" action=""> <br> <p> Fornavn : <input type="text" name="fname" > <br> <p> <P> <br> <p> Etternavn : <input type="text" name="lname" > <br> <p> < /form> <br> < p > < /div > <br> <p> <div> <br> <p> < innspill name = " formButton " type = " button" onclick = " ShowHideForm (); " value = " Utvid /skjul skjema " > <br> <p> < /div > <br> <p> < /body > <br> <p> < /html > <br> <p> Denne nettsiden viser en enkel form, der koden i de følgende trinnene vil vise eller skjule når brukeren trykker på sidens knappen . Den " <input> " tag vises i oppføringen skaper denne knappen , hvor en av attributtene er " onclick " hendelse specifier . Dette Specifier peker til JavaScript-kode som vil skjule eller utvide skjemaet. <br> 2 <p> Lim inn følgende JavaScript-program etter "head "-koden i dokumentet. <br> <p> < Script typen = "text /JavaScript " > <br> <p> funksjon ShowHideForm ( ) { <br> <p> Var f = document.getElementById ( " myform "); <br> <p> if ( f.style.display == " inline ") { <br> <p> f.style.display = "ingen "; <br> <p> } <br> <p> else { <br> <p> f.style.display = " inline "; <br> <p> } <br> <p> } <br> <p> < /script > <br> <p> " ShowHideForm "-funksjonen starter ved å få en referanse til skjemaet , som den " getElementById " funksjon samtale gir. Den " f.style.display " statement bruker som referanse, via " f " variable , for å få tilgang til web-skjema er " style" attributt. HTML stilattributter inneholder gjennomgripende stilark ( CSS) koder som utviklere bruker til å plassere og stilisere webinnhold. Utviklere bruker CSS "display" attributtet , som i koden bare gitt , for å sette synligheten av et HTML-element . En verdi på "ingen" for dette attributtet angir at HTML element ( f.eks form) vil være usynlig . <br> 3 <p> Lagre dokumentet som " Ren tekst ", og med alle filnavn som har en " . htm " eller " . HTML " forlengelse , som gjør visning i en nettleser . <br> 4 <p> Åpne Windows Utforsker og naviger til mappen som inneholder nettsiden. Dobbeltklikk på siden for å åpne den. <br> 5 <p> Klikk på knappen for å vekselvis utvide seg og trekke skjemaet. <br> 6 <p> Erstatt , i tekstbehandlingsprogrammet, koden mellom de " <SCRIPT> " tags med følgende kode : <br> <p> funksjon ShowHideForm ( ) { <br> <p> Var v = document.getElementById ( " opt_in ") sjekket , <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 = "ingen "; <br> <p> } <br> <p> } <br> <p> Denne reviderte skriptet vil utvide et skjema når en bruker sjekker en avmerkingsboks , som du vil lage neste <br> 7 <p> Bytt HTML-koden mellom " <BODY> " tags med følgende nye koden : . <br> <p> <div> <br> <p> <form id="myform" style="display:none" action=""> <br> <p> Fornavn : <input type="text" name="fname" > ; <br> <p> <P> <br> <p> E-postadresse: <input type="text" name="email" > <br> <p> < /form> <br> < p> < /div > <br> <p> <div> <br> <p> <P> Merk denne boksen hvis du vil at vi skal sende deg mer informasjon om produktet vårt. <br> < p > <input type="checkbox" id="opt_in" onchange="ShowHideForm();"> <br> <p> < /div > <br> <p> Denne revisjonen lar brukeren angir han hadde liker å motta mer informasjon om en hypotetisk produkt. <br> 8 <p> Lagre endret dokumentet , og trykk "F5 " i nettleseren for å oppdatere siden . Klikk i boksen for å vise eller skjule skjemaet. <br> <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="745" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ecf0f4">
<tr>
<td bgcolor="#ecf0f4"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="7">
<tr>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="95%" align="center" height="26">
<tr>
<td width="51%"><p>früher ： <a class='LinkPrevArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/91135.html' >Hvordan aktivere ASP i IIS 6 </a></li></p></td>
</tr>
<tr>
<td width="49%"> Weiter： <a class='LinkNextArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/91137.html' >Hvordan aktiverer jeg en JavaScript mye enklere </a></li></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="7">
<tr>
<td></td>
</tr>
</table></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" height=7>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=770 align=center height=246>
<tr>
<td height=246 vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=380>
<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>Relatert Artike</strong></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<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.datamaskin.biz/Programmering/javascript-programming/90886.html" title="Hvordan bruke ShrinkSafe Med NetBeans " target="_self">Hvordan bruke ShrinkSafe Med NetBeans </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91018.html" title="Hvordan få tilgang Element attributter Med JavaScript " target="_self">Hvordan få tilgang Element attributter Med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90783.html" title="Kode beautifiers for JavaScript " target="_self">Kode beautifiers for JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91224.html" title="Hvordan konfigurere Apache for Javascript " target="_self">Hvordan konfigurere Apache for Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91038.html" title="Slik fjerner JavaScript " target="_self">Slik fjerner JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91062.html" title="Hvor å Endre HTML Text med JavaScript Variabler " target="_self">Hvor å Endre HTML Text med JavaScript Variabler </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91088.html" title="Hvordan skrive RFT Scripts i Java " target="_self">Hvordan skrive RFT Scripts i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90917.html" title="Hvordan Alias en funksjon med JavaScript " target="_self">Hvordan Alias en funksjon med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90755.html" title="Hvordan tegne et tre ved hjelp av en magnet på JavaScript " target="_self">Hvordan tegne et tre ved hjelp av en magnet på JavaScr…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90964.html" title="3 - D effekter med JavaScript " target="_self">3 - D effekter med JavaScript </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=20></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=380>
<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>Anbefalte artikler </strong></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<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.datamaskin.biz/Programmering/visual-basics-programming/95814.html" title="Hvordan bruke en MDI Form i VB " target="_self">Hvordan bruke en MDI Form i VB </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/96025.html" title="Hvordan oppdaterer en VBA Query i Access " target="_self">Hvordan oppdaterer en VBA Query i Access </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/computer-programming-languages/86916.html" title="Hva er fordelene med Adobe Cold Fusion " target="_self">Hva er fordelene med Adobe Cold Fusion </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/php-mysql-programming/92664.html" title="Hvordan lage en strekkode Program " target="_self">Hvordan lage en strekkode Program </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/computer-programming-languages/88440.html" title="Hvordan gjenopprette slettede AVI -filer " target="_self">Hvordan gjenopprette slettede AVI -filer </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/89164.html" title="Hjelp Med Grid Bredde i Java " target="_self">Hjelp Med Grid Bredde i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/computer-programming-languages/87194.html" title="Hvordan filtrere data i SSIS " target="_self">Hvordan filtrere data i SSIS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91026.html" title="Slik kjører JavaScript på en webside " target="_self">Slik kjører JavaScript på en webside </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/computer-programming-languages/86538.html" title="Slik deaktiverer en Trusted Handler " target="_self">Slik deaktiverer en Trusted Handler </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/94437.html" title="Hvordan lese og skrive til Notisblokk i Visual Basic " target="_self">Hvordan lese og skrive til Notisblokk i Visual Basic </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 height=8>
<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=center>Copyright © Datamaskin http://www.datamaskin.biz/
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> | | |
