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/Cómo-habilitar-ASP-en-IIS-6-.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/¿Cómo-habilito-el-JavaScript-mucho-más-fácil-.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/Cómo-determinar-si-un-número-se-ajusta-a-un-Int-en-JavaScript-.html">Cómo determinar si un número se ajusta a un Int en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-conseguir-un-atributo-de-JavaScript-.html">Cómo conseguir un atributo de JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-obtener-el-ID-de-un-objeto-en-jQuery-.html">Cómo obtener el ID de un objeto en jQuery </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-calcular-un-total-movimiento-en-JavaScript-.html">Cómo calcular un total movimiento en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-una-animación-3D-Logo-en-Javascript-.html">Cómo crear una animación 3D Logo en Javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-detectar-el-sistema-operativo-con-JavaScript-.html">Cómo detectar el sistema operativo con JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-ocultar-los-DIVs-Open-in-JavaScript-.html">Cómo ocultar los DIVs Open in JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-que-todos-los-botones-de-radio-Falso-en-JavaScript-.html">Cómo hacer que todos los botones de radio Falso en JavaScript </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/Como-Llamar-JavaScript-partir-de-una-plantilla-HTML-.html" >Como Llamar JavaScript partir de una plantilla HTML </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-habilitar-y-deshabilitar-los-cuadros-de-texto-en-Javascript-.html" >Cómo habilitar y deshabilitar los cuadros de texto en Javascript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-Java-Script-en-Flash-8-.html" >Cómo utilizar Java Script en Flash 8 </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-la-clase-de-estilo-con-JavaScript-.html" >Cómo cambiar la clase de estilo con JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-una-presentación-de-diapositivas-Javascript-.html" >Cómo hacer una presentación de diapositivas Javascript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-obtener-el-ID-de-un-objeto-en-jQuery-.html" >Cómo obtener el ID de un objeto en jQuery </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/Cómo-eliminar-un-subdominio-en-JavaScript-.html" >Cómo eliminar un subdominio en JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-agregar-un-botón-blog-con-cuadro-de-texto-debajo-de-Código-.html" >Cómo agregar un botón blog con cuadro de texto debajo de Código </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-instalar-el-Java-Script-en-un-PC-.html" >Cómo instalar el Java Script en un PC </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-un-Google-Map-Overlay-.html" >Cómo hacer un Google Map Overlay </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-obtener-las-compensaciones-de-desplazamiento-en-JavaScript-.html" >Cómo obtener las compensaciones de desplazamiento en JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-agregar-Float-con-JavaScript-.html" >Cómo agregar Float con JavaScript </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>Conocimientos Informáticos © http://www.ordenador.online</div>
</div>
</body>
</html> 