Muchos de los formularios de páginas web de hoy en día el uso de JavaScript para expandir o contraer dinámicamente para satisfacer mejor las necesidades de la persona que utiliza el formulario. Por ejemplo , una forma para que el usuario introduzca información sobre sus mascotas se expandiría sólo si el usuario indicado (a través de un botón de opción , por ejemplo) que no tenía mascotas. La ventaja de utilizar JavaScript para expandir una forma es relativamente alta seguridad de que la secuencia de comandos funcionará . Esto da garantía de amplio uso de JavaScript en los navegadores , en contraste con la de otros lenguajes como VB Script o Java . Instrucciones
1
Pega o escribe el siguiente formulario de una página web en un nuevo documento en cualquier procesador de textos .
"Formulario ampliar ejemplo " < /title > <br> <p> < /head> <br> <p> <body> <br> <p> <div> <br> <p> <form id="myform" style="display:none" action=""> <br> <p> nombre: <input type="text" name="fname" > <br> <p> <br> <p> Apellido : <input type="text" name="lname" > <br> <p> < /form> <br> < p > < /div > <br> <p> <div> <br> <p> < nombre de entrada type = " formButton " = "button" onclick = " ShowHideForm (); " value = " forma Expandir /Contraer "> <br> <p> < /div > <br> <p> < /body> <br> <p> < /html > <br> <p> Esta página web muestra una forma simple, que el código en los pasos siguientes se despliegue o se pliegue cuando el usuario pulsa el botón de la página. La etiqueta de " <input> " que aparece en el listado crea este botón , una de cuyas características es el " onclick " evento especificador . Esta especificación puntos en el código JavaScript que contraer o expandir la forma . <br> 2 <p> Pega el siguiente programa de JavaScript después de la "cabeza" de etiqueta en el documento. <br> <p> < Script type = " text /javascript "> <br> <p> ShowHideForm función () { <br> <p> var f = document.getElementById ( " myform "); <br> <p> if ( f.style.display == "inline ") { <br> <p> f.style.display = "none " ; <br> <p> <br> <p> } else { <br> <p> f.style.display = "en línea" ; <br> <p> } <br> <p> <br> <p> } < /script > <br> <p> la función " ShowHideForm " comienza por obtener una referencia a la forma, que el " getElementById " llamada de función proporciona . La declaración " f.style.display " utiliza esa referencia, a través de la variable " f" , para acceder atributo "style " del formulario web. Atributos de estilo en cascada HTML contienen códigos hoja de estilo ( CSS ) que los desarrolladores utilizan para colocar y estilizar contenido web. Los desarrolladores utilizan el atributo "display" CSS, como en el código que acabamos de dar , para establecer la visibilidad de un elemento HTML. Un valor de " none" para este atributo especifica que el elemento HTML ( por ejemplo, forma ) será invisible. <br> 3 <p> Guardar el documento como " Texto sin formato ", y con cualquier nombre de archivo que tiene a ". htm" o la extensión " . HTML" , que permite la visualización en un navegador. <br> 4 <p> Abra Windows Explorer y vaya a la carpeta que contiene la página web. Haga doble clic en la página para abrirlo. <br> 5 <p> clic en el botón para expandir y contraer alternativamente el formulario. <br> 6 <p> Reemplazar, en el procesador de textos , el código entre las etiquetas " <SCRIPT> " con el siguiente código : <br> función <p> ShowHideForm () { var <br> <p> v = document.getElementById ( " opt_in " ) verificó ; <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> guión revisado ampliará un formulario cuando un usuario comprueba una casilla de verificación , que se creará a continuación <br> 7 <p> Reemplace el código HTML entre las etiquetas " <BODY> " con el nuevo código siguiente : . <br> <p> <div> <br> <p> <form id="myform" style="display:none" action=""> <br> <p> nombre: <input type="text" name="fname" > ; <br> <p> <br> <p> dirección de correo electrónico : <input type="text" name="email" > <br> <p> < /form> <br> < p> < /div > <br> <p> <div> <br> <p> Marque esta casilla si desea que le enviemos más información sobre nuestro producto . <br> < p > <input type="checkbox" id="opt_in" onchange="ShowHideForm();"> <br> <p> < /div > <br> <p> Esta revisión permite al usuario indicar que había quieres recibir más información sobre un producto hipotético. <br> 8 <p> Guarde el documento modificado , a continuación, pulse la tecla "F5 " en el explorador para actualizar la página. Haga clic en la casilla de verificación para expandir o contraer la forma . <br> <br>
<div class="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div>
</div>
<div class=contentpage>
<div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/91135.html' >Cómo habilitar ASP en IIS 6 </a> </div>
<div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/91137.html' >¿Cómo habilito el JavaScript mucho más fácil </a> </div>
</div>
<dl class=xgc>
<dt><span>JavaScript Programación</span></dt>
<dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90903.html">Cómo deshabilitar JavaScript durante el uso de selenio </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90950.html">Cómo cambiar un índice desplegable en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90964.html">Efectos 3 -D con JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91180.html">JavaScript Tutorial para la función de validación Tiempo </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91025.html">Cómo cambiar el color de fondo de una fila en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90840.html">Cómo depurar JavaScript en Eclipse </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90949.html">Cómo actualizar DIV </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90817.html">Cómo cambiar el marcador en un API de Google Maps </a></dd>
</dl>
</div>
<!--right-->
<div class=rightmain>
<div class=esrightlist>
<div class=e1>Los últimos artículos de equipo</div>
<ul>
<li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91249.html" >Cómo hacer un curriculum vitae con el Programa de JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91279.html" >Cómo instalar scripts para Greasemonkey </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91068.html" >Cómo comprobar si una propiedad de objeto existe en JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91015.html" >Cómo utilizar Ambos SRC y en línea en JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/263190.html" >¿Cómo agregar JavaScript en el sitio Weebly? </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91202.html" >Cómo establecer el tamaño de una imagen en HTML </a> </li>
</ul>
</div>
<div class=esrightlist>
<div class=e1>Artículos de la popular computadora</div>
<ul>
<li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90834.html" >Cómo utilizar un Resig MicroTemplate </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91058.html" >Cómo actualizar los cookies Via JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91165.html" >Nivel Intermedio Tutorial Javascript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90756.html" >Cómo resaltar una etiqueta en iFrame Contenido </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/91030.html" >Cómo configurar un VAR JavaScript para Flotador </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/90870.html" >Cómo insertar CrawlTrack en WordPress </a></li>
</ul>
</div>
<div class="esrightad">
<script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script>
</div>
<div class=esrightlist>
<div class=e1>Más categorías</div>
<ul>
<li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li>
<li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li>
<li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li>
</ul>
</div>
</div>
<!--right end-->
<div class="cl"></div>
</div>
<div class=esfoot>
<div class=copy>Conocimiento de la computadora © http://www.ordenador.online</div>
</div>
</body>
</html> 