Tag HTML form
Nota: Si no sabes lo que es un tag y/o cómo se debe utilizar, te recomendamos que leas nuestro tutorial "tags y atributos HTML" que puedes encontrar en nuestra sección de tutoriales HTML.
El tag
HTML from actúa como contenedor para controles. Los formularios son utilizados para colectar y procesar información ingresada por los usuarios, mediante sus controles. Los atributos del tag HTML form definen información significativa acerca de quién y cómo procesará su información, mientras que los controles se encargan de la entrada de datos. Un formulario puede tener muchos controles que pueden ser agrupados temáticamente con el
tag HTML fieldset.
El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en el documento y puede ser usado para referirse a ese elemento.
Ejemplo:
Comienzo del código
<p id="parrafo1">Este es el primer párrafo nombrado parrafo1. Para cambiar dinámicamente las propiedades del mismo usa este identificador.</p>
Fin del código
El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento está asociado. Una clase provee atributos visuales para los elementos.
Ejemplo:
Comienzo del código
<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" por Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" por Jhon L. Brooks... y es más importante que el anterior.</p>
Fin del código
Define un estilo visual para el elemento. Es una mejor práctica definir atributos en hojas de estilos externas agrupándolos en clases. Los atributos en el parámetro "style" deben preservar este orden "nombre : valor" y ser separados por un punto y coma.
Si estás escribiendo
código XHTML te recomendamos no utilizar este atributo y probar con las clases de hojas de estilo (con el atributo "class").
Ejemplo:
Comienzo del código
<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>
Fin del código
Indica un título para el elemento. Usado para dar una descripción acerca del elemento que es usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el elemento.
Ejemplo:
|
Código
|
Visualización
|
|
<a title="HTMLQuick.com" href="http://www.htmlquick.com">Código HTML</a>
|
Código HTML
|
Especifica el lenguaje del contenido de un elemento. El valor predeterminado es "desconocido".
Al escribir
código XHTML la sintaxis "xml:lang" representa una alternativa preferida en XHTML 1.0 y un reemplazo en XHTML 1.1 (por ejemeplo, xml:lang="en").
Ejemplo:
Comienzo del código
<p lang="en">This is a paragraph in english.</p>
<p lang="es">Este es un párrafo en español.</p>
Fin del código
dir
Especifica la dirección de texto del contenido y atributos del elemento, así como la direccionalidad de las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:
- RTL: Derecha a izquierda.
- LTR: Izquierda a derecha.
Ejemplo:
Comienzo del código
<q lang="he" dir="rtl">...Una cita en Hebreo...</q>Fin del código
Especifica el nombre del marco donde el documento de destino debería ser cargado. Ver la referencia del
tipo frame-target para más información.
Comienzo del código
Abre en nueva ventana: <a href="http://www.w3c.org" target="_blank">WWW Consortium</a>
Abre en un marco llamado "contenido" (el marco debe estar presente en el set de marcos actual): <a href="http://www.w3c.org" target="contenido">WWW Consortium</a>
Fin del código
action (uri)
Designa la ubicación del archivo que manejará las entradas del formulario. Los formularios son usualmente manejados por scripts del lado servidor.
Ejemplo:
Comienzo del código
<form action="manejador.php">Fin del código
method
El atributo "method" define cómo la información de un formulario es enviada al agente procesador. Existen dos valores posibles para este atributo (insensibles a mayúsculas/minúsculas):
- get: Los datos del formulario son agregados a la URI definida en el atributo "action" (por ejemplo, manejador.php?pnombre=jhon&papellido=malcovich).
- post: Los datos del formulario son agregados al cuerpo del formulario.
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" debería ser usado al enviar archivos mediante un formulario. El valor predeterminado es "application/x-www-form-urlencoded".
accept-charset (charset)
Define una lista, separada por espacios o comas, de set de caracteres. Esta lista debería contener los sets de caracteres que el agente procesador puede procesar.
Example:
Comienzo del código
<form accept-charset="iso-8859-1,UTF-8">Fin del código
accept
Define una lista separada por comas de tipos de contenido que el agente procesador manejará correctamente. Esto puede ser utilizado para filtrar archivos a enviar en el lado cliente (por ejemplo, solo permitir la subida de archivos de imagen comprimidos, como JPG y GIF).
Ejemplo:
Comienzo del código
<form accept="image/gif,image/jpg">Fin del código
Asigna un nombre de control al elemento.
- onmousedown
- onreset
- onclick
- ondblclick
- onmousedown
- onmouseup
- onmouseover
- onmousemove
- onmouseout
- onkeypress
- onkeydown
- onkeyup
Lista completa e información acerca de
eventos en HTML
Ejemplo simple de un formulario usado para validar la información de un usuario.
|
Código
|
Visualización
|
<form id="autform" action="autuser.asp" method="post">
<div><fieldset>
<legend>Info de usuario</legend>
Nombre de usuario: <input type="text" name="usuario" value="-" /><br />
Contraseña: <input type="password" name="contrasena" value="-" />
</fieldset>
<input type="button" value="Entrar" />
</div>
</form>
|
|
Un formulario utilizado para subir una imagen. Los formatos permitidos son GIF y JPEG.
|
Código
|
Visualización
|
<form id="imagenform" action="guardarimagen.php" method="post" enctype="multipart/form-data" accept="image/gif,image/jpg">
<div>
Picture: <input type="file" name="imagen" value="-" /><br />
<input type="button" value="Enviar" />
</div>
</form>
|
|
