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

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:

1.4 ACCEPT-CHARSET

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

Juego de caracteres
JuegoDescripción
UTF-8Caracteres Unicode
ISO-8859-1Caracteres del alfabeto latino

1.5 OTROS

Existen otros atributos de form que son muy populares.

Otros atributos de form
AtributoDescripción
autocompleteEspecifica si el navegador debe completar automáticamente el formulario (predeterminado: activado).
nameEspecifica un nombre utilizado para identificar el formulario (para uso DOM: document.forms.name).
novalidateEspecifica que el navegador no debe validar el formulario.
targetEspecifica el destino de la dirección en el atributo de acción (predeterminado: _self). Las opciones son: _blank | _self | _parent | _top
relEspecifica la relacion entre el enlace y el documento actual. Las opciones son: external | help | license | next | nofollow | noopener | noreferrer | opener | prev | search.

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.

Atributos de INPUT
AtributoDescripciónObsoleto
TYPEDefine el tipo de campo. Por omisión se usa TEXT, pero puedes usar cualquiera de los siguientes parámetrosNo
NAMECadena. Nombre del elemento que sera pasado al hacer SUBMIT. ObligatorioNo
VALUECadena. Valor del elemento que sera pasado al hacer SUBMIT. También usado como el valor inicial del elemento.No
MAXLENGTHNumero. Numero máximo de caracteres aceptados. Si no alcanza el tamaño visual hace scroll. Solo usado tipo TEXT.No
AUTOCOMPLETEBooleano, que indica que debe autocompletar texto.No
TITLETexto. Permite añadir un texto explicativo como tooltip.No
REQUIREDBooleano. Que es obligatorio su entrada.No
READONLYBooleano. Podrás seleccionarlo pero no cambiarlo. Solo para TEXT.No
DISABLEDBooleano. Para deshabilitar el control. Se mostrara gris.No
CHECKEDBooleano. Solo usado tipo CHECK y RADIO.No
SELECTEDBooleano. Solo usado tipo SELECT.No
TABINDEXNumero. Permite cambiar el orden natural de navegación usando TAB.Si
SIZENumero. Tamaño visual del elementoSi
AUTOFOCUSBooleano.No

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>
Atributos de TYPE=TEXT
AtributoDescripción
MAXLENGTHNumero. Numero máximo de caracteres.
SIZENumero. Especifica el ancho visible en caracteres.
VALUECadena. Valor predeterminado
NAMECadena. Nombre del control
PATTERNRegExp. Especifica caracteres aceptables en [] y numero en {}
TITLECadena. Ayuda al usuario con formato valido de PATTERN.
AUTOCOMPLETEBooleano. Determina que el navegador cliente ayuda autocompletando texto.
AUTOFOCUSBooleano. Determina que el foco esta en este control al iniciar pagina.
DISABLEDBooleano. Deshabilita el control.
READONLYBooleano. Solo lectura.
REQUIREDBooleano. Requerido.
PLACEHOLDERTexto que especifica una corta ayuda. Nuevo en HTML5
Introduce tu nombre: <INPUT TYPE=text NAME=nombre SIZE=10 MAXLENGTH=35 VALUE=Kike>

Introduce tu nombre:

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

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>
Atributos de TYPE=PASSWORD
AtributoDescripción
PATTERNRegExp. Especifica caracteres aceptables en [] y numero en {}
TITLECadena. Ayuda al usuario con formato valido de PATTERN.
MAXLENGTHNumero. Numero máximo de caracteres.
SIZENumero. Especifica el ancho visible en caracteres.
NAMECadena. Nombre del control
AUTOFOCUSBooleano. Determina que el foco esta en este control al iniciar pagina.
DISABLEDBooleano. Deshabilita el control.
READONLYBooleano. Solo lectura.
REQUIREDBooleano. Requerido.
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>

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.

Atributos de TYPE=HIDDEN
AtributoDescripción
NAMECadena. Nombre del control
VALUECadena. Valor del control
<INPUT TYPE=hiden NAME=clave VALUE=123>

2.4 URL

Es un control especifico para ingresar una URL.

Atributos de TYPE=URL
AtributoDescripción
PATTERNRegExp. Especifica caracteres aceptables en [] y numero en {}
TITLECadena. Ayuda al usuario con formato valido de PATTERN.
MAXLENGTHNumero. Numero máximo de caracteres.
SIZENumero. Especifica el ancho visible en caracteres.
VALUECadena. Valor predeterminado
NAMECadena. Nombre del control
AUTOCOMPLETEBooleano. Determina que el navegador cliente ayuda autocompletando texto.
AUTOFOCUSBooleano. Determina que el foco esta en este control al iniciar pagina.
DISABLEDBooleano. Deshabilita el control.
READONLYBooleano. Solo lectura.
REQUIREDBooleano. Requerido.
<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>

2.5 EMAIL

Es un control especifico para ingresar un correo electronico.

<INPUT TYPE=email>
Atributos de TYPE=EMAIL
AtributoDescripción
PATTERNRegExp. Especifica caracteres aceptables en [] y numero en {}
TITLECadena. Ayuda al usuario con formato valido de PATTERN.
MAXLENGTHNumero. Numero máximo de caracteres.
SIZENumero. Especifica el ancho visible en caracteres.
VALUECadena. Valor predeterminado
NAMECadena. Nombre del control
AUTOCOMPLETEBooleano. Determina que el navegador cliente ayuda autocompletando texto.
AUTOFOCUSBooleano. Determina que el foco esta en este control al iniciar pagina.
DISABLEDBooleano. Deshabilita el control.
READONLYBooleano. Solo lectura.
REQUIREDBooleano. Requerido.
<INPUT TYPE=email PATTERN="[a-z0-9._%+-][email protected]+[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>
Atributos de TYPE=SEARCH
AtributoDescripción
PATTERNRegExp. Especifica caracteres aceptables en [] y numero en {}
TITLECadena. Ayuda al usuario con formato valido de PATTERN.
MAXLENGTHNumero. Numero máximo de caracteres.
SIZENumero. Especifica el ancho visible en caracteres.
VALUECadena. Valor predeterminado
NAMECadena. Nombre del control
AUTOCOMPLETEBooleano. Determina que el navegador cliente ayuda autocompletando texto.
AUTOFOCUSBooleano. Determina que el foco esta en este control al iniciar pagina.
DISABLEDBooleano. Deshabilita el control.
READONLYBooleano. Solo lectura.
REQUIREDBooleano. Requerido.
<INPUT TYPE=search PATTERN="[^'\x22]+" TITLE="Invalid input">

Ejemplo:

2.7 TEL

Es un control especifico para ingresarun numero telefonico.

<INPUT TYPE=tel>
Atributos de TYPE=TEL
AtributoDescripción
PATTERNRegExp. Especifica caracteres aceptables en [] y numero en {}
TITLECadena. Ayuda al usuario con formato valido de PATTERN.
MAXLENGTHNumero. Numero máximo de caracteres.
SIZENumero. Especifica el ancho visible en caracteres.
VALUECadena. Valor predeterminado
NAMECadena. Nombre del control
AUTOCOMPLETEBooleano. Determina que el navegador cliente ayuda autocompletando texto.
AUTOFOCUSBooleano. Determina que el foco esta en este control al iniciar pagina.
DISABLEDBooleano. Deshabilita el control.
READONLYBooleano. Solo lectura.
REQUIREDBooleano. Requerido.
<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>
Atributos de TYPE=NUMBER
AtributoDescripción
MINNumero. Valor mínimo
MAXNumero. Valor máximo
STEPNumero. Intervalo legal
VALUENumero. Valor predeterminado
NAMECadena. Nombre del control
AUTOCOMPLETEON|OFF. Determina que el navegador cliente ayuda autocompletando texto.
AUTOFOCUSBooleano. Determina que el foco esta en este control al iniciar pagina.
DISABLEDBooleano. Deshabilita el control.
READONLYBooleano. Solo lectura.
REQUIREDBooleano. Requerido.
<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>
Atributos de TYPE=RANGE
AtributoDescripción
MINNumero. Valor mínimo
MAXNumero. Valor máximo
STEPNumero. Intervalo legal
VALUENumero. Valor predeterminado
NAMECadena. Nombre del control
AUTOFOCUSBooleano. Determina que el foco esta en este control al iniciar pagina.
DISABLEDBooleano. Deshabilita el control.
READONLYBooleano. Solo lectura.
REQUIREDBooleano. Requerido.
<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>
Parámetros de TYPE=FILE
ParámetroDescripción
ACCEPTCadena. Especifica el tipo de archivo que acepta como entrada.
NAMECadena. Nombre del elemento que sera pasado al hacer SUBMIT.
VALUECadena. Valor del elemento que sera pasado al hacer SUBMIT.
AUTOFOCUSBooleano. Determina que el foco esta en este control al iniciar pagina.
DISABLEDBooleano. Para deshabilitar el control. Se mostrara gris.
<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>
Atributos de TYPE=IMAGE
AtributoDescripción
SRCCarácter. Especifica URL de imagen a mostrar.
WIDTHPixeles. Especifica el ancho de la imagen.
HEIGHTPixeles. Especifica el alto de la imagen.
ALTCarácter. Texto alternativo a la imagen.
<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>
Parámetros de TYPE=DATETIME
ParámetroDescripción
PATTERNRegExp. Especifica caracteres aceptables en [] y numero en {}
TITLECadena. Ayuda al usuario con formato valido de PATTERN.
NAMECadena. Nombre del elemento que sera pasado al hacer SUBMIT.
VALUECadena. Valor del elemento que sera pasado al hacer SUBMIT.
AUTOFOCUSBooleano. Determina que el foco esta en este control al iniciar pagina.
DISABLEDBooleano. Para deshabilitar el control. Se mostrara gris.
<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>
Parámetros de TYPE=COLOR
ParámetroDescripción
NAMECadena. Nombre del elemento que sera pasado al hacer SUBMIT.
VALUECadena. Valor del elemento que sera pasado al hacer SUBMIT.
DISABLEDBooleano. Para deshabilitar el control. Se mostrara gris.
<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>
Parámetros de TYPE=CHECKBOX
ParámetroDescripción
NAMECadena. Nombre del elemento que sera pasado al hacer SUBMIT.
VALUECadena. Valor del elemento que sera pasado al hacer SUBMIT.
CHECKEDBooleano. Para indicar opción predeterminada.
DISABLEDBooleano. Para deshabilitar el control. Se mostrara gris.

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>
Parámetros de TYPE=RADIO
ParámetroDescripción
NAMECadena. Nombre del elemento que sera pasado al hacer SUBMIT.
VALUECadena. Valor del elemento que sera pasado al hacer SUBMIT.
CHECKEDBooleano. Para indicar opción predeterminada.
DISABLEDBooleano. Para deshabilitar el control. Se mostrara gris.
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>
Atributos de TYPE=BUTTON
AtributoDescripción
NAMECadena. Nombre del control
VALUECadena. Valor del control

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>
Atributos de TYPE=RESET
AtributoDescripción
NAMECadena. Nombre del control
VALUECadena. Valor del control
<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>
Atributos de TYPE=SUBMIT
AtributoDescripción
NAMECadena. Nombre del control
VALUECadena. Valor del control
<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:

Atributos LABEL
AtributoDescripción
FORCadena. Debe coincidir con ID de un elemento.
FORMEspecifica a qué formulario pertenece la etiqueta.
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 ?




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 ?

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>
Atributos BUTTON
AtributoDescripción
NAMECadena. Nombre del control
TYPEsumit|reset. Valor del control
AUTOFOCUSBooleano. Especifica que el área debe tener el foco al abrir pagina
REQUIREDBooleano. Debe ser rellenado
DISABLEDBooleano. Deshabilitado
<BUTTON>Hola mundo</BUTTON>

Ejemplo 1:

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

Ejemplo 2:

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

Ejemplo 3:

5. List

Muestra una lista de opciones predefinidas.

Atributos LIST
AtributoDescripción
NAMECadena. Nombre del control
VALUECadena. Valor del control
AUTOFOCUSBooleano. Especifica que el área debe tener el foco al abrir pagina
REQUIREDBooleano. Debe ser rellenado
DISABLEDBooleano. Deshabilitado
<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.

Atributos de SELECT
AtributoDescripción
MULTIPLEBooleano. Especifica si es de selección múltiple.
SIZENumero. En selección múltiple el numero de opciones visibles.
NAMECarácter. Especifica el nombre.
AUTOFOCUSBooleano. Especifica que el área debe tener el foco al abrir pagina
REQUIREDBooleano. Debe ser rellenado
DISABLEDBooleano. Deshabilitado
Atributos de OPTION
AtributoDescripción
VALUECarácter. Valor de esta opción.
LABELCarácter. Etiqueta para la opción.
SELECTEDBooleano. Opción preseleccionada.
DISABLEDBooleano. Opción deshabilitada.

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>

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>

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.

Atributos de TEXTAREA
AtributoDescripción
NAMECaracteres. Especifica el nombre del control.
COLSNumero de columnas. Ancho del área.
ROWSNumero de filas. Alto del área.
MAXLENGTHMáximo numero de caracteres permitidos.
MINLENGTHMínimo numero de caracteres que se debe insertar.
WRAPHARD, el navegador cliente insertar automáticamente caracteres de nueva línea (CR+LF) para que ninguna línea tenga más anchura que la del control; el atributo cols debe estar especificado.
SOFT, el navegador cliente asegura que todas las nuevas líneas constan de la pareja de caracteres CR+LF, pero no insertar nuevas líneas adicionales.
AUTOFOCUSBooleano. Especifica que el área debe tener el foco al abrir pagina
AUTOCOMPLETEOFF: El usuario debe explícitamente introducir el valor del campo para cada uso, o el documento proporciona su propio método de auto-completado; el navegador no completa automáticamente.
ON: El navegador puede completar automáticamente el valor basándose en valores que el usuario haya insertado durante usos previos.
REQUIREDBooleano. Debe ser rellenado.
READONLYBooleano. Solo lectura. Al contrario que el atributo DISABLED, el atributo READONLY no evita que el usuario haga click o seleccione el control. El valor de este parámetro se envía con el formulario.
DISABLEDBooleano. Deshabilitar elemento.
DIRNAMECaracteres. La dirección del texto debe ser enviada
SPELLCHECKBooleano. Un valor true en este atributo indica que el elemento necesita tener habilitado el corrector ortográfico y gramatical. El valor default indica que el elemento va a comportarse de acuerdo al comportamiento por defecto, basado en el spellcheck del padre. El valor false indica que no se deben hacer esas comprobaciones.
FORMCaracteres. Especifica uno o mas formulario a los que pertenece el textarea
PLACEHOLDERCaracteres. Se puede añadir un indicación para el usuario que defina que se debe insertar en el control. Los CR y las nuevas líneas dentro los marcadores de posición deben ser tratado como nuevas líneas al representar dicha indicación.
<TEXTAREA ROWS=4 COLS=50>Este texto es predeterminado.</TEXTAREA>

Ejemplo:

8. KEYGEN

Atributos de KEYGEN
AtributoDescripción
KEYTYPErsa. Usuario puede tener una opción de la fortaleza RSA.
dsa. Usuario puede tener la opción de tamaño de clave DSA.
ec. Usuario puede tener la opción de fortaleza de clave CE.
CHALLENGEEspecifica el valor de KeyGen debe cumplir antes de enviar.
FORMForm ID. Especifica el o los formularios afectados.
NAMECarácter. Especifica el nombre.
AUTOFOCUSBooleano. Especifica que este control debe tener el foco al abrir pagina
DISABLEDBooleano. Control deshabilitado
Elemplo<br>
<FORM ACTION=action.php METHOD=get>
Usuario: <INPUT TYPE=text NAME=nom><br>
Encryption: <keygen NAME=sec>
<INPUT TYPE=submit>
</FORM>

Elemplo

Usuario:
Encryption:

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

Valores para pattern
PatternDescripción
{n}Especifica n caracteres.
{n,}Especifica n o mas caracteres.
{min-max}Especifica el numero min y max de caracteres.
[A-Za-z]Se acepta solo letras tanto mayúsculas como minúsculas.
[0-9]Acepta dígitos
(x|y)Es para representar alternativas x o y.
Modificadores
ModificadorDescripción
iBúsqueda sensitiva a mayúsculas/minúsculas
gBúsqueda global
mBúsqueda múltiple
n+Por lo menos una n
n*ninguna o mas ocurrencias de n
n?ninguna o una ocurrencia
\dDigito
\sEspacio
\b
\uxxxxCarácter especificado por xxxx (Hex)

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.

Cuando se envía el VALUE
TypeCuando se envía VALUE
textEste control siempre envía el contenido de VALUE.
hiddenEste control siempre envía el contenido de VAlUE.
checkboxEste control solo envía el contenido de VALUE si se marca la casilla. Si no tiene VALUE envía on.
radioEste control solo envía el contenido de VALUE si se marca algún radio. Si no tiene VALUE envía on.
fileEste control siempre envía el contenido de VALUE.
imageEste control siempre envía el contenido de VALUE.
selectEste control siempre envía el contenido de VALUE. Si no tiene VALUE envía OPTION.

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


11. Ejemplos finales

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 electrónico: Opcional

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