Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532
Formularios HTML diseñe un formulario de contacto - Virtualnauta.com - Tutorial HTML

Formularios en HTML

Guía práctica de como diseñar los formularios HTML para tu sitio.


Los formularios

Los formularios son usados para que el usuario ingrese datos.

Esos datos son enviados a un documento, que se encuentra en un servidor, para que los procese (por ej., a un servidor web, a un servidor de email, etc.).


La etiqueta form

La etiqueta <form> se utiliza para definir un formulario.
El atributo action es obligatorio y nos indica el documento que procesará los datos del formulario enviado.
También contamos con el atributo method que nos define el método por el cual se enviarán los datos del usuario al servidor.

Sintaxis

<form action="URL" method="valor">
...
</form>

La etiqueta input

Nos define el registro donde el usuario puede ingresar los datos.
Los usuarios interaccionan con los formularios a través de las llamados controles.

Tipos de controles:

  • Botones (buttons)
  • Casillas de verificación (checkboxes)
  • Radiobotones (radio buttons)
  • Menúes (menus)
  • Entrada de texto (text input)
  • Selección de ficheros (file select)
  • Controles ocultos (hidden controls)
  • Controles tipo objeto (object controls)

El atributo type especifica el tipo de control a crear.

Sintaxis

</form>
<input type="control" atributo="valor">
</form>

El control "text"

Crea un control que nos permite ingresar un texto en una línea.

Ejemplo

Código
<form action="datos.php" method="get">
Nombre: <input type="text" name="nombre">
Apellido: <input type="text" name="apellido">
</form>
Resultado
Nombre:
Apellido:
Nota: la propiedad name le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo

El control "radio"

Se usa cuando queremos que el usuario elija una sola opción de entre una serie de posibilidades.

Ejemplo

Código
<form action="edades.asp" method="post">
¿Edad?
<input type="radio" name="edad" value="menor">menor de 17
<input type="radio" name="edad" value="adulto">entre 18 y 60
<input type="radio" name="edad" value="mayor">mayor de 61
</form>
Resultado
¿Edad?
menor de 17
entre 18 y 60
mayor de 61
Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de radio.
La propiedad value asigna un valor al elemento que será utilizado por el documento que procese el formulario.

El control "checkbox"

Permite al usuario elegir varias opciones entre todas las posibilidades.

Ejemplo

Código
<form action="hobbie.php" method="get">
¿Pasatiempos?
<input type="checkbox" name="pasa" value="tv">TV
<input type="checkbox" name="pasa" value="libros">Libros
<input type="checkbox" name="pasa" value="musica">Música
<input type="checkbox" name="pasa" value="otros">Otros
</form>
Resultado
¿Pasatiempos?
TV
Libros
Música
Otros
Nota: la propiedad name debe utilizar el mismo valor para todos los elementos de checkbox.
La propiedad value asigna un valor al elemento que será utilizado por el documento que procese el formulario.

El control "password"

Funciona igual que text, pero el texto introducido se presenta mediante una serie de puntitos. Es utilizado generalmente para ingresar contraseñas.

Ejemplo

Código
<form action="verificacion.php" method="post">
Nombre: <input type="text" name="nombre">
Password: <input type="password" name="pass">
</form>
Resultado
Nombre:
Password:

El control "submit" y el control "reset"

El control submit es el botón de envio de datos del formulario y el control reset es el botón de reinicialización. Al ser pulsado reinicializa todos los controles a sus valores iniciales.

Ejemplo

Código
<form action="datos_personales.php" method="post">
Nombre: <input type="text" name="nombre">
Contraseña: <input type="password" name="secreto">
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>
Resultado
Nombre:
Contraseña:
Nota: el valor de la propiedad value define el texto dentro del botón.

El control "file"

El control file nos permite enviar archivos por medio de un formulario.

Ejemplo

Código
<form action="archivo.php" method="post">
Ingrese la foto: <input type="file" name="foto">
</form>
Resultado
Ingrese la foto:

El control "hidden"

El control hidden nos permite enviar información oculta a los ojos del usuario.

Ejemplo

Código
<form action="oculto.php" method="post">
Nombre: <input type="text" name="nombre">
Contraseña: <input type="password" name="contra">
<input type="hidden" value="cookie">
</form>
Resultado
Nombre:
Contraseña:

El control "image"

El control image nos permite utilizar una imagen personalizada como botón de un formulario.

Ejemplo

Código
<form action="archivo.php" method="post">
Nombre: <input type="text" name="nombre">
Contraseña: <input type="password" name="contra">
<input type="image" src="/enviar.jpg">
</form>
Resultado
Nombre:
Contraseña:

Las etiquetas select y option

La etiqueta <select> es usada para crear un menú desplegable.
Cada opción ofrecida por el menú se representa con la etiqueta <option>

Ejemplo

Código
<form action="continentes.php" method="get">
<select name="continente">
<option value="america">América</option>
<option value="asia">Asia</option>
<option value="europa">Europa</option>
<option value="oceania">Oceanía</option>
<option value="africa">Africa</option>
</select>
</form>
Resultado

La etiqueta textarea

Se usa para crear un control de entrada de texto multilínea.
Los atributo rows y cols nos indican la cantidad de filas y columnas que tendrá el recuadro del área de texto.

Ejemplo

Código
<form action="texto.php" method="post">
<textarea name="eltexto" rows="5" cols="30">
Aquí podemos ingresar un texto introductorio si lo deseamos.
</textarea>
</form>
Resultado

Etiquetas y atributos de los formularios


EtiquetasAtributosValorDescripciónEj
<form> Define un formulario para el ingreso de datos.
action
Obligatorio
URL Especifica un archivo procesador del formularios. Ejemplo del uso del atributo action en el formulario
accept Lista de tipos de contenido Especifica una lista de tipos de contenido separados por comas, que un servidor procesador de formularios manejará correctamente. Ejemplo del uso del atributo accept para definir que tipo de contenido aceptará el formulario
accept-charset Lista de codificación de caracteres Especifica la lista de codificación de caracteres para los datos introducidos que son aceptados por el servidor que procesa este formulario. Ejemplo del uso del atributo accept-charset para definir que código de caracteres aceptará el formulario
enctype tipo de contenido Especifica el tipo de contenido usado para enviar el formulario al servidor. Ejemplo del uso del atributo enctype para subir archivos
method Especifica que método HTTP se usará para enviar el conjunto de datos del formulario.
get Debería usarse cuando los datos del formulario no tienen efectos secundarios. Ejemplo de como mandar un formulario por el método get
post Debería usarse cuando el formulario causa efectos secundarios(p.ej., subscripción a un servicio o modificar una base de datos. Ejemplo de como mandar un formulario por el método post
name cdata Da nombre al elemento de modo que se pueda hacer referencia a él desde hojas de estilos o scripts.
target _blank El URL se abrirá es una nueva ventana. Ejemplo que abrirá una nueva ventana al enviar el formulario
_self El URL se abrirá en el mismo frame donde fue apretado. Ejemplo que mostrará en el mismo frame los resultados, al enviar el formulario
_parent El URL se abrirá en el frameset padre. Ejemplo que mostrará los resultados en el frame padre al enviar el formulario
_top El URL se abrirá en una ventana de tamaño completo. Ejemplo que mostrará los resultados en una ventana de tamaño completo al enviar el formulario
<input> Define el tipo de control de entrada.
accept Lista de tipos de contenido Especifica una lista de tipos de contenido separados por comas, que un servidor procesador de formularios manejará correctamente.
Nota: Usar solo con type="file".
Ejemplo que muestra como subir imagenes en diferentes formatos
align left Define el alineamiento del texto siguiente a la imagen.
Nota: Usar solo con type="image".
Ejemplo mostrando un botón de enviar alineado a la izquierda
right Ejemplo mostrando un botón de enviar alineado a la derecha
top
texttop
middle
absmiddle
baseline
bottom
absbottom
alt texto Define un texto alternativo para la imagen.
Nota: Usar solo con type="imagen".
Ejemplo mostrando un botón y su texto alternativo
checked Especifica que el botón esta marcado("on").
Nota: Usar solo con type="radio" o type="checkbox".
Ejemplo de un menú checkbox con una de las opciones marcada
disabled Deshabilita el control para la entrada de datos por parte del usuario.
Nota: No debe usarse con type="hidden".
Ejemplo de como deshabilitar un campo de entrada
maxlength número Número máximo de caracteres que puede introducir el usuario.
Nota: Usar solo con type="text" o type="password".
Ejemplo de como limitar la cantidad de caracteres de un campo de entrada
name nombre de control Asigna el nombre de control.
Nota: Este atributo es requerido para type="button", type="checkbox", type="file", type="hidden", type="image", type="password", type="text", type="radio".
Ejemplo del uso del atributo name
readonly Indica que el valor no puede ser modificado por el usuario .
Nota: Usar solo con type="text".
Ejemplo de como mostrar un campo con un valor predefinido que no puede ser modificado
size número de caracteres Define el tamaño del elemento input.
Nota: No debe usarse con type="hidden".
Ejemplo de como definir el tamaסo del campo de entrada
src URL Define el URL de la imagen a mostrar.
Nota: Usar solo con type="image".
Ejemplo de como sustituir un botón submit por una imagen
type checkbox Especifica el tipo de control a crear. Ejemplo de un formulario checkbox
file Ejemplo de un formulario para enviar archivos
hidden Ejemplo de un formulario con un dato oculto
image Ejemplo de un formulario con un botón imagen en lugar del botón submit
password Ejemplo de un formulario con un campo de ingreso de un password
radio Ejemplo de un formulario radio
reset Ejemplo de un formulario con un botón reset
submit Ejemplo de un formulario con un botón submit
text Ejemplo de un formulario con un campo para ingreso de texto
value valor Para los botones:
reset y submit: define el texto en el botón.
checkbox y radio: (requerido) define el resultado del elemento input cuando es pulsado.
hidden, password y text: define el valor por defecto del elemento.
Ejemplo del uso del atributo value
<textarea> Define un área de texto(multi-línea).
col
Obligatorio
número Número de columnas visibles en el área de texto. Ejemplo mostrando el uso del atributo col para la etiqueta textarea
rows
Obligatorio
número Número de filas visibles en el área de texto. Ejemplo mostrando el número de filas para la etiqueta textarea
disabled Deshabilita los controles de entrada. Ejemplo de como deshabilitar el campo del textarea
name nombre del área de texto Especifica un nombre para el área de texto. Ejemplo de como determinar un nombre para el textarea
readonly El usuario no puede modificar el contenido en el área de texto. Ejemplo de como definir un campo del textarea con texto de solo lectura
<label> Adjunta información a los controles. Ejemplo de como seleccionar un checkbox presionando sobre las palabras
for idref Referencia a una palabra ID definida por otro atributo.
<fieldset> Dibuja un recuadro alrededor de los elementos. Ejemplo de como dibujar un recuadro alrededor del formulario
<legend> Permite a los autores asignar un título a un fieldset. Ejemplo que establece un título al fieldset
align
Desaprobado
top Especifica la posición de la leyenda con respecto al fieldset.Use las propiedades de ubicación de CSS en su lugar. Sin ejemplo
bottom Sin ejemplo
left Sin ejemplo
right Sin ejemplo
<select> Crea un menú desplegable.
disabled Deshabilita el menú. Ejemplo de un menת desplegable deshabilitado
multiple Si está activado permite selecciones múltiples. Ejemplo de un menת desplegable que permite una selección multiple
name nombre Define un único nombre para un menú desplegable. Ejemplo del uso del atributo name en un menת desplegable
size número Define el número visible de Items en el menú desplegable. Ejemplo de como definir la cantidad de Items a mostrar en un menת desplegable
<optgroup> Permite a los autores agrupar opciones logicamente.
label
Obligatorio
texto Especifica el rótulo del grupo de opción. Ejemplo de como definir rótulos dentro de un menת desplegable
disabled Deshabilita los controles de entrada. No funciona en IE Ejemplo de como deshabilitar un grupo de opciones en un menת desplegable
<option> Define una opción en los menús desplegables.
label texto Permite escribir de forma sintetizada el conternido del atributo <option>. El navegador debería mostrar este valor en lugar del contenido de <option>. Ejemplo del uso de un texto sintetizado para las opciones en un menת desplegable
disabled Deshabilita los controles de opción. No funciona en IE Ejemplo de como deshabilitar ciertas opciones en un menת desplegable
selected Especifica que opción aparecerá como seleccionada. Ejemplo de como preseleccionar una opción en un menת desplegable
value texto Especifica el valor inicial del control. Ejemplo que define un valor inicial de cada una de las opciones en un menת desplegable
<button> Define un botón.
disabled Deshabilita el botón. Ejemplo con el uso de todos los atributos de la etiqueta button
name nombre Especifica un nombre para el botón. Ejemplo con el uso de todos los atributos de la etiqueta button
type button Define el tipo de botón. Ejemplo con el uso de todos los atributos de la etiqueta button
reset Ejemplo con el uso de todos los atributos de la etiqueta button
submit Ejemplo con el uso de todos los atributos de la etiqueta button
value valor Asigna un valor inicial al botón. Ejemplo con el uso de todos los atributos de la etiqueta button
<isindex>
Desaprobado
Use <input> en su lugar. Sin ejemplo

Atributos estándard

id, class, title, style, dir, lang, acceskey, tabindex

Si desea una descripción completa, diríjase a: atributos estándard.

Eventos intrínsecos

onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur, onselect, onchange

Si desea una descripción completa, diríjase a: eventos intrínsecos.



<<< Ir a las listas en HTML Ir a la inserción de imágenes en HTML >>>

En la Web