Clase 8 Botones HTML PDF

Preview

Summary

Clase 8 Botones HTML...

Description

BOTONES Los botones son útiles en formularios para enviarlos, restablecerlos o para ejecutar funciones personalizadas. Pueden ser insertados usando el tag HTML input (submit, reset e image) o el tag HTML button (botones con contenido). Enviar Datos Este botón se usa para enviar los datos del formulario, al pulsar el usuario este botón, se remite el control al programa ó página indicados en ACTION. En todo formulario debe existir al menos un botón de SUBMIT, si solo incluye un recuadro del tipo TEXT no será necesario incluirlo. El formato es:

< INPUT TYPE="SUBMIT" VALUE="mensaje a mostrar" > Ejemplo de botón enviar

BOTON ENVIAR





< INPUT TYPE=IMAGE...> Botón de Envío gráfico Su funcionalidad es similar al botón de SUBMIT, se usa igualmente para enviar los datos de un formulario, pero en este caso se presenta una imagen como botón. Igualmente al pulsar sobre el botón se enviará el formulario. El formato es el siguiente: < INPUT TYPE="IMAGE" NAME="variable" SRC="URL de la Imagen" > Los botones de imagen funcionan exactamente como los botones de envío con la única diferencia de que lo los botones de imagen son mostrados visualmente con la imagen apuntada en el atributo "src". Son insertados usando el tag HTML input con el valor "image" para el atributo "type".



BOTON ENVIAR





Borrar los datos Este botón se usa para volver a los valores por defecto todos los elementos del formulario, borrando todos los datos introducidos por el usuario. Su formato es el siguiente: < INPUT TYPE="RESET" VALUE="Etiqueta a mostrar" >

BOTON BORRAR

Nombre:



Botones con contenido Los botones con contenido pueden ser usados como botones de envío o de restablecimiento, o pueden no tener ninguna acción preestablecida (dependiendo del valor del atributo "type"), pero sí permiten a los autores insertar contenido dentro de ellos. Esto dignifica que un fragmento de código HTML puede ser mostrado dentro del botón (vínculos, párrafos, texto en negrita, imágenes, etc.).

Type define el tipo del botón. Puede tener uno de estos valores insensibles a mayúsculas/minúsculas:

 button: Crea un botón "push". Este tipo de botones no tiene una acción predeterminada. Son usualmente definidos con scripts personalizados que manejas sus eventos.

BOTON CONTENIDO



El button permite contenido de varias línea



 submit: Crea un botón de envío (valor predeterminado). Cuando un botón de tipo "submit" es presionado, el formulario al que corresponde enviado automáticamente.

BOTON CONTENIDO



El button permite contenido de varias línea



 reset: Crea un botón "reset". Cuando un botón reset es presionado, todos los campos en el formulario vuelven a sus valores iniciales.



BOTON BORRAR

Nombre:

El button permite borrar contenido de las cajas de otros controles



disabled Cuando se establece este atributo, el control es deshabilitado, lo que significa que no puede obtener el enfoque, que su valor no puede ser cambiado y que no será enviado junto con el formulario. Dependiendo del navegador los elementos deshabilitados pueden ser mostrados de una manera diferente.

EJEMPLO DE DISABLED





Entrada de archivos La entrada de archivos puede ser utilizada para subir archivos al servidor. El control muestra una caja de texto donde el usuario debe especificar la ubicación del archivo (que será procesada localmente por el navegador) que será enviado hacia el servidor. De esta forma, los autores pueden pedir a los visitantes el envío de archivos mediante la página. El control usualmente muestra un botón para elegir el archivo visualmente. Nota que para formularios con subida de archivos debes especificar el valor "multipart/form-data" en el atributo "enctype" del tag HTML form.

BOTON ENTRADA DE ARCHIVOS



Etiquetando controles Las etiquetas de los elementos pueden hacer que su página se vea mejor y agregar una pequeña funcionalidad para navegadores visuales (cuando un visitante hace click en la etiqueta la acción es transmitida al control asociado), pero seguramente tendrán mucho sentido para personas con discapacidades o navegadores no visuales. Una etiqueta establece una relación entre un control y un trozo de texto (que se supone ha de dar un "título" para el control). Las etiquetas pueden ser insertadas usando el tag HTML label y son asociadas al control mediante el atributo "for". Para lograr esto, el valor del atributo "for" del tag HTML label debe coincidir con el valor del atributo "id" del control. El atributo for asocia explícitamente un rótulo con otro control: el valor del atributo for debe ser el mismo que el valor del atributo id del elemento de control asociado. Se puede asociar más de un LABEL con el mismo control creando múltiples referencias a través del atributo for. Cada rótulo está explícitamente asociado a un control de entrada de texto:

Etiquetando controles



Nombre: Apellido: Género:

Masculino

Femenino



Agrupando elementos Todos los elementos de un formulario pueden también ser agrupados temáticamente con el tag HTML fieldset. Este tag contiene a un grupo de controles que se relacionan unos con otros de alguna forma (por ejemplo, información personal, información laboral, información financiera, intereses, etc.). El título para cada grupo de elementos puede establecerse con el tag HTML legend que debe ser definido justo a continuación del tag de apertura del fieldset, y proveer un título descriptivo para el grupo de controles.

Agrupando elementos



Información Personal Nombre: Apellido: Dirección: Teléfono:

Información Laboral Dirección Empresa: Teléfono Empresa:



El uso de estas agrupaciones es amplio y depende de cada formulario específico, pero puede ser muy útil para los visitantes al llenar formularios largos....