Cargando...


Propiedades y Eventos de Formularios HTML

Vamos a conocer las propiedades generales de los elementos de un formulario y los eventos que utilizan. Para mayor comprensión recomiendo leer los materiales introducción a lenguaje HTML y etiquetas de formularios HTML publicados en los siguientes enlaces:


Propiedades y Eventos de Formularios HTML

Propiedades básicas de los elementos de formularios HTML 

A nivel general se manejan cuatro propiedades básicas de formularios y cuatro eventos principales de interacción con el usuario. Veamos cuales son:

Propiedad Type

Indica el tipo de elemento que se trata. Para los elementos de tipo <input> (text, button, checkbox, etc.) coincide con el valor de su atributo type. Para las listas desplegables normales (elemento <select>) su valor es select-one, lo que permite diferenciarlas de las listas que permiten seleccionar varios elementos a la vez y cuyo tipo es select-multiple. Por último, en los elementos de tipo <textarea>, el valor de type es textarea.

Propiedad Form

Es una referencia directa al formulario al que pertenece el elemento. Así, para acceder al formulario de un elemento, se puede utilizar document.getElementById("id_del_elemento").form

Propiedad name

Obtiene el valor del atributo name de XHTML. Solamente se puede leer su valor, por lo que no se puede modificar.

Propiedad Value

Permite leer y modificar el valor del atributo value de XHTML. Para los campos de texto (<input type="text"> y <textarea>) obtiene el texto que ha escrito el usuario. Para los botones obtiene el texto que se muestra en el botón. Para los elementos checkbox y radiobutton no es muy útil, como se verá más adelante.

Propiedades y Eventos de Formularios HTML
Este esquema muestra la gerarquía de objetos  HTML que podemos usar dentro de un Form

Eventos para el manejo de formularios


Los cuatro eventos que más se utilizan en el procesamiento de formulario HTML son: Onclick, Onchange, Onfocus y Onblur, veamos cual es la función de cada uno.

Evento Onclick

Evento que se produce cuando se da clic sobre un elemento. Se utiliza con cualquiera de los tipos de botones que permite definir XHTML (<input type="button">, <input type="submit">, <input type="image">).

Evento Onchange

Evento que se produce cuando el usuario cambia el valor de un elemento de texto (<input type="text"> o <textarea>). También se produce cuando el usuario selecciona una opción en una lista desplegable (<select>). El evento sólo se produce si después de realizar el cambio el usuario pasa al siguiente campo del formulario, lo que técnicamente se conoce como que "el objeto ha perdido el foco".

Evento Onfocus

Evento que se produce cuando el usuario selecciona un elemento del formulario.

Evento Onblur

Evento complementario de onfocus, ya que se produce cuando el usuario ha deseleccionado un elemento por haber seleccionado otro elemento del formulario. También funciona de modo que el objeto anterior "ha perdido el foco".

Haga clic aquí para ver los comentarios 0 Comentarios:

Gracias por tu comentario

Gracias por sus comentarios

Etiquetas

Abrir HTMl dentro de DIV addthis.com app nativas App para moviles Bases de Datos MySql Botones de Compartir Cajas CSS Cascading Style Sheets CHECKBOX Clasificacion CSS CMS Comentarios en PHP comparacion prestashop y magento Conectar con Base De Datos MySql Convenciones de PHP Creación de Formularios css Declarar Estilos CSS Desventajas de Magento Desventajas de Prestashop Diseño paginas web en barcelona Diseño y Desarrollo Web DIV y SPAN Documento Hojas de Estilo ejemplo css ejemplo estilo css Ejemplo Etiquetas Form Ejemplos HTML Ejercicio CSS El Sistema ha Devuelto: (111) Error de Conexión a::1 Fallida Estilos CSS Estructura de HTML Etapas del Diseño Web Etiqueta DIV Etiqueta SPAN Etiquetas HTML Eventos de Formularios HTML Fases del Desarrollo Web Fases del Diseño Web FORM formulario de contacto Formulario de Contacto HTML Formularios HTML framework móviles Framework para Móviles Funcion mail() de PHP Funciones Mysql PHP Glosario de Términos Guia Basica CSS Guia CSS Hoja de Estilo en Cascada hojas de estilo Hojas de Estilo Externas HTML HTML a Texto Plano HTML y PHP HTTP HTTPS Ingeniería Web INPUT Introducción HTML JavaScrip Javascript jquery touch jquerymovile Lenguaje HTML Lenguaje PHP Magento Manejadores de Contenido Marketing Web Marqueting web barcelona Mysql Mysql_Connect Mysql_Query Mysql_Select_Db Objeto Button Objeto Checkbox Objeto Form Objeto Hidden Objeto Password Objeto Radio Objeto Select Objeto Text Objeto Textarea Objetos de Formularios HTML phoneGap PHP plantilla css Plantilla Web con CSS Posicionamiento con Hojas de Estilo Posicionamiento CSS position: static position:absolute position:relative Prestashop Prestashop vs Magento Programación Web Propiedades CSS Propiedades de Formularios Propiedades Y Métodos Puertos para Apache Qué es HTML Que es PhoneGap RADIO Reglas CSS Reglas de PHP Segundo Ejemplo CSS Selectores CSS sencha touch SEO Servidor Web shareaholic.com Sintaxsis PHP Stylesheet TEXTAREA Tiendas En Linea Tipos de CSS titanium appcelerator Uso de los DIV Variables PHP Ventajas de Magento Ventajas de Prestashop Webmaster Widget Xampp Conexión Refused

Directorios Web. Publicar Blogs


En estos sitios puedes promocionar tus sitios web y blog
Directorio de Blogs Blogazos.com Directorio Mexicano Directorio 360dir

Formulario de Contacto

Nombre

Correo electrónico *

Mensaje *

Blogs de Tecnología