• Home
• HTML
• CSS
• Herramientas

---

Virtualnauta > Tutorial HTML > Formularios HTML

HTML

Formularios en HTML

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

---

¿Para qué se usan los formularios?

Los formularios son usados para que el usuario ingrese datos.

Esos datos son enviados a un agente para que los procese (por ej., a un servidor web, a un servidor de correo, etc.).

---

La etiqueta form

Dentro de la etiqueta <form> se encuentra el formulario.
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)

Dentro de la etiqueta <form>, se encuentra el atributo action. Este nos especificará el documento que manejará el formulario completado y enviado.
Tambien contamos con el atributo method. El mismo nos define el método por el cual se enviarán los datos del usuario al servidor.

---

La etiqueta input

Nos define el registro donde el usuario puede ingresar los datos.
El atributo type especifica el tipo de control a crear.
Entre ellos se encuentran los siguientes valores:

Text

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

Nota: en este ejemplo podemos observar lo siguiente:

• action="datos.php" --> nos indica que el archivo datos.php es el encargado de manipular los datos que el usuario ingresó en el formulario
• method="get" --> nos indica que los datos del formulario se enviarán por el método get
• name="nombre" --> le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo

Radio botones

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

Nota: en este ejemplo podemos observar lo siguiente:

• action="edades.asp" --> nos indica que el archivo edades.asp es el encargado de manipular los datos que el usuario ingresó en el formulario
• method="post" --> nos indica que los datos del formulario se enviarán por el método post
• name="edad" --> debemos utilizar el mismo nombre(en este caso "edad") para todos los elementos del mismo control radio.
• value="mayor" --> define el valor del elemento <input>

Checkbox (casillas de verificación)

Permite al usuario elegir varias opciones entre todas las posibilidades.

Nota: en este ejemplo podemos observar lo siguiente:

• action="hobbie.php" --> nos indica que el archivo hobbie.php es el encargado de manipular los datos que el usuario ingresó en el formulario
• method="get" --> nos indica que los datos del formulario se enviarán por el método get
• name="pasa" --> debemos utilizar el mismo nombre(en este caso "pasa") para todos los elementos del mismo control checkbox.
• value="tv" --> define el valor del elemento <input>

Password

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

Submit

Botón de envio de datos del formulario.

Reset

Botón de reinicialización. Al ser pulsado reinicializa todos los controles a sus valores iniciales.

Nota: en este ejemplo podemos observar lo siguiente:

• action="datos_personales.php" --> nos indica que el archivo datos_personales.php es el encargado de manipular los datos que el usuario ingresó en el formulario
• method="post" --> nos indica que los datos del formulario se enviarán por el método post
• name="nombre" - name="secreto" --> le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo
• value="Enviar" --> define el texto del botón "submit"
• value="Borrar" --> define el texto del botón "reset"

---

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>

Nota: en este ejemplo podemos observar lo siguiente:

• action="continentes.php" --> nos indica que el archivo continentes.php es el encargado de manipular los datos que el usuario ingresó en el formulario
• method="get" --> nos indica que los datos del formulario se enviarán por el método get
• name="continente" --> le asigna un único nombre al menú desplegable
• value="america" --> define el valor del elemento <option>

---

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 tendra el recuadro del área de texto.

Nota: en este ejemplo podemos observar lo siguiente:

• action="texto.php" --> nos indica que el archivo texto.php es el encargado de manipular los datos que el usuario ingresó en el formulario
• method="post" --> nos indica que los datos del formulario se enviarán por el método post
• name="eltexto" --> le asigna un nombre al elemento textarea

---

Etiquetas y atributos de los formularios

Etiquetas	Atributos	Valor	Descripción	Ej
<form>			Define un formulario para el ingreso de datos.
	action Obligatorio	URL	Especifica un archivo procesador del formularios.
	accept	Lista de tipos de contenido	Especifica una lista de tipos de contenido separados por comas, que un servidor procesador de formularios manejará correctamente.
	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.
	enctype	tipo de contenido	Especifica el tipo de contenido usado para enviar el formulario al servidor.
	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.
		post	Debería usarse cuando el formulario causa efectos secundarios(p.ej., subscripción a un servicio o modificar una base de datos.
	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.
		_self	El URL se abrirá en el mismo frame donde fue apretado.
		_parent	El URL se abrirá en el frameset padre.
		_top	El URL se abrirá en una ventana de tamaño completo.
<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".
	align	left	Define el alineamiento del texto siguiente a la imagen. Nota: Usar solo con type="image".
		right
		top
		texttop
		middle
		absmiddle
		baseline
		bottom
		absbottom
	alt	texto	Define un texto alternativo para la imagen. Nota: Usar solo con type="imagen".
	checked		Especifica que el botón esta marcado("on"). Nota: Usar solo con type="radio" o type="checkbox".
	disabled		Deshabilita el control para la entrada de datos por parte del usuario. Nota: No debe usarse con type="hidden".
	maxlength	número	Número máximo de caracteres que puede introducir el usuario. Nota: Usar solo con type="text" o type="password".
	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".
	readonly		Indica que el valor no puede ser modificado por el usuario . Nota: Usar solo con type="text".
	size	número de caracteres	Define el tamaño del elemento input. Nota: No debe usarse con type="hidden".
	src	URL	Define el URL de la imagen a mostrar. Nota: Usar solo con type="image".
	type	checkbox	Especifica el tipo de control a crear.
		file
		hidden
		image
		password
		radio
		reset
		submit
		text
	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.
<textarea>			Define un área de texto(multi-línea).
	col Obligatorio	número	Número de columnas visibles en el área de texto.
	rows Obligatorio	número	Número de filas visibles en el área de texto.
	disabled		Deshabilita los controles de entrada.
	name	nombre del área de texto	Especifica un nombre para el área de texto.
	readonly		El usuario no puede modificar el contenido en el área de texto.
<label>			Adjunta información a los controles.
	for	idref	Referencia a una palabra ID definida por otro atributo.
<fieldset>			Dibuja un recuadro alrededor de los elementos.
<legend>			Permite a los autores asignar un título a un 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.
		bottom
		left
		right
<select>			Crea un menú desplegable.
	disabled		Deshabilita el menú.
	multiple		Si está activado permite selecciones múltiples.
	name	nombre	Define un único nombre para un menú desplegable.
	size	número	Define el número visible de Items en el menú desplegable.
<optgroup>			Permite a los autores agrupar opciones logicamente.
	label Obligatorio	texto	Especifica el rótulo del grupo de opción.
	disabled		Deshabilita los controles de entrada. No funciona en IE
<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>.
	disabled		Deshabilita los controles de opción. No funciona en IE
	selected		Especifica que opción aparecerá como seleccionada.
	value	texto	Especifica el valor inicial del control.
<button>			Define un botón.
	disabled		Deshabilita el botón.
	name	nombre	Especifica un nombre para el botón.
	type	button	Define el tipo de botón.
		reset
		submit
	value	valor	Asigna un valor inicial al botón.
<isindex> Desaprobado			Use <input> en su lugar.

Diseño dinámico de formularios

Ejemplo del uso de HTML y CSS para diseñar formularios.

Atributos estándard

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

Eventos intrínsecos

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 >>>

Los mejores 10 hostings

Buscando cual es el mejor hosting que existe en el mercado, me he topado con una gran cantidad de sitios que presentan un ranking de los 10 mejores hosting del mundo. Como cada uno tiene en su lista, diferentes empresas de alojamiento web, en un orden de ranking muy distinto, he decidido investigar cual era la mejor. continúe leyendo...

    Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.

Copyright 2007 - 2011 by Martín Solomiak. Todos los derechos reservados.

webmaster@virtualnauta.com

Mapa del sitio