Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Referencia HTML > Tags HTML > Tag HTML form

Bypass main content

Tag HTML form

Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML.

Bypass main content

Descripción

El elemento HTML form inserta un formulario en un documento. Un formulario, es un método que permite a los autores recolectar información de los visitantes, y puede proveer un conjunto de controles para cada necesidad (ver más en el tutorial "Formularios en HTML").

Cuando un visitante llega al formulario, sólo necesita llenar los campos y enviar el formulario, usualmente con un botón de envío. El formulario enviado es luego recibido y procesado por un agente procesador (usualmente un script del lado servidor) especificado en el valor del atributo "action" de este elemento.

En XHTML 1.0 el atributo "name" para este elemento ha sido desaprobado en favor del atributo "id". Su uso ya no es recomendable.

Ejemplos

El siguiente ejemplo muestra un formulario ejemplo.

Código
<form action="ejemplo.php">
<fieldset>
<legend>Información personal</legend>
Nombre: <input type="text" name="pnombre" />
Dirección: <input type="text" name="pdireccion" />
Teléfono: <input type="text" name="ptelefono" />
</fieldset>
<fieldset>
<legend>Información laboral</legend>
Dirección: <input type="text" name="ldireccion" />
Teléfono: <input type="text" name="ltelefono" />
</fieldset>
</form>
Vista
Información personal Nombre:
Dirección:
Teléfono:
Información laboral Dirección:
Teléfono:

Atributos

id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).

<p id="parrafo1">Este es el primer párrafo, llamado "parrafo1". Para cambiar dinámicamente sus prpiedades usa este identificador.</p>

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").

<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks... y es más importante que el anterior.</p>

style (style)

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.

Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".

<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido.</p>
<p>Y este es otro texto sin estilo.</p>

title (text)

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.

Código
<a title="HTMLQuick.com" href="http://www.htmlquick.com/es/">Código HTML</a>
Vista

lang (langcode)

Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".

Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es "xml:lang". Para compatibilidad con los dos tipos de estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo "lang" ha sido completamente reemplazado por "xml:lang" y su uso ya no es válido.

<p lang="en" xml:lang="en">This is a paragraph in English.</p>
<p lang="es" xml:lang="es">Este es un párrafo en español.</p>

dir

Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:

  • RTL: derecha a izquierda.
  • LTR: izquierda a derecha.
<q lang="he" dir="rtl">...una cita en Hebreo...</q>

action (uri)

apunta a un archivo que actúa de agente procesador para la información enviada por el formulario. este agente ptocesará la información del formulario como sea necesario (enciando un e-mail, guardando la información en una base de datos, etc.).

Si este atributo no está presente, el formulario no se enviará.

<form action="../guardar-informacion-usuario.php">
...Campos del formulario...
</form>

method

El atributo "method" establece cómo será enviada la información del formulario al agente procesador. Existen dos valores posibles para este atributo (insensibles a mayúsculas/minúsculas):

  • get: la información del formulario es agregada a la URI definida en el atributo "action" (por ejemplo, "manejador.php?pnombre=jhon&papellido=malcovich").
  • post: la información del formulario es agregada al cuerpo del mismo.
<form action="../guardar-informacion-usuario.php" method="post">
...Campos del formulario...
</form>

enctype (content-type)

Especifica el tipo de contenido de la información enviada, cuando el valor del atributo "method" es "post". Por ejemplo, el valor "multipart/form-data" es utilizado cuando los formularios permiten a los usuarios subir archivos.

el valor por defecto de este atributo es "application/x-www-form-urlencoded".

<form action="../guardar-informacion-usuario.php" method="post" enctype="multipart/form-data">
...Campos del formulario con subida de archivos...
</form>

accept (content-type)

Define una lista, separada por espacios y/o comas, de tipos de contenido que el agente procesador debería manejar correctamente.

Esto podría resultar útil al subir archivos, por ejemplo, para filtrar archivos en la coputadora cliente, que el agente no podrá manejar (por ejemplo, sólo permitir imágenes JPG ó GIF).

<form action="../guardar-informacion-usuario.php" method="post" enctype="multipart/form-data" accept="image/gif,image/jpg">
...Campos del formulario...
</form>

accept-charset (charset)

Define una lista, separada por espacios y/o comas, de conjuntos de caracteres que el agente procesador soporta correctamente.

<form action="../guardar-informacion-usuario.php" accept-charset="utf-8,iso-8859-1">
...Campos del formulario...
</form>

name (cdata)

Asigna un nombre al elemento para referencia futura.

En XHTML 1.0 el atributo "name" de este elemento ha sido desaprobado en favor del atributo "id", y en XHTML 1.1 es simplemente inválido. Por lo tanto, su uso ya no es recomendable.

<form name="formulario-de-contacto">
...Campos del formulario...
</fomr>

Eventos

  • onsubmit
  • onreset
  • onclick
  • ondblclick
  • onmousedown
  • onmouseup
  • onmouseover
  • onmousemove
  • onmouseout
  • onkeypress
  • onkeydown
  • onkeyup

Ve a la lista completa de eventos en HTML.

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona