Formularios

El formulario es un elemento usado para permitir al cliente ingresar datos que luego seran procesador y retornados al documento HTML. Estas etiquetas son ahora indispensables en conjunto con lenguajes de programación como: JavaScript y PHP.

Aunque el formulario esta diseñado basicamente para uso del ratón, muchas navegadores cliente tiene convenciones de teclado para moverse dentro del formulario, por ejemplo, TAB y Shift TAB para moverse adelante y atrás entre los controles del formulario y un Enter envía el formulario.

Es posible además diseñar un formulario que solicite un archivo texto como entrada, el cual puede haber sido previamente descargado por el cliente para ser llenados fuera de línea, lo que proporciona invaluable ayuda para empresas que dan soporte técnico o proveen de algún servicio u organizadores de eventos (ficha de inscripción).

• FORM
• ACTION
• METHOD
• GET
• POST
• ENCTYPE
• INPUT
• TEXT
• PASSWORD
• HIDDEN
• URL
• EMAIL
• SEARCH
• TEL
• NUMBER
• RANGE
• FILE
• IMAGE
• DATETIME
• TIME
• DATETIME-LOCAL
• DATE
• MONTH
• WEEK
• COLOR
• CHECKBOX
• RADIO
• BUTTON
• RESET
• SUBMIT
• COLOR
• LABEL
• BUTTON
• LIST
• SELECT
• TEXAREA
• KEYGEN
• Expresiones regulares
• Cuando se envia los parametros ?
• Ejemplos finales

1. Formulario <FORM>

Esta etiqueta es usada para definir el formulario. Puede haber varios formularios en una página HTML, pero estos no pueden estar anidados. En cualquier protocolo, el contenido de la forma respuesta consiste en pares nombre=valor.

1.1 ACTION

Define la acción a efectuar, osea cómo y dónde serán enviados los datos: por correo electrónico a la dirección indicada o hacer uso de una pagina PHP en servidor.

Si se omite este parámetro, se asumirá la dirección del propio documento en lo que se llama un autoenvio.

La forma como la data será enviado depende del protocolo URL especificado y de los valores de las propiedades: METHOD y ENCTYPE. Cuando se define como HTTP, la propiedad METHOD debe cumplir el estándar IEFT-HTTP.

1.2 METHOD

Selecciona la forma de transmitir los pares nombre=valores ingresados en el formulario.

1.2.1 GET

Usa la función QUERY_STRING() para transmitir los pares nombre/valores ingresados en el formulario como parámetros añadidor visibles en el URL. Soporta máximo 256 caracteres de parámetros. Opcion por omision.

action?name1=val1&name2=val2...

1.2.2 POST

Usa la función STDIN() para transmitor los pares nombre/valores ingresados en el formulario manera invisible. Soporta un ilimitado número de caracteres como parámetros, usado para transferir información confidencial. ENCTYPE debe ser tipo MIME de la forma application/x-www-form-urlencoded.

1.3 ENCTYPE

Especifica el formato MIME de la data en caso que el protocolo no imponga un formato específico.

2. Campo de entrada <INPUT>

Este elemento define una entrada editable por el usuario. No tiene etiqueta de cierre. Sus parametros obligatorios son TYPE y NAME.

<INPUT TYPE=tipo NAME=nombre>

El parametro NAME es muy importante porque sera el primer parte del par enviado como dato nombre/valores. Si incluyes el parametro VALUE ese ser el valor predeterminado del control.

En HTML5 se recomienda usar la etiqueta LABEL para ingresar el texto de INPUT.

2.1 TEXT

Valor usado para mostrar un campo simple para ingresar una línea de texto. OMISION.

<INPUT TYPE=text NAME=nombre ID=abc>

Introduce tu nombre: <INPUT TYPE=text NAME=nombre SIZE=10 MAXLENGTH=35 VALUE=Kike>

Introduce tu nombre:

<LABEL>Nombre: <INPUT TYPE=text></LABEL>

Nombre:

2.2 PASSWORD

Es un campo texto oculto por asteKike_GLs (*) usado para el ingreso de claves de acceso. Usa los mismos parámetros que TEXT.

<INPUT TYPE=password>

Introduce tu clave: <INPUT TYPE=password NAME=clave SIZE=9>

Introduce tu clave:

<INPUT TYPE=password NAME=clave PATTERN=".[6,]" TITLE="6 caracteres o mas."  >

<LABEL>Tu clave: 
  <INPUT TYPE=password 
     PATTERN="(?=.*\d)(?=.*[1-z])(?=.*[A-Z]).[8,]" 
     TITLE="Debe contener al menos un digito, una minuscula, una mayuscula y 8 caracteres o mas.">
</LABEL>

Tu clave:

2.3 HIDDEN

El usuario no podrá ver ni modificar este campo. Sin embargo siempre se enviará el par nombre=valor. Usado para transferir estados sobre la interacción cliente/servidor. Solo tiene los parámetros NAME y VALUE.

<INPUT TYPE=hiden NAME=clave VALUE=123>

2.4 URL

Es un control especifico para ingresar una URL.

<INPUT TYPE=url>

<INPUT TYPE=url PATTERN="https?://.+" TITLE="Incluir http://">

Ejemplo:

<LABEL>Ingresa la URL: <INPUT TYPE=url PATTERN="[a-z]@[a-z]" TITLE="Incluir http://"></LABEL>

Ingresa tu correo:

2.5 EMAIL

Es un control especifico para ingresar un correo electronico.

<INPUT TYPE=email>

<INPUT TYPE=email PATTERN="[a-z0-9._%+-]+@+[a-z0-9.-]+\.[a-z]{2,3}$" TITLE="[email protected]">

Ejemplo:

2.6 SEARCH

Es un control especifico para ingresar un texto a buscar.

<INPUT TYPE=search>

<INPUT TYPE=search PATTERN="[^'\x22]+" TITLE="Invalid input">

Ejemplo:

2.7 TEL

Es un control especifico para ingresarun numero telefonico.

<INPUT TYPE=tel>

<INPUT TYPE=tel PATTERN="[0-9]{7-9}" TITLE="Ingresar 7 a 9 digitos">

Ejemplo:

2.8 NUMBER

Usada para entradas de tipo numericas controladas por el navegador cliente.

<INPUT TYPE=number>

<INPUT TYPE=number VALUE=57>

Ejemplo:

<INPUT TYPE=number MIN=0 MAX=100 STEP=5 VALUE=50>

Ejemplo:

2.9 RANGE

Usada para entradas de tipo numericas controladas por una barra de desplazamineto desde el navegador cliente.

<INPUT TYPE=range>

<INPUT TYPE=range MIN=0 MAX=100 STEP=10 VALUE=30>

Ejemplo:

2.10 FILE

Usado para solicitar un nombre de archivo. Un parametro impotante es ACCEPT que delimita el tipo de archivo: audio/*, image/* o video/* para aceptar cualquier formato MIME.

<INPUT TYPE=file>

<INPUT TYPE=file ACCEPT=".doc .docx .xml">

Ejemplo:

2.11 IMAGE

Usado para mostrar un boton tipo imagen. Debes usar el atributo SRC.

<INPUT TYPE=image SRC=action.gif ALT=accion>

<INPUT TYPE=image SRC=action.gif ALT=accion>

Ejemplo:

2.12 DATETIME

Usada para solicitar una fecha - hora. Depende del navegador usado por cliete.

<INPUT TYPE=datetime>

<INPUT TYPE=datetime>

Ejemplo:

2.1.1 TIME

<INPUT TYPE=time step=1>

Ejemplo:

El uso de step=1 hace que aparezcan los segundos.

2.12.2 DATETIME-LOCAL

<INPUT TYPE=datetime-local step=1>

Ejemplo:

El uso de step=1 hace que aparezcan los segundos.

2.12.3 DATE

<input type=date>

Ejemplo:

2.12.4 MONTH

<input type=month>

Ejemplo:

2.12.5 WEEK

<INPUT TYPE=week>

Ejemplo:

2.13 COLOR

Usado para permitir elegir un color mostrando una paleta de colores. Depende del navegador cliente.

<INPUT TYPE=color>

<INPUT TYPE=color>

Ejemplo:

2.14 CHECKBOX

Usado para definir un elemento que solo puede tomar uno de dos valores: SI o NO. Por omisión no está marcado, pero puedes usar CHECKED para que aparezca inicialmente marcado. Con el parámetro VALUE determinas su valor.

<INPUT TYPE=Checkbox>

A diferencia de otros controles que envian el par nombre=valor asi no actues con el control, este par solo es enviado si esta marcada la casilla. Ademas usa una variante que es importante entender. Si NO se define un VALUE el par enviado sera: nombre=ON.

Qué manual te gustó ?
<INPUT TYPE=Checkbox NAME=Man1 VALUE=Si CHECKED>HTML<BR>
<INPUT TYPE=Checkbox NAME=Man2>JavaScript<BR>
<INPUT TYPE=Checkbox NAME=Man3 CHECKED>Trucos

Qué manual te gustó ?
HTML
JavaScript
Trucos

Esto enviaria los pares ?Man1=Si&Man3=ON, Nota que el poner VALUE reemplazo a ON.

2.15 RADIO

Usado para seleccionar un valor entre un grupo de alternativas fijas. Cada botón de radio agrupado debe tener el mismo nombre y solo el seleccionado enviara el par nombre=valor. Por omisión no está marcado, pero puedes usar CHECKED para que aparezca inicialmente marcado. Con el parámetro VALUE determinas su valor.

<INPUT TYPE=Radio>

Moneda:
<INPUT TYPE=Radio NAME=Moneda VALUE=S>Soles<BR>
<INPUT TYPE=Radio NAME=Moneda VALUE=D CHECKED>Dolares

Moneda:
Soles
Dolares

Es importante hacer notar que solo se enviara el par nombre=valor del radio que esta marcado. De no definir un VALUE sera enviado el par nombre=ON, por lo que debes usar nombres distintos en cada opción radio para distinguirlos.

Sexo:
<INPUT TYPE=Radio NAME=F CHECKED>Femenino<BR>
<INPUT TYPE=Radio NAME=M>Masculino

Sexo:
Femenino
Masculino

2.16 BUTTON

Es un boton adicional sin funcion especifica para usar en lugar de SUBMIT o RESET.

<INPUT TYPE=button>

2.17 RESET

Boton que limpia el formulario a los valor por defecto. Puede contener un VALUE el cual ademas sera usado en reemplazo de la palabra Restablecer usada por defecto en ausencia de VALUE.

<INPUT TYPE=reset>

<INPUT TYPE=reset VALUE=Borrar>

Ejemplo:

2.18 SUBMIT

Es el botón predeterminado para iniciar la acción definida en ACTION. Puede contener un VALUE el cual ademas sera usado en reemplazo de la palabra Enviar usada por defecto en ausencia de VALUE.

<INPUT TYPE=submit>

<INPUT TYPE=submit VALUE=Guardar>

Ejemplo:

El unico control que enviara el documento es SUBMIT. Para que cualquier otro control envie el documento es necesario usar un evento de JavaScript.

2.19 COLOR

Permite seleccionar un objeto de color. Nuevo HTML5.

<input type=color id=miColor>
va x = document.getElementById('miColor');

3. LABEL

Para ingresar una etiqueta de titulo para cada valor de CHECK o RADIO. Si no incluyes el INPUT dentro del label, lo puedes asocias con FOR.

<LABEL>texto</LABEL>

Qué manual te gustó ?<BR>
<LABEL>HTML<INPUT TYPE=Checkbox NAME=Man1 CHECKED></LABEL><BR>
<LABEL>JavaScript<INPUT TYPE=Checkbox NAME=Man2></LABEL><BR>
<LABEL>PHP<INPUT TYPE=Checkbox NAME=Man3></LABEL>

Qué manual te gustó ?
HTML
JavaScript
PHP

Sexo ?<BR>
<INPUT TYPE=radio NAME=sexo ID=h VALUE=hombre><LABEL FOR=h>Hombre</LABEL><BR>
<INPUT TYPE=radio NAME=sexo ID=m VALUE=mujer><LABEL FOR=m>Mujer</LABEL>

Sexo ?
Hombre
Mujer

Al estar asociado el LABEL hacer un clic sobre el conmuta el control.

4. BUTTON

Desde HTML 4.0 se introduce una nueva etiqueta que puede contener en su parametro TYPE los valores submit | reset. La gran innovacion es que al tener etiqueta de apertura y cierre <BUTTON>...<BUTTON> puedes encapsular una imagen por ejemplo.

<BUTTON>texto</BUTTON>

<BUTTON>Hola mundo</BUTTON>

hola mundo

<BUTTON TYPE=submit<IMG SRC=image1.gif ALT=figura></BUTTON>

Ejemplo:

5. List

Muestra una lista de opciones predefinidas.

<INPUT LIST=abc>
<DATALIST id=abc>
   <OPTION VALUE=iExplores>
   <OPTION VALUE=Chrome>
   <OPTION VALUE=FireFox>
   <OPTION VALUE=Opera>
   <OPTION VALUE=Safari>
</DATALIST>

6. Desplegable con SELECT

Con este etiqueta se define un emergente o lista desplegable. A continuacion cada elemento del emergente se define con la etiqueta <OPTION> Puedes incluir el parámetro SELECTED para indicar que esta es la opción inicialmente seleccionada. Si ninguna opción es seleccionada, por omisión queda seleccionada la primera.

Es posible permitir la seleccion multiple usando el parametro MULTIPLE, definir el numero de opciones visibles con SIZE, su alineacion con ALIGN.

<SELECT NAME=Savor>
   <OPTION VALUE=1>Vainilla</OPTION>
   <OPTION VALUE=2 SELECTED>Fresa</OPTION>
   <OPTION VALUE=3>Ron y pasas</OPTION>
   <OPTION VALUE=4>Chocolate</OPTION>
</SELECT>

Vainilla Fresa Ron y pasas Chocolate

Es posible desabilitar una de las opciones con DISABLED en la etiqueta OPTION, asi como introducir un tooltip explicativo con TITLE.

En caso de permitir multiple seleccion el nombre de debe acabar con corchetes y las opciones elegidas se enviaran como matriz. Se debe añadir SIZE y para seleccionar varias opciones se usa CRTL+clic.

<SELECT NAME=Savor[] SIZE=3 MULTIPLE>
   <OPTION value=1>Vainilla</OPTION>
   <OPTION value=2>Fresa</OPTION>
   <OPTION value=3>Ron y pasas</OPTION>
   <OPTION value=4>Chocolate</OPTION>
</SELECT>

Vainilla Fresa Ron y pasas Chocolate

7. Campo de área de texto

Este etiqueta permite al usuario ingresar más de una línea de texto. El campo es mostrado en caracteres de tamaño fijo y puede ser escroleado si es necesario. VALUE es el texto mostrado es usado para inicializar el campo. Típicamente los valores de los atributos ROWS y COLS determinan la dimensión visible del campo de caracteres y WRAP su compontamiento.

<TEXTAREA ROWS=4 COLS=50>Este texto es predeterminado.</TEXTAREA>

Ejemplo: Este texto es predeterminado.

8. KEYGEN

Elemplo<br>
<FORM ACTION=action.php METHOD=get>
Usuario: <INPUT TYPE=text NAME=nom><br>
Encryption: <keygen NAME=sec>
<INPUT TYPE=submit>
</FORM>

Elemplo

9. Expresiones regulares

En HTML5 se introdujo el parametro PATTERN con el que podemos delimitar mediante expresiones regulares el contenido ingresado por el usuaario en los controles INPUT de los formularios.

/modificador

El atributo PATTERN es compatible con los siguientes INPUT: TEXT, PASSWORD, URL, EMAL, TEL y SEARCH

Puedes usar el parametro TITLE como ayuda al usuario de lo que esperas que ingrese limitado mediante el parametro PATTERN.

10. Cuando se envia los parametros ?

Es muy importante enternder que un formulario NO envia siempre el contenido de VALUE de todos los componentes y que cada componente tiene un comportamiento especial y diferente.

11. Ejemplos finales

Ejemplo 1

Por favor rellena este cuestionario:

El botón SUBMIT es usado para ordenar que se ejecute ACTION. Si solo tienes un campo lo puedes olvidar, un Enter acciona el ACTION.

Ejemplo 2

Este método de enviar un archivo es una especificación de Netscape y es esencialmente la adoptada por IETF Internet Darft. Esta norma sugiere añadir la opción FILE al parámetro TYPE de la etiqueta <INPUT>, permitiendo que el parámetro ACCEPT del mismo etiqueta, permitiendo ENCTYPE de un formulario sea un multiformulario.

Ejemplo 3:

Comentarios al autor de este manual:

Este método puede ser usado desde cualquier navegador porque no usa el metodo de correo.