Etiqueta form

¿Que se puede hacer con los formularios en la parte cliente?

1. Interactuar, por ejemplo, como ayuda para completar la entrada
2. Recibir y enviar datos. Se verá más adelante en el curso
3. Validar datos antes de enviar al servidor

La etiqueta form es un elemento de bloque y por lo tanto puede contener elementos propios del documento html

Ejemplo de formulario

    

        
Nombre: 
        
Año de nacimiento: 
        
Sexo:
           Hombre
           Mujer
        
        

          
          
        
      

Que tiene el siguiente aspecto

Atributos de form

Los atributos principales de la etiqueta form son:

• action: contiene el nombre del agente que procesará los datos remitidos al servidor (por ejemplo, un script de PHP, Python etc)
• method: define la manera de enviar los datos al servidor. Los valores posibles son:
  • get: los valores enviados se añaden a la dirección indicada en el atributo action
  • post: los valores se envían de forma separada

  Si el atributo method no está establecido, el formulario se comporta como si el valor fuera get.

Otros atributos

• accept-charset

Controles en formularios

• input: para crear un control de entrada de datos
• textarea: para crear un control de entrada de texto
• select: para crear un control de selección
• option: para crear una opción de un control de selección
• button: para crear un control de tipo botón
• label: para crear un control de tipo etiqueta
• fieldset: para crear un grupo de controles
• legend: para crear una leyenda de un grupo de controles

Estos controles tienen algunos atributos comunes

• type: define el tipo de control
• name: define el nombre para el control. Es obligatorio para poder trasmitilos
• value: define el valor inicial del control. Algunos elementos no lo admite , como por ejemplo test area
• size: define el tamaño del control
• maxlength: define el número máximo de caracteres que puede contener el control
• checked: define si el control está marcado
• disabled: define si el control está deshabilitado
• readonly: define si el control está solo lectura
• required: define si el control es obligatorio
• placeholder: define el texto que se muestra en el control hasta que el usuario escriba algo
• autofocus: define si el control debe tener el foco inicialmente
• formaction: define la dirección a la que se envía el formulario
• formenctype: define el tipo de codificación de los datos del formulario
• formmethod: define el método de envío del formulario (get/post)

Tipos de controles

Los controles de entrada de datos tienen algunos tipos específicos. La mayoria de las entradas utilizan el control input

label

El control label es un control que no recibe datos, y solo se utiliza para mostrar texto. El atributo for es obligatorio para que funcione correctamente y se asocie la etiqueta al control mediante el identificador de este

>
                

                    Nombre:    
                    
                    

                    Edad:
                    
                 
                

input

button

select

textarea

fieldset

legend

option

optgroup

datalist

keygen

output

progress

meter

details

summary

menu

menuitem

Forms desde Javascript

El objeto form de javascript

El objeto form es un objeto que contiene todos los controles del formulario.

 
                   var formulario = document.forms[0];
                

A su vez los componenetes del formulario están disponibles en un array para cada formulario:

 
                var formulario = document.forms[0];
                var controles = formulario.elements;
                var un_control = controles[0];
                // lo mismo de otra forma 
                var un_control = document.forms[0].elements[0];
             

El inconveniente es que si se cambia el orden en el formulario podemos obtener efectos indeseados.

Tenemos una segunda forma de acceder usando el nombre

                

                    Nombre:    
                    
                    

                    Edad:
                    
                  
                  Y en javascript
                  var formulario = document.forms.mi_formulario;
                  var un_nombre = formulario.ElNombre;
                  También serviría:
                  var un_nombre = document.getElementById("mi_formulario").ElNombre;
                  
              

Propiedades y métodos de los controles de formulario

Propiedades:

• type
Indica el tipo del elemento de formulario
• form
el objeto formulario al que pertenece el elemento

document.getElementById("id_del_elemento").form

• name Valor del atributo name, solo lectura
• value Valor del elemento, lectura y escritura

Alguno de los eventos utilizados con formularios y sus controles:

• onchange Se ejecuta cuando el valor del elemento cambia
• onfocus Se ejecuta cuando el elemento recibe el foco
• onblur Se ejecuta cuando el elemento pierde el foco
• onclick Se ejecuta cuando se hace click en el elemento

Para obtener los valores de los controles de formulario

Texto y text area

                var nombre = document.getElementById("nombre").value;
              

Radio botón

                   SI
                     NO
                     NS/NC
                    
                    y con el código javascript ( por ejemplo con el evento onsubmit )

                    for(var i=0; i

Checkbox

Validad formularios en el lado cliente

• Obtener datos correctos con formato correcto
• Obligar a crear contraseñas seguras
• Mantener la seguridad del portal web

• Validación de formulario incorporado en HTML5
• Validación por JavaScript

Validación de formulario incorporado

Algunos de los atributos de validación:

• required valor booleano que indica que es obligatorio completar
• maxlength minlengh Longiutd máxima y mínmia de los datos de texto
• min max Valores numero mínimo y máximo
• type tipo de los datos, email,
• pattern expresión regular que deben cumplir los datos

• El elemento coincide con la pseudoclase de Css :valid
• El formulario se envia al servidor si no se añadido comprobación javascript

• El elemento coincide con la pseudoclase de Css :invalid
• El formulario no se envia al servidor si no se añadido comprobación javascript

Validación con javascript

Usando DOM form

            function validarFormulario(formulario) {
                var valido = true;
                var elementos = formulario.elements;
                for (var i = 0; i

Usando eventos

              function validatePass(campo) {
                var RegExPattern = /(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$/;
                var errorMessage = 'Password Incorrecta.';
                if ((campo.value.match(RegExPattern)) && (campo.value!=''))
                   { alert('Password Correcta'); }
                else { alert(errorMessage); 
                  campo.focus(); } 
              }
              
              

                


                 

                Entre 8 y 10 caracteres, por lo menos un digito y un alfanumérico, y no
                puede contener caracteres espaciales
                

                
                
                              
           
  

Como estructurar un formulario

Ejercicios