|
|
|
| Cómo Abrir un formulario en Java Script |
|
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 .
< Br > "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=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Previous ： <a class='LinkPrevArticle' href='/Programacion/javascript-programming/91135.html' >Cómo habilitar ASP en IIS 6 </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/javascript-programming/91137.html' >¿Cómo habilito el JavaScript mucho más fácil </a></li></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Artículos relacionados </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="/Programacion/javascript-programming/91038.html" title="Cómo quitar JavaScript " target="_self">Cómo quitar JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91131.html" title="Cómo agregar Float con JavaScript " target="_self">Cómo agregar Float con JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90915.html" title="Cómo usar JavaScript para crear un Prime Factor Número " target="_self">Cómo usar JavaScript para crear un Prime Factor Númer…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91194.html" title="Cómo comprobar los enteros en JavaScript " target="_self">Cómo comprobar los enteros en JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90977.html" title="Cómo obtener valores int en jQuery " target="_self">Cómo obtener valores int en jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90758.html" title="Cómo hacer un gráfico con jQuery " target="_self">Cómo hacer un gráfico con jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90774.html" title="Funciones de devolución de llamada de JavaScript : isFunction " target="_self">Funciones de devolución de llamada de JavaScript : isF…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91174.html" title="Tutorial de Javascript efectos de fondo " target="_self">Tutorial de Javascript efectos de fondo </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91150.html" title="Cómo implementar un Destructor básico en JavaScript " target="_self">Cómo implementar un Destructor básico en JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90842.html" title="JavaScript: redirección a la página " target="_self">JavaScript: redirección a la página </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 width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Artículos destacados </td> </tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/88367.html" title="Cómo crear un programa que mostrará un calendario " target="_self">Cómo crear un programa que mostrará un calendario </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/96032.html" title="Cómo utilizar VBA para leer un documento de Microsoft Word " target="_self">Cómo utilizar VBA para leer un documento de Microsoft …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/94675.html" title="Cómo utilizar una ventana Inmediato en Vb.Net " target="_self">Cómo utilizar una ventana Inmediato en Vb.Net </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/96131.html" title="VBA Búsqueda y sustitución Word " target="_self">VBA Búsqueda y sustitución Word </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/92888.html" title="Cómo validar una dirección de correo electrónico mediante PHP " target="_self">Cómo validar una dirección de correo electrónico med…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/92303.html" title="Cómo va a salir JavaScript con PHP " target="_self">Cómo va a salir JavaScript con PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/91389.html" title="¿Cómo subir Image PHP y Maquillaje Inserta Miniatura de MySQL Registro " target="_self">¿Cómo subir Image PHP y Maquillaje Inserta Miniatura …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/computer-programming-languages/86902.html" title="Cómo extraer una base de datos JPA " target="_self">Cómo extraer una base de datos JPA </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90956.html" title="Cómo devolver Funciones adicionales para múltiples números de JavaScript " target="_self">Cómo devolver Funciones adicionales para múltiples nú…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/94325.html" title="Teoría VBA Programación " target="_self">Teoría VBA Programación </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="980" height="8" border="0" cellpadding="0" cellspacing="0">
<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=middle>Copyright © Conocimientos Informáticos http://ordenador.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html>
| | |
