2.7 Formularios
Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas: <form> y <input>.
Formulario sencillo definido con las etiquetas form e input
El código HTML necesario para definir el formulario anterior se muestra a continuación:
<html>
<head><title>Ejemplo de formulario sencillo</title></head>
<body>
<h3>Formulario muy sencillo</h3>
<form action="http://www.librosweb.es/maneja_formulario.php" method="post">
Escribe tu nombre:
<input type="text" name="nombre" value="" />
<br/>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
La etiqueta <form> encierra todos los contenidos del formulario (botones, cuadros de texto, listas desplegables) y la etiqueta <input> permite definir varios tipos diferentes de elementos (botones y cuadros de texto).
HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar los contenidos de los documentos y páginas web. Sin embargo, HTML también incluye elementos para participar en el desarrollo de aplicaciones web. El estándar HTML/XHTML permite crear formularios para que los usuarios interactúen con las aplicaciones web. Los formularios son posiblemente la herramienta más utilizada en Internet para obtener datos e información acerca de la gente que navega por nuestro sitio. La idea de los formularios es recolectar información online en la interacción con el usuario y luego ejecutar una determinada acción (action=””) con la misma.
Cinco son solamente las etiquetas que el código HTML posee para definir todos los elementos interactivos que un formulario puede presentar:
, ,,
y
. Estas etiquetas, junto a un número de modificadores o atributos, son suficientes para indicarle al navegador cliente cómo debe recoger la información, cómo debe manejarla una vez recolectada y cómo debe interactuar con el servidor.</p>
<p style=”text-align:center;”><strong>Hacer un formulario sencillo</strong></p>
<p>Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas:<br />
<form><p> y <input>.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo3.JPG” alt=”Indice Unidad 8″ /></p>
<p>La etiqueta<br />
<form><p> encierra todos los contenidos del formulario (botones, cuadros de texto, listas desplegables) y la etiqueta <input> permite definir varios tipos diferentes de elementos (botones y cuadros de texto).</p>
<p><img src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo4.JPG” alt=”Indice Unidad 8″ /></p>
<p>La mayoría de formularios utilizan sólo los atributos action y method. El atributo action indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el navegador.</p>
<p>El atributo method establece la forma en la que se envían los datos del formulario al servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los formularios incluyen el atributo method=”get” o el atributo method=”post”.</p>
<p>El método POST permite el envío de mucha más información que el método GET. En general, el método GET admite como máximo el envío de unos 500 bytes de información. La otra gran limitación del método GET es que no permite el envío de archivos adjuntos con el formulario. Además, los datos enviados mediante GET se ven en la barra de direcciones del navegador (se añaden al final de la URL de la página), mientras que los datos enviados mediante POST no se pueden ver tan fácilmente</p>
<p style=”text-align:center;”><strong>Elementos de formulario</strong></p>
<p style=”text-align:center;”><img src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo5.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Cuadro de Texto</strong></p>
<p>El atributo name es el más importante en los campos del formulario..De hecho, si un campo no incluye el atributo name, sus datos no se envían al servidor. El valor que se indica en el atributo name es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo de formulario. Cuando el usuario pulsa el botón de envío del formulario, el navegador envía los datos a una aplicación del servidor para que procese la información y genere una respuesta adecuada.</p>
<p>El atributo value se emplea para establecer el valor inicial del cuadro de texto. Si se crea un formulario para insertar datos, los cuadros de texto deberían estar vacíos. Por lo tanto, o no se añade el atributo value o se incluye con un valor vacío value=””. Si por el contrario se crea un formulario para modificar datos, lo lógico es que se muestren inicialmente los datos guardados en el sistema. En este caso, el atributo value incluirá el valor que se desea mostrar: <input type=”text” name=”nombre” value=”Juan Pérez” /></p>
<p><img class=” aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo6.JPG” alt=”Indice Unidad 8″ /></p>
<p>Si no se especifica un tamaño, el navegador muestra el cuadro de texto con un tamaño predeterminado. El atributo size permite establecer el tamaño, en caracteres, con el que se muestra el cuadro de texto. Su uso es imprescindible en muchos formularios, en los que algunos campos como la dirección deben mostrar más caracteres de lo normal (<input size=”100″ …) y otros campos como el código postal deben mostrar menos caracteres de lo normal (<input size=”5″…).</p>
<p>Además de controlar el tamaño con el que se muestra un cuadro de texto, también se puede limitar el tamaño del texto introducido. El atributo maxlength permite establecer el máximo número de caracteres que el usuario puede introducir en un cuadro de texto. Su uso es imprescindible para campos como el código postal, el número de la Seguridad Social y cualquier otro dato con formato predefinido y limitado.</p>
<p>Por último, el atributo readonly permite que el usuario pueda ver los contenidos del cuadro de texto pero no pueda modificarlos y el atributo disabled deshabilita un cuadro de texto de forma que el usuario no pueda modificarlo y además, el navegador no envía sus datos al servidor.</p>
<p style=”text-align:center;”>
<strong>Campo Contraseña</strong></p>
<p>La única diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles.</p>
<p></p>
<p><img class=” aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo7.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Checkbox</strong></p>
<p>La única diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo8.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Radio</strong></p>
<p>Los controles de tipo radio son similares a los controles de tipo checkbox, pero presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton se utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones relacionadas que se le presentan. Cada vez que se selecciona una opción, automáticamente se deselecciona la otra opción que estaba seleccionaba.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo9.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Botón envío / reseteo del formulario</strong></p>
<p style=”text-align:center;”><img src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo10.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Ficheros Adjuntos</strong></p>
<p>Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque desde el punto de vista de HTML y del navegador no existe ninguna limitación sobre el número, tipo o tamaño total de los archivos que se pueden adjuntar, todos los servidores añaden restricciones por motivos de seguridad.</p>
<p><img class=” aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo11.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Campos ocultos y botón imagen</strong></p>
<p>Los campos ocultos se emplean para añadir información oculta en el formulario:</p>
<p><input type=”hidden” name=”login” value=”user1″ /></p>
<p><input type=”image” name=”enviar” src=”apple-logo.jpg” height=”30″ width=”30″ /></p>
<p>Pulsar el botón provoca el mismo efecto que si el botón fuera de type=”submit”.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo12.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Botón</strong></p>
<p>Algunos formularios complejos necesitan botones más avanzados que los de enviar datos (type=”submit”) y resetear el formulario (type=”reset”). Por ese motivo, el estándar HTML/XHTML define un botón de tipo genérico.</p>
<p><input type=”button” name=”mostrar” value=”Mostrar” onclick=”funcion_javascript(document.getElementById(‘nombre’).value)”/></p>
<p><script language=”javascript”> function funcion_javascript(f) { alert(document.getElementById(‘nombre’).value); alert(f); } </script></p>
<p>Este tipo de botones sólo son útiles si se utilizan junto con el lenguaje de programación JavaScript. Si la página incluye código JavaScript, los botones de este tipo se pueden programar para que realicen cualquier tarea compleja cuando se pulsa sobre ellos.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo13.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Formularios avanzados</strong></p>
<p>HTML define algunos elementos adicionales para mejorar la estructura de los formularios creados.</p>
<p>La etiqueta<br />
<fieldset> agrupa todos los controles de formulario a los que encierra. El navegador muestra por defecto un borde resaltado para cada agrupación. La etiqueta<br />
<legend> se incluye dentro de cada etiqueta<br />
<fieldset><p> y establece el título que muestra el navegador para cada agrupación de elementos.</p>
<form>
<fieldset>
<legend>Datos personales </legend>
</fieldset>
<fieldset>
<legend>Otros Datos </legend>
</fieldset>
</form>
<p>Por otra parte, todos los controles de formulario salvo los botones presentan una carencia muy importante: no disponen de la opción de establecer el título o texto que se muestra junto al control.</p>
<p>Afortunadamente, el lenguaje HTML incluye una etiqueta denominada <label> y que se utiliza para establecer el título de cada campo del formulario.</p>
<p><label for=”nombre”>Nombre</label> <br/> <input type=”text” id=”nombre” name=”nombre” value=”” /></p>
<p>La principal ventaja de utilizar <label> es que el código HTML está mejor estructurado y se mejora su accesibilidad. Además, al pinchar sobre el texto del <label>, el puntero del ratón se posiciona automáticamente para poder escribir sobre el campo de formulario asociado.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo14.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Otros elementos de formularios</strong></p>
<p style=”text-align:center;”><strong><textarea tributos>Las áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, ya que es mucho más cómodo de introducir que en un campo de texto norma.
y
. Estas etiquetas, junto a un número de modificadores o atributos, son suficientes para indicarle al navegador cliente cómo debe recoger la información, cómo debe manejarla una vez recolectada y cómo debe interactuar con el servidor.</p>
<p style=”text-align:center;”><strong>Hacer un formulario sencillo</strong></p>
<p>Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas:<br />
<form><p> y <input>.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo3.JPG” alt=”Indice Unidad 8″ /></p>
<p>La etiqueta<br />
<form><p> encierra todos los contenidos del formulario (botones, cuadros de texto, listas desplegables) y la etiqueta <input> permite definir varios tipos diferentes de elementos (botones y cuadros de texto).</p>
<p><img src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo4.JPG” alt=”Indice Unidad 8″ /></p>
<p>La mayoría de formularios utilizan sólo los atributos action y method. El atributo action indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el navegador.</p>
<p>El atributo method establece la forma en la que se envían los datos del formulario al servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los formularios incluyen el atributo method=”get” o el atributo method=”post”.</p>
<p>El método POST permite el envío de mucha más información que el método GET. En general, el método GET admite como máximo el envío de unos 500 bytes de información. La otra gran limitación del método GET es que no permite el envío de archivos adjuntos con el formulario. Además, los datos enviados mediante GET se ven en la barra de direcciones del navegador (se añaden al final de la URL de la página), mientras que los datos enviados mediante POST no se pueden ver tan fácilmente</p>
<p style=”text-align:center;”><strong>Elementos de formulario</strong></p>
<p style=”text-align:center;”><img src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo5.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Cuadro de Texto</strong></p>
<p>El atributo name es el más importante en los campos del formulario..De hecho, si un campo no incluye el atributo name, sus datos no se envían al servidor. El valor que se indica en el atributo name es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo de formulario. Cuando el usuario pulsa el botón de envío del formulario, el navegador envía los datos a una aplicación del servidor para que procese la información y genere una respuesta adecuada.</p>
<p>El atributo value se emplea para establecer el valor inicial del cuadro de texto. Si se crea un formulario para insertar datos, los cuadros de texto deberían estar vacíos. Por lo tanto, o no se añade el atributo value o se incluye con un valor vacío value=””. Si por el contrario se crea un formulario para modificar datos, lo lógico es que se muestren inicialmente los datos guardados en el sistema. En este caso, el atributo value incluirá el valor que se desea mostrar: <input type=”text” name=”nombre” value=”Juan Pérez” /></p>
<p><img class=” aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo6.JPG” alt=”Indice Unidad 8″ /></p>
<p>Si no se especifica un tamaño, el navegador muestra el cuadro de texto con un tamaño predeterminado. El atributo size permite establecer el tamaño, en caracteres, con el que se muestra el cuadro de texto. Su uso es imprescindible en muchos formularios, en los que algunos campos como la dirección deben mostrar más caracteres de lo normal (<input size=”100″ …) y otros campos como el código postal deben mostrar menos caracteres de lo normal (<input size=”5″…).</p>
<p>Además de controlar el tamaño con el que se muestra un cuadro de texto, también se puede limitar el tamaño del texto introducido. El atributo maxlength permite establecer el máximo número de caracteres que el usuario puede introducir en un cuadro de texto. Su uso es imprescindible para campos como el código postal, el número de la Seguridad Social y cualquier otro dato con formato predefinido y limitado.</p>
<p>Por último, el atributo readonly permite que el usuario pueda ver los contenidos del cuadro de texto pero no pueda modificarlos y el atributo disabled deshabilita un cuadro de texto de forma que el usuario no pueda modificarlo y además, el navegador no envía sus datos al servidor.</p>
<p style=”text-align:center;”>
<strong>Campo Contraseña</strong></p>
<p>La única diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles.</p>
<p></p>
<p><img class=” aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo7.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Checkbox</strong></p>
<p>La única diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo8.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Radio</strong></p>
<p>Los controles de tipo radio son similares a los controles de tipo checkbox, pero presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton se utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones relacionadas que se le presentan. Cada vez que se selecciona una opción, automáticamente se deselecciona la otra opción que estaba seleccionaba.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo9.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Botón envío / reseteo del formulario</strong></p>
<p style=”text-align:center;”><img src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo10.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Ficheros Adjuntos</strong></p>
<p>Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque desde el punto de vista de HTML y del navegador no existe ninguna limitación sobre el número, tipo o tamaño total de los archivos que se pueden adjuntar, todos los servidores añaden restricciones por motivos de seguridad.</p>
<p><img class=” aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo11.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Campos ocultos y botón imagen</strong></p>
<p>Los campos ocultos se emplean para añadir información oculta en el formulario:</p>
<p><input type=”hidden” name=”login” value=”user1″ /></p>
<p><input type=”image” name=”enviar” src=”apple-logo.jpg” height=”30″ width=”30″ /></p>
<p>Pulsar el botón provoca el mismo efecto que si el botón fuera de type=”submit”.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo12.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Botón</strong></p>
<p>Algunos formularios complejos necesitan botones más avanzados que los de enviar datos (type=”submit”) y resetear el formulario (type=”reset”). Por ese motivo, el estándar HTML/XHTML define un botón de tipo genérico.</p>
<p><input type=”button” name=”mostrar” value=”Mostrar” onclick=”funcion_javascript(document.getElementById(‘nombre’).value)”/></p>
<p><script language=”javascript”> function funcion_javascript(f) { alert(document.getElementById(‘nombre’).value); alert(f); } </script></p>
<p>Este tipo de botones sólo son útiles si se utilizan junto con el lenguaje de programación JavaScript. Si la página incluye código JavaScript, los botones de este tipo se pueden programar para que realicen cualquier tarea compleja cuando se pulsa sobre ellos.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo13.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Formularios avanzados</strong></p>
<p>HTML define algunos elementos adicionales para mejorar la estructura de los formularios creados.</p>
<p>La etiqueta<br />
<fieldset> agrupa todos los controles de formulario a los que encierra. El navegador muestra por defecto un borde resaltado para cada agrupación. La etiqueta<br />
<legend> se incluye dentro de cada etiqueta<br />
<fieldset><p> y establece el título que muestra el navegador para cada agrupación de elementos.</p>
<form>
<fieldset>
<legend>Datos personales </legend>
</fieldset>
<fieldset>
<legend>Otros Datos </legend>
</fieldset>
</form>
<p>Por otra parte, todos los controles de formulario salvo los botones presentan una carencia muy importante: no disponen de la opción de establecer el título o texto que se muestra junto al control.</p>
<p>Afortunadamente, el lenguaje HTML incluye una etiqueta denominada <label> y que se utiliza para establecer el título de cada campo del formulario.</p>
<p><label for=”nombre”>Nombre</label> <br/> <input type=”text” id=”nombre” name=”nombre” value=”” /></p>
<p>La principal ventaja de utilizar <label> es que el código HTML está mejor estructurado y se mejora su accesibilidad. Además, al pinchar sobre el texto del <label>, el puntero del ratón se posiciona automáticamente para poder escribir sobre el campo de formulario asociado.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo14.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Otros elementos de formularios</strong></p>
<p style=”text-align:center;”><strong><textarea tributos>Las áreas de texto son útiles cuando se debe introducir una gran cantidad de texto, ya que es mucho más cómodo de introducir que en un campo de texto norma.
La anchura del área de texto se controla mediante el atributo cols, que indica las columnas o número de caracteres que se podrán escribir como máximo en cada fila. La altura del área de texto se controla mediante rows, que indica directamente las filas de texto que serán visibles.
El principal inconveniente de los elementos es que el lenguaje HTML no permite limitar el número máximo de caracteres que se pueden introducir. (programación con JavaScript)</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo15.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong><select></strong></p>
<p>La imagen muestra los tres tipos de listas desplegables disponibles.</p>
<p>-El primero es el de las listas más utilizadas que sólo muestran un valor cada vez y sólo permiten seleccionar un valor.</p>
<p>-El segundo tipo de lista es el que sólo permite seleccionar un valor pero muestra varios a la vez.</p>
<p>-Por último, el tercer tipo de lista desplegable es aquella que muestra varios valores y permite realizar selecciones múltiples.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo17.JPG” alt=”Indice Unidad 8″ /></p>
<p></p>
<p><img class=” aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo18.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Establecer el orden de tabulación de un formulario</strong></p>
<p>Al pulsar la tecla Tab, los visitantes pueden desplazarse por los campos en su formulario desde arriba hacia abajo (y luego seleccionar el deseado al pulsar Intro). En función de la presentación de su formulario, es posible que prefiera establecer personalmente el orden de tabulación para que los visitantes completen los campos en un determinado orden.</p>
<p>Para establecer el orden de tabulación:</p>
<p>En la etiqueta del elemento de formulario, se escribirá tabindex=”n”, donde n es el número que indica el orden de tabulación.</p>
<p>Al desplazarse por el formulario, los elementos del formulario se seleccionan pero no se activan. Pera ello es necesario pulsar Intro. El valor para tabindex puede ser cualquier número entre 0 y 32767.</p>
<p>Por defecto, el orden de tabulación depende de los elementos en el código (X)HTML. Cuando cambia el orden de tabulación, los elementos con numeración más baja son los primeros, seguidos de los elementos con numeración más alta.</p>
<p>Se puede asigna orden de tabulación a campos de texto, casillas de verificación, vínculos, mapas de imágenes ..</p>
<p>La primera vez en el IE que se pulsa la tecla Tab, el campo de Dirección, donde se muestra la URL, se resalta. Luego, la siguiente tabulación lleva al visitante a donde se haya definido.</p>
<p style=”text-align:center;”>
<strong>Teclas de acceso directo</strong></p>
<p>Las teclas de acceso rápido permiten que sus visitantes seleccionen y activen objetos sin ratón.</p>
<p>Para añadir teclas de acceso rápido/directo a un elemento del formulario:</p>
<p>Dentro de la etiqueta del elemento del formulario, se escribirá accesskey=”.</p>
<p>A continuación la combinación de teclas (cualquier tecla o número).</p>
<p>Se escribirá “.</p>
<p><input type=”password” name=”contrasena” value=”” accesskey=”W”/></p>
<p>En los sistemas Windows, para invocar la combinación de teclas de acceso rápido, se utilizará la tecla ALT.</p>
<p>Cuando se utiliza una combinación de teclas de acceso rápido, no solamente lo destaca del resto, sino que lo activa. En el caso de botones de opción y casillo de verificación, esto significa que el elemento se selecciona. Si es un cuadro de texto, el curso se sitúa dentro. Si es un botón, éste de activa.</p>
<p style=”text-align:center;”><strong>Enviar datos por correo electrónico</strong></p>
<p style=”text-align:center;”><img src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo19.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Permitir el envío de ficheros</strong></p>
<p style=”text-align:center;”><img src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo20.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><a name=”Permitir el envío de ficheros”></a></p>
<p><a name=”Elementos de formulario”></a></p>
FUENTES:
http://marykarenprogramacionweb.blogspot.mx/2014/09/exposicion-del-tema-27-formularios.html
https://www.youtube.com/watch?v=GX0nMA5LnkI
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo15.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong><select></strong></p>
<p>La imagen muestra los tres tipos de listas desplegables disponibles.</p>
<p>-El primero es el de las listas más utilizadas que sólo muestran un valor cada vez y sólo permiten seleccionar un valor.</p>
<p>-El segundo tipo de lista es el que sólo permite seleccionar un valor pero muestra varios a la vez.</p>
<p>-Por último, el tercer tipo de lista desplegable es aquella que muestra varios valores y permite realizar selecciones múltiples.</p>
<p><img class=”aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo17.JPG” alt=”Indice Unidad 8″ /></p>
<p></p>
<p><img class=” aligncenter” src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo18.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Establecer el orden de tabulación de un formulario</strong></p>
<p>Al pulsar la tecla Tab, los visitantes pueden desplazarse por los campos en su formulario desde arriba hacia abajo (y luego seleccionar el deseado al pulsar Intro). En función de la presentación de su formulario, es posible que prefiera establecer personalmente el orden de tabulación para que los visitantes completen los campos en un determinado orden.</p>
<p>Para establecer el orden de tabulación:</p>
<p>En la etiqueta del elemento de formulario, se escribirá tabindex=”n”, donde n es el número que indica el orden de tabulación.</p>
<p>Al desplazarse por el formulario, los elementos del formulario se seleccionan pero no se activan. Pera ello es necesario pulsar Intro. El valor para tabindex puede ser cualquier número entre 0 y 32767.</p>
<p>Por defecto, el orden de tabulación depende de los elementos en el código (X)HTML. Cuando cambia el orden de tabulación, los elementos con numeración más baja son los primeros, seguidos de los elementos con numeración más alta.</p>
<p>Se puede asigna orden de tabulación a campos de texto, casillas de verificación, vínculos, mapas de imágenes ..</p>
<p>La primera vez en el IE que se pulsa la tecla Tab, el campo de Dirección, donde se muestra la URL, se resalta. Luego, la siguiente tabulación lleva al visitante a donde se haya definido.</p>
<p style=”text-align:center;”>
<strong>Teclas de acceso directo</strong></p>
<p>Las teclas de acceso rápido permiten que sus visitantes seleccionen y activen objetos sin ratón.</p>
<p>Para añadir teclas de acceso rápido/directo a un elemento del formulario:</p>
<p>Dentro de la etiqueta del elemento del formulario, se escribirá accesskey=”.</p>
<p>A continuación la combinación de teclas (cualquier tecla o número).</p>
<p>Se escribirá “.</p>
<p><input type=”password” name=”contrasena” value=”” accesskey=”W”/></p>
<p>En los sistemas Windows, para invocar la combinación de teclas de acceso rápido, se utilizará la tecla ALT.</p>
<p>Cuando se utiliza una combinación de teclas de acceso rápido, no solamente lo destaca del resto, sino que lo activa. En el caso de botones de opción y casillo de verificación, esto significa que el elemento se selecciona. Si es un cuadro de texto, el curso se sitúa dentro. Si es un botón, éste de activa.</p>
<p style=”text-align:center;”><strong>Enviar datos por correo electrónico</strong></p>
<p style=”text-align:center;”><img src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo19.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><strong>Permitir el envío de ficheros</strong></p>
<p style=”text-align:center;”><img src=”http://dis.um.es/~lopezquesada/documentos/IES_1112/LMSGI/curso/xhtml/cap8/imagenes/Dibujo20.JPG” alt=”Indice Unidad 8″ /></p>
<p style=”text-align:center;”><a name=”Permitir el envío de ficheros”></a></p>
<p><a name=”Elementos de formulario”></a></p>
FUENTES:
http://marykarenprogramacionweb.blogspot.mx/2014/09/exposicion-del-tema-27-formularios.html
https://www.youtube.com/watch?v=GX0nMA5LnkI
No hay comentarios:
Publicar un comentario