Formularios

El formulario es un elemento usado para permitir al usuario ingresar datos y retornarlos al autor del documento HTML. Los siguientes elementos son usados para definir las diferentes partes de un formulario.

<FORM> - Define un formulario en el documento.
<INPUT> - Define un control de ingreso de data.
<SELECT> - Define una lista de opciones.
<TEXTAREA> - Define un campo de texto multilínea.

Cada control es definido con los elementos INPUT, SELECT o TEXTAREA y deben contener minimo el parametro NAME con el que se identifica el elemento que será enviado. La sintaxis de envio de datos sera asi:

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

Es posible además diseñar un formulario que solicite un archivo texto como entrada, el cual puede haber sido previamente enviados al usuario 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.

Aunque el formulario esta diseñado basicamente para uso del raton, muchas plataformas 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.

1. Formulario <FORM>

Este elemento es usado 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.

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.

Si no se define este parámetro, se asumirá la dirección del propio documento.

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.

METHOD: Selecciona la forma de transmitir los pares nombre/valores ingresados en el formulario.

GET
Usa la función QUERY_STRING() para pasar la información como parámetros añadidor visibles en el URL. Soporta máximo 256 caracteres de parámetros. OMISION

POST
Usa la función STDIN() para transferir la información de 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.

ENCTYPE: Especifica el formato 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. Sus parametros son:
ParametroDescripcion
TYPEDefine el tipo de campo. Por omisión se usa TEXT, pero puedes usar cualquiera de los siguientes parámetros
NAMECadena. Nombre del elemento que sera pasado al hacer Sumit.
VALUECadena. Valor del elemento que sera pasado al hacer Sumit. Tambien usado como el valor inicial del elemento.
TITLETexto. Permite añadir un texto explicativo como tooltip.
TABINDEXNumero. Permite cambiar el orden natural de navegacion usando TAB.
SIZENumero. Tamaño visual del elemento
MAXLENGTHNumero. Numero maximo de caracteres aceptados. Si lo alcanza el tamaño visual hace scroll.
AUTOCOMPLETE
REQUIREDBoleano.
READONLYBoleano. Podras seleccioanrlo pero no cambiarlo. Solo para TEXT.
DISABLEDBoleano. Para desabilitar el control. Se mostrara gris.
CHECKEDBoleano.
AUTOFOCUSBoleano.
TEXT
Parámetro usado para mostrar un campo simple para ingresar una línea de texto. OMISION.

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

Introduce tu nombre:

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

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

Introduce tu clave:

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

URL
Ejemplo: <input type=url>

Ejemplo:

EMAIL
Ejemplo: <input type=email>

Ejemplo:

SEARCH
Ejemplo: <input type=search>

Ejemplo:

TEL
Ejemplo: <input type=tel>

Ejemplo:

NUMBER
Ejemplo: <input type=number value=57>

Ejemplo:

RANGE
Ejemplo: <input type=range min=0 max=100 step=10 value=30>

Ejemplo:

FILE
En accept tambien puedes usar: audio/*, image/* o video/* para aceptar cualquier formato MIME.

Ejemplo: <input type=file accept=".doc .docx .xml">

Ejemplo:

IMAGE
Ejemplo: <input type=image src=action.gif>

Ejemplo:

DATETIME
Ejemplo: <input type=datetime>

Ejemplo:

DATETIME-LOCAL
Ejemplo: <input type=datetime-local>

Ejemplo:

DATE
Ejemplo: <input type=date>

Ejemplo:

MONTH
Ejemplo: <input type=month>

Ejemplo:

WEEK
Ejemplo: <input type=week>

Ejemplo:

TIME
Ejemplo: <input type=time>

Ejemplo:

COLOR
Ejemplo: <input type=color>

Ejemplo:

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.

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.

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.

Ejemplo:

Moneda:<BR>
<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 opcion radio para distinguirlos.

Ejemplo:

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

Sexo:
Femenino
Masculino

RESET
Boton que limpia el formulario a los valor por defecto.
Ejemplo: <input type=reset>

Ejemplo:

SUBMIT
Es el boton predeterminado para inicar la accion definida en ACTION. Puede contener un NAME y un VALUE el cual ademas sera usado en reemplazo de la palabra Enviar usada por defecto en ausencia de VALUE.
Ejemplo: <input type=submit>

<input type=submit>

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.

3. 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 value=2 SELECTED>Fresa
   <OPTION value=3>Ron y pasas
   <OPTION value=4>Chocolate
</SELECT>

Es posible desabilitar una de las opciones con DISABLED en la etiqueta OPTION, asi como introducir un tooltip explicativo con TITLE.
En caso usar multiple el nombre de debe acabar con corchetes y las opciones elegidas se enviaran como matriz.
<SELECT NAME=Savor[] size=3 multiple=multiple>
   <OPTION value=1>Vainilla
   <OPTION value=2>Fresa
   <OPTION value=3>Ron y pasas
   <OPTION value=4>Chocolate
</SELECT>

4. Campo de texto área

<TEXTAREA>: Este etiqueta permite al usuario meter 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. 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.

Inicialmente los formularios fueron diseñados, para campos de texto multi-línea que eran soportados por el elemento TYPE=TEXT o TEXTAREA. Desafortunadamente, esto causo problemas en campos con textos largos. SGML HTML 2.0 limita el largo de textos a solo 1024 caracteres.

Netscape 2.0 introdujo el atributo WRAP en el elemento TEXTAREA, por lo que hoy es posible especificar el área de ingreso de texto y se producirá salto automático de línea.

<TEXTAREA WRAP=OFF> - Por omisión. No se produce saltos de línea automáticos y el texto es enviado exactamente como fue escrito.

<TEXTAREA WRAP=VIRTUAL> - Se usa salto de línea automático solo para mostrar el texto en pantalla, el texto realmente es enviado como una sola línea.

<TEXTAREA WRAP=PHYSICAL> - Se usa y envía el texto con saltos automáticos de línea.

5. 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 TYPE=submit><IMG SRC=imagen.gif></BUTTON>

Tambien puede contener los atributos NAME y VALUE.

6. Envio como parametro

TypeEnvio
textEste control siempre envia el contenido de value.
checkboxEste control solo envia el contenido de value si se marca la casilla. Si no tiene value envia on.
radioEste control solo envia el contenido de value si se marca algun radio. Si no tiene value envia on.
fileEste control siempre envia el contenido de value.
imageEste control siempre envia el contenido de value.
selectEste control siempre envia el contenido de value. Si no tiene value envia option.
hiddenEste control siempre envia el contenido de value.

Cuestionario de ejemplo ® © ™

Ejemplo 1

Por favor rellena este cuestionario:

Nombre:

Apellido:

Apodo:

Sexo:
Femenino

Masculino

Tu color preferido es:

Qué manual te gustó ?

HTML y CSS
JavaScript y jQuery
PHP y MySQL
Trucos de páginas Web

Gracias por responder 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

Es posible además diseñar un formulario que solicite un archivo texto como entrada, el cual puede haber sido previamente enviados al usuario para ser llenados fuera de línea. Un ejemplo es:

Nombre de archivo:

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:

Calificativos: y

Pon aquí tus comentarios:

Tu correo electronico: Opcional

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