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 básicamente 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).

Muchos parámetros fueron sustituidos por CSS

• FORM
• ACTION
• METHOD
• GET
• POST
• ENCTYPE
• OTROS
• 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 envía los parámetros ?
• 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.

<Form action=accion.php method=post accept-charset='UTF-8'>
   ...
</Form>

1.1 ACTION

Define la acción a efectuar, osea cómo y donde 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. Los posibles valores son: GET o POST.

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. Opción por omision.

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

1.2.2 POST

Usa la función STDIN() para transmitir 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 cómo deben codificarse los datos del formulario al enviarlos al servidor (solo para method=POST). Las opciones son:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

1.4 ACCEPT-CHARSET

Especifica la codificación de caracteres que se usarán para el envío del formulario.

1.5 OTROS

Existen otros atributos de form que son muy populares.

Ademas form admite los atributos globales (id, class, style, title, hidden, draggable, spellcheck, etc) y eventos de HTML

2. Campo de entrada <INPUT>

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

<INPUT TYPE=tipo NAME=nombre>

El atributo NAME es muy importante porque sera el primer parte del par enviado como dato nombre/valores. Si incluyes el atributo 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 minúscula, una mayúscula 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 dígitos">

Ejemplo:

2.8 NUMBER

Usada para entradas de tipo numéricas 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 numéricas controladas por una barra de desplazamiento 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 parámetro importante 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 botón 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.12.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 envían el par nombre=valor así no actúes 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 botón adicional sin función especifica para usar en lugar de SUBMIT o RESET.

<INPUT TYPE=button>

2.17 RESET

Botón 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 envíe 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 TEXT, NUMBER, CHECK, RADIO, SELECT o TEXTAREA. Si no incluyes el INPUT dentro del label, lo puedes asocias con FOR.

<LABEL>texto <INPUT TYPE=text></LABEL>
<LABEL FOR=id>texto</LABEL>

Se puede usar en las siguientes etiquetas:

• <input type=checkbox>
• <input type=color>
• <input type=date>
• <input type=datetime-local>
• <input type=email>
• <input type=file>
• <input type=month>
• <input type=number>
• <input type=password>
• <input type=radio>
• <input type=range>
• <input type=search>
• <input type=tel>
• <input type=text>
• <input type=time>
• <input type=url>
• <input type=week>
• <meter>
• <progress>
• <select>
• <textarea>

Qué manual te gustó ?<BR>
<LABEL>HTML<INPUT TYPE=Checkbox NAME=Man1 CHECKED></LABEL><BR>
<LABEL>CSS<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é apuntes te gustan mas ?
HTML
CSS
JavaScript
PHP
Arduino

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.

El atributo for de <label> debe ser igual al atributo id del elemento relacionado para unirlos. Una etiqueta también puede vincularse a un elemento colocando el elemento dentro del <label>elemento.

4. BUTTON

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

<BUTTON>texto</BUTTON>

<BUTTON>Hola mundo</BUTTON>

Ejemplo 1: hola mundo

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

Ejemplo 2:

<BUTTON onclick="alert('Hola mundo')">Prueba</BUTTON>

Ejemplo 3: Prueba

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 selección múltiple usando el parámetro 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 deshabilitar una de las opciones con DISABLED en la etiqueta OPTION, así como introducir un tooltip explicativo con TITLE.

En caso de permitir múltiple selección 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 comportamiento.

<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 parámetro 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 atributo TITLE como ayuda al usuario de lo que esperas que ingrese limitado mediante el atributo PATTERN.

10. Cuando se envía el contenido de VALUE ?

Es muy importante entender que un formulario NO envía siempre el contenido de VALUE de todos los componentes y que cada componente tiene un comportamiento especial y diferente.

Si el objeto tiene activo el atributo DISABLED no se envía su valor.

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 método de correo.