Forma Ejemplo HTML

El elemento <form>
El HTML <form> define un formulario que se utiliza para recolectar
informacin del usuario:

Un formulario HTML contiene elementos de formulario.

Los elementos de formulario son diferentes tipos de elementos de entrada,
al igual que los campos de texto, casillas de verificacin, botones de
radio, someterlo botones, y ms

Entrada de texto
<Input type = "text"> define un campo de entrada de una lnea para la
introduccin de texto

As es como se vera en un navegador:

Entrada de botn de radio

<Input type = "radio"> define un botn de radio.
Los botones de radio permiten a un usuario seleccionar una de un nmero
limitado de opciones:

As es como el cdigo HTML anterior se muestra en un navegador

__
El botn Enviar
<Input type = "submit"> define un botn para enviar los datos del
formulario a un formulario-gua.
La forma-controlador es tpicamente una pgina del servidor con una
secuencia de comandos para el procesamiento de datos de entrada.
La forma-controlador se especifica en el atributo action del formulario:

As es como el cdigo HTML anterior se muestra en un navegador:

El atributo action
El atributo de accin define la accin que se realiza cuando se enva el
formulario.
Normalmente, los datos del formulario se enva a una pgina web en el
servidor cuando el usuario hace clic en el botn de envo.
En el ejemplo anterior, los datos del formulario se enva a una pgina en
el servidor llamado "action_page.php". Esta pgina contiene un script del
lado del servidor que gestiona los datos del formulario:

Si se omite el atributo de accin, la accin se establece en la pgina

actual.
_
El atributo del mtodo
El atributo del mtodo especifica el mtodo HTTP (GET o POST) para ser
utilizado al presentar los datos del formulario:

Cundo utilizar GET?

El mtodo por defecto al presentar los datos del formulario es GET.
Sin embargo, cuando se utiliza GET, los datos de formularios presentados
sern visibles en el campo de direccin de la pgina:

Nota: GET no deben utilizarse cuando se enva informacin sensible! GET

es el ms adecuado para cortos perodos, no sensibles, de los datos, ya
que tiene limitaciones de tamao tambin.
__
Cundo utilizar la POST?
Siempre use POST si los datos del formulario contiene informacin
confidencial o personal. El mtodo POST no muestra los datos del
formulario presentado en el campo de direccin de pgina.
Entrada no tiene ninguna limitaciones de tamao, y se puede utilizar para
enviar grandes cantidades de datos.
CUANDO Como utilizar la entrada?
Siempre use Mensaje si los Datos del Formulario Contiene Informacin
confidencial o personal. El Mtodo POST No Muestra los Datos del
Formulario Presentado en el campo de Direccin de pgina.
Entrada no Tiene Ninguna Limitaciones de Tamao, Y SE Puede Como utilizar
para enviar Grandes Cantidades de Datos.

Si hace clic en el botn "Enviar", los-datos del formulario se enviarn a

una pgina llamada "action_page.php".
Observe que no se presentar el valor del campo "Nombre", debido a que el
elemento de entrada no tiene un atributo de nombre.
La agrupacin de formulario de datos con <fieldset>
El elemento <fieldset> se utiliza para los datos relacionados con el
grupo en un formulario.
La <legend> define un ttulo para el elemento <fieldset>.

Aqu est la lista de <form> Atributos:

Elementos de formulario HTML

El elemento <input>
El elemento de forma ms importante es el elemento <input>.
El elemento <input> se pueden visualizar de varias formas, dependiendo
del tipo de atributo.
Todos los diferentes tipos de entrada estn cubiertas en el siguiente
captulo.
El elemento <select>
El elemento <select> define una lista desplegable:

Los elementos <option> define una opcin que se puede seleccionar.

De forma predeterminada, se selecciona el primer elemento de la lista
desplegable.
Para definir una opcin de pre-seleccionada, agregue el atributo
seleccionado para la opcin:

La <textarea> Element
El elemento <textarea> define un campo de entrada de varias lneas (un
rea de texto):

Las filas atributo especifica el nmero de lneas visibles en un rea de

texto.
El atributo cols especifica el ancho visible de un rea de texto.
As es como el cdigo HTML anterior se muestra en un navegador:

El botn <> Elemento

El botn <> define un botn que se pulse:

Elementos de formulario HTML 5

HTML5 aade los siguientes elementos de formulario:

<datalist>

<keygen>

<output>

Nota: Los navegadores no muestran elementos desconocidos. Nuevos

elementos que no son compatibles con los navegadores ms antiguos
no "destruir" a su pgina web.
HTML5 <lista de datos> Element
El elemento <lista de datos> especifica una lista de opciones
predefinidas para un elemento <input>.
Los usuarios podrn ver una lista desplegable de las opciones
predefinidas, ya que los datos de entrada.
El atributo de lista del elemento <input>, debe hacer referencia al
atributo id del elemento <lista de datos>.

HTML5 <keygen> Element

El propsito del elemento <keygen> es proporcionar una forma segura para
autenticar usuarios.
El elemento <keygen> especifica un campo generador de par de claves en un
formulario.
Cuando se enva el formulario, dos claves se generan, una privada y una
pblica.

La clave privada se almacena localmente, y la clave pblica se enva al

servidor.
La clave pblica se podra utilizar para generar un certificado de
cliente para autenticar al usuario en el futuro.

HTML5 <output> Element

El elemento <output> representa el resultado de un clculo (como uno
realizado por un guin).

Elementos de formulario HTML

_________________________________________________________________________
Tipos de entrada HTML
En este captulo se describen los diferentes tipos de entrada para el
elemento <input>.

Tipo de entrada de texto

nput Tipo contrasea

<Input type = "password"> define un campo de contrasea:

Tipo de entrada Enviar

<Input type = "submit"> define un botn para enviar los datos del
formulario a un formulario-gua.
La forma-controlador es tpicamente una pgina del servidor con una
secuencia de comandos para el procesamiento de datos de entrada.
La forma-controlador se especifica en el atributo action del formulario:

If you omit the submit button's value attribute, the button will get a
default text:

Tipo de entrada Reset

<Input type = "reset"> define un botn que reiniciar todos los valores
del formulario a sus valores por defecto:

Si cambia los valores de entrada y haga clic en el botn "Reset", las

form-data se restablecern a los valores predeterminados.
Tipo de entrada Radio
<Input type = "radio"> define un botn de radio.
Los botones de radio permiten al usuario seleccionar slo una de un
nmero limitado de opciones:

Tipo de entrada de casilla de verificacin

<Tipo "casilla de verificacin" de entrada => define una casilla de
verificacin.
Las casillas de verificacin permite que un usuario seleccione cero o ms
opciones de un nmero limitado de opciones.

Tipo de entrada del botn

<Input type = "button"> define un botn:

Tipos de entrada HTML5

HTML5 aade varios tipos de entrada nuevos:
HTML5 Input Types
HTML5 added several new input types:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url

week
Nuevos tipos de entrada que no son compatibles con navegadores antiguos
se comportarn como <input type = "text">.
Nuevos tipos de entrada que no son compatibles con navegadores antiguos
se comportarn como <input type = "text">.

Las restricciones de entrada

Aqu est una lista de algunas restricciones de entrada comn (algunos
son nuevos en HTML5):

Va a aprender ms acerca de las restricciones de entrada en el siguiente

captulo.
El siguiente ejemplo muestra un campo de entrada numrico, donde se puede
introducir un valor de 0 a 100, en pasos de 10. El valor predeterminado
es de 30:

ipo de entrada Fecha

La <input type = "fecha"> se utiliza para campos de entrada que deben
contener una fecha.

Tambin pueden agregar restricciones para las fechas:

Tipo de entrada de Color

La <input type = "color"> se utilizaci para campos de entrada Que Deben
Contener el color de las Naciones Unidas.
En Funcin de Soporte de los Navegadores, ONU selector de colores PUEDE
Aparecer en el Campo de entrada.

Tipo de entrada Rango

La <input type = "gama"> se utiliza para campos de entrada que deben
contener un valor dentro de un rango.
En funcin de soporte de los navegadores, el campo de entrada se puede
mostrar como un control deslizante.

Se pueden utilizar los siguientes atributos para especificar

restricciones: min, max, paso, de valor.
Tipo de entrada Mes
La <input type = "mes"> permite al usuario seleccionar un mes y ao.
En funcin de soporte de los navegadores, un selector de fecha puede
aparecer en el campo de entrada.

Tipo de entrada Semana

La <input type = "semana"> permite al usuario seleccionar una semana y el
ao.
En funcin de soporte de los navegadores, un selector de fecha puede
aparecer en el campo de entrada.

Tipo de entrada Tiempo

La <input type = "tiempo"> permite al usuario seleccionar una hora (sin
zona horaria).

En funcin de soporte de los navegadores, un selector de hora puede

aparecer en el campo de entrada.

Tipo de entrada de fecha y hora local

La <input type = "datetime-local"> especifica un campo de entrada de
fecha y hora, sin zona horaria.
En funcin de soporte de los navegadores, un selector de fecha puede
aparecer en el campo de entrada.

Tipo de entrada de correo electrnico

La <input type = "email"> se utiliza para campos de entrada que debe
contener una direccin de correo electrnico.
Dependiendo del soporte del navegador, la direccin de correo electrnico
se puede validar de forma automtica cuando se presente.
Algunos telfonos inteligentes reconocen el tipo de correo electrnico, y
agrega ".com" al teclado para que coincida con la entrada de correo
electrnico.

Tipo de entrada Buscar

La <input type = "buscar"> se utiliza para campos de bsqueda (un campo
de bsqueda se comporta como un campo de texto normal).

Tipo de entrada Tel

La <input type = "tel"> se utiliza para campos de entrada que deben
contener un nmero de telfono.
El tipo de telfono es compatible actualmente slo en Safari 8.

Tipo de entrada de URL

La <input type = "url"> se utiliza para campos de entrada que deben
contener una direccin URL.
En funcin de soporte de los navegadores, el campo URL se puede validar
de forma automtica cuando se presente.
Algunos telfonos inteligentes reconocen el tipo de URL, y aade ".com"
al teclado para que coincida con la entrada de URL.

El valor del atributo

El atributo value especifica el valor inicial de un campo de entrada:

El atributo de slo lectura

El atributo de slo lectura especifica que el campo de entrada es de slo
lectura (no se puede cambiar):

El atributo disabled
El atributo disabled especifica que el campo de entrada est desactivada.
Un campo de entrada de personas con discapacidad es inutilizable y poco
se puede hacer clic, y su valor no ser enviado al presentar el
formulario:

El tamao Attribute
El atributo de tamao especifica el tamao (en caracteres) para el campo
de entrada:

El maxlength Atributo
El atributo maxlength especifica la longitud mxima permitida para el
campo de entrada:

Con un atributo maxlength, el campo de entrada no aceptar ms que el

nmero de caracteres permitidos.

El atributo maxlength no proporciona ninguna retroalimentacin. Si desea

alertar al usuario, debe escribir cdigo JavaScript.
Nota: Las restricciones de entrada no son infalibles, y JavaScript ofrece
muchas maneras de agregar la entrada ilegal. Para restringir la entrada
de forma segura, se debe verificar por el receptor (el servidor), as!
Los atributos de HTML5
HTML5 aade los siguientes atributos para <input>:

autocomplete

autofocus

form

formaction

formenctype

formmethod

formnovalidate

formtarget

height and width

list

min and max

multiple

pattern (regexp)

placeholder

required

step

y los siguientes atributos de <form>:

autocomplete

novalidate

_
El Atributo de autocompletar
El atributo especifica si autocompletar un campo de formulario o de
entrada debe tener autocompletar encendido o apagado.
Cuando est en funcin de autocompletar, el navegador completar
automticamente los valores de entrada basada en los valores que el
usuario ha introducido antes.
Consejo: Es posible tener autocompletar "en" para el formulario, y "off"
para los campos de entrada especficos, o viceversa.
El atributo de autocompletar trabaja con <form> y la siguiente <input>
tipos: texto, bsqueda, URL, telfono, correo electrnico, contrasea,
datepickers, rango, y el color.

Consejo: En algunos navegadores puede que tenga que activar la funcin de

autocompletar para que esto funcione.
El atributo novalidate
El atributo novalidate es un <form> atributo.

Cuando est presente, novalidate especifica que los datos del formulario
no deben ser validados cuando se presente.

El enfoque automtico Atributo

El atributo autofocus especifica que el campo de entrada de forma
automtica debe obtener el foco cuando se carga la pgina.

La representacin de atributo
La forma atributo especifica una o ms formas de un elemento <input>
pertenece.
Consejo: para referirse a ms de una forma, utilice una lista separada
por espacios de identificadores de formulario.

El formAction Atributo
El atributo formAction especifica la URL de un archivo que va a procesar
el control de entrada cuando se enva el formulario.
El atributo formAction anula el atributo de accin del elemento <form>.
El atributo formAction se utiliza con type = "submit" y escriba =
"imagen".

El formenctype Atributo
El atributo formenctype especifica cmo los datos del formulario deben
ser codificados cuando se presente (slo para las formas con method =
"post").
El atributo formenctype anula el atributo enctype del elemento <form>.
El atributo formenctype se utiliza con type = "submit" y escriba =
"imagen".
Opera Safari Chrome Firefox Internet Explorer
Ejemplo
Enviar form-data que est codificado por defecto (el primer botn de
enviar), y codificado como (el segundo botn enviar) "multipart / formdata":

El atributo formmethod
El atributo formmethod define el mtodo HTTP para enviar form-data a la
URL de accin.
El atributo formmethod anula el atributo del mtodo del elemento <form>.
El atributo formmethod se puede utilizar con type = "submit" y escriba =
"imagen".

El atributo formnovalidate
El atributo formnovalidate anula el atributo novalidate del elemento
<form>.
El atributo formnovalidate se puede utilizar con type = "submit".

El atributo formtarget
El atributo formtarget especifica un nombre o una palabra clave que
indica dnde se debe mostrar la respuesta que se recibe despus de enviar
el formulario.
El atributo formtarget anula el atributo de destino del elemento <form>.
El atributo formtarget se puede utilizar con type = "submit" y escriba =
"imagen".

La altura y anchura Atributos

Los atributos de altura y anchura especifican la altura y la anchura de
un <input type = "image"> elemento.
Siempre especificar el tamao de las imgenes. Si el navegador no sabe el
tamao, la pgina parpadear mientras se cargan las imgenes.

La lista de atributos
El atributo de lista se refiere a un elemento <lista de datos> que
contiene opciones predefinidas para un elemento <input>.

Los mnimo y mximo Atributos

El mnimo y mximo atributos especifican los valores mnimo y mximo para
un elemento <input>.

El mnimo y mximo de los atributos de trabajo con los siguientes tipos

de entrada: nmero, variedad, fecha, fecha y hora local, el mes, la hora
y la semana.

El atributo mltiple
El atributo multiple especifica que se permite al usuario introducir ms
de un valor en el elemento <input>.
El atributo mltiple trabaja con los siguientes tipos de entrada: correo
electrnico y archivos.

El patrn de Atributo

El atributo patrn especifica una expresin regular que el valor de

<input> de elemento se compara.
El atributo patrn trabaja con los siguientes tipos de entrada: texto,
bsqueda, URL, telfono, correo electrnico y contrasea.
Consejo: Utilice el atributo de ttulo global para describir el patrn
para ayudar al usuario.
Consejo: Ms informacin acerca de las expresiones regulares en nuestro
tutorial JavaScript.

El marcador de posicin Atributo

El atributo marcador de posicin especifica un indicio de que describe el
valor esperado de un campo de entrada (un valor de muestra o una breve
descripcin del formato).
La pista se muestra en el campo de entrada antes de que el usuario
introduce un valor.
El atributo marcador de posicin funciona con los siguientes tipos de
entrada: texto, bsqueda, URL, telfono, correo electrnico, y
password.The marcador de posicin Atributo
El atributo marcador de posicin especifica un indicio de que describe el
valor esperado de un campo de entrada (un valor de muestra o una breve
descripcin del formato).
La pista se muestra en el campo de entrada antes de que el usuario
introduce un valor.
El atributo marcador de posicin funciona con los siguientes tipos de
entrada: texto, bsqueda, URL, telfono, correo electrnico y contrasea.

El atributo requerido
El atributo obligatorio especifica que un campo de entrada debe ser
completado antes de enviar el formulario.
El atributo requerido trabaja con los siguientes tipos de entrada: texto,
bsqueda, url, telfono, correo electrnico, contrasea, selectores de
fecha, nmero, casillas de verificacin, de radio y de archivo.

El paso Atributo
El atributo de paso se especifica los intervalos de nmeros legales para
un elemento <input>.
Ejemplo: Si el paso = "3", nmeros legales podran ser -3, 0, 3, 6, etc.
Consejo: El atributo de paso puede ser utilizado junto con el mximo y el
mnimo atributos para crear una gama de valores legales.
El atributo de paso funciona con los siguientes tipos de entrada: nmero,
variedad, fecha, fecha y hora local, el mes, la hora y la semana.

Opera Safari Chrome Firefox Internet Explorer

Ejemplo
Un campo de entrada con unos intervalos de nmeros legales especificados: