HTML - Formularios

  »   HTML  »   Tutorial HTML - Formularios

Los formularios son de las herramientas mas importantes utilizadas por un administrador web para reunir información importante sobre un usuario de Internet, información como e-mail, nombre, dirección, teléfono o cualquier otro tipo de información.

Basados en la necesidad, la información puede siempre ser almacenada en un archivo o base de datos, puedes hacer estadísticas. Puedes crear formularios de registro o suscripciones para la información presentada en tu página web, y muchas otras.

HTML - Campos de texto

Antes de entrar en detalles, tenemos que exponer un poco lo básico de un formulario HTML. Los campos de texto poseen unos pocos atributos que han sido mencionados desde el principio:

  • type - establece el tipo del campo de texto. Por ejemplo: texto, contraseña o botón de envío..
  • name - le da al campo de texto un nombre para poder hacer referencia a ese campo desde un lenguaje de servidor como por ejemplo PHP, se se encarga de recibir y procesar el valor del campo.
  • size - establece el tamaño del campo. Aunque se recomienda usar CSS ello.
  • maxlenght - el número máximo de caracteres que pueden ser introducidos.
html<form method="post" action="process.php">
	Nombre: <input type="text" size="10" maxlength="40" name="nombre"> <br />
	Contraseña: <input type="password" size="10" maxlength="10" name="contraseña">
</form>

Demo

Nombre:
Contraseña:

No uses este código para un formulario de login. Los datos del formulario no serán encriptados y no viajaran de manera segura.

HTML - Formularios Email

Ahora vamos a añadir el botón de enviar. Generalmente, el botón de enviar debería ser el último y suele tener el atributo value igual a "Enviar", "Enviar formulario" o algo similar.

Tambien debemos especificar un destino para los datos ingresados en el formulario, como también el modo de trasferencia. Esto puede hacerse añadiendo los siguientes atributos:

  • method - Usaremos el método post. Este envía el formulario con la información insertada sin mostrar los detalles del usuario.
  • action - Este se usa para especificar la URL hacia la que será enviada la información para ser procesada.
html<form method="post" action="process.php">
	Nombre: <input type="text" size="10" maxlength="40" name="nombre"><br />
	Contraseña: <input type="password" size="10" maxlength="10" name="contraseña"><br />
	
	<input type="submit" value="Enviar formulario">
</form>

Demo

Nombre:
Contraseña:

Para procesar los datos, una ves que el formulario se ha enviado, debes saber que se necesita conocimiento de un lenguaje de servidor tipo PHP, ASP, Ruby, Python o cualquier otro.

HTML - Botones de Radio

Los botones de radio son muy populares, útiles y fáciles de usar. El ejemplo mas usado sería una pregunta con mas de una opción de respuesta. Los atributos deben ser los siguientes:

  • value - especifica qué será enviado en caso de que el usuario selecciona ese valor concreto. Sólo se enviará un único valor.
  • name - determina a qué grupo de botones pertenece el botón seleccionado.
html<form method="post" action="mailto:youremail@email.com">

	¿Qué clase de zapatos llevas puestos ? <br />
	
	<label>Color:</label> <br />
	<input type="radio" name="color" value="dark">Oscuro <br />
	<input type="radio" name="color" value="light">Claro <br />
	
	<label>Tamaño:</label><br />
	<input type="radio" name="size" value="small">Pequeño <br />
	<input type="radio" name="size" value="average">Mediano <br />
	<input type="radio" name="size" value="big">Grande <br />

	<input type="submit" value="Enviar formulario">
</form>

Demo

¿Qué clase de zapatos llevas puestos ?

Oscuro
Claro

Pequeño
Mediano
Grande

En caso de que reemplazes la dirección email por la tuya recibirán un email con: 'size=(tamaño elegido) color=(color elegido)'.

HTML - Checkbox (Casilla de verificación)

Usar casillas de verificación o checkbox le permite al ususario escoger una, dos o más variantes de respuesta. Los atributos name y value se usan de la misma que para los botones radio.

html<form method="post" action="mailto:youremail@email.com">
	<p>¿Cual es tu color favorito?</p>

	<input type="checkbox" name="shoes" value="black">Negro <br/>
	<input type="checkbox" name="shoes" value="white">Blanco <br/>
	<input type="checkbox" name="shoes" value="gray">Gris <br/>
	<input type="checkbox" name="shoes" value="black&white ">Blanco y negro<br/>
	
	<input type="submit" value="Enviar formulario">
</form>

Demo

¿Cual es tu color favorito?

Negro
Blanco
Gris
Blanco y negro

HTML - Otros tipos de formularios - Listas

Otro modelo de formulario es la lista como puedes ver a continuación, en el cual el usuario selecciona una opción determinada que será enviada como la opción elegida.

html<form method="post" action="mailto:youremail@email.com">
	<p>Preferencias musicales</p>
	
	<select multiple name="music" size="4">
		<option value="emo" selected>Emo</option>
		<option value="metal/rock" >Metal/Rock</option>
		<option value="hiphop" >Hip Hop</option>
		<option value="ska" >Ska</option>
		<option value="jazz" >Jazz</option>
		<option value="country" >Country</option>
		<option value="classical" >Classical</option>
		<option value="alternative" >Alternative</option>
		<option value="oldies" >Oldies</option>
		<option value="techno" >Techno</option>
	</select> <br />
	
	<input type="submit" value="Enviar formulario">
</form>

Demo

Preferencias musicales


Otro modelo de formulario es el menú 'drop-down'. Este se visualiza como un campo, el cual mostrará una lista cuando se hace click sobre el.

html<form method="post" action="mailto:youremail@email.com">
	<p>¿Nivel de educación?</p>

	<select name="education">
		<option>Elegir</option>
		<option>Secundaria </option>
		<option>Universitaria</option>
		<option>Doctorado</option>
	</select> <br />
	
	<input type="submit" value="Enviar formulario">
</form>

Demo

¿Nivel de educación?


HTML - formulario Upload

Ante todo hay que decir que este formulario es sólo la interfaz, la parte visible con la cual el usuario estará interactuando. Para hacer un formulario de upload completo, son necesarios conocimientos y habilidades en PHP, ASP o cualquier otro lenguaje de servidor.

Un formulario Upload se compone de muchas partes. Comenzaremos por establecer el tamaño del archivo que deseamos subir. Esto se hace usando un campo oculto. Después de eso, crearemos el campo en el cual el usuario estará en capacidad de escribir la dirección del archivo o podrá buscarla desde una ventana de "explore".

html<input type="hidden" name="MAX_FILE_SIZE" value="100" />
<input name="file" type="file" />

Demo

HTML - Textarea, comentarios y campos de mensaje

Generalmente, las zonas de texto se usan para enviar comentarios. Blogs y foros son las principales páginas web que están usando esta clase de opciones. No obstante, hay varias páginas que están usando estas zonas de texto para descubrir la opinión de sus usuarios sobre tu tema especifico.

Para crear una zona de texto primero especificaremos los atributos de las filas y las columnas dentro de la etiqueta <textarea>. 'Rows' establecerá la altura del campo, y 'cols' el ancho del mismo. En el siguiente ejemplo hay 5 lineas de 20 caracteres cada una. Ademas, debemos especificar los atributos de la etiqueta wrap, estos son:

wrap=

  1. "off"
  2. "virtual"
  3. "physical"
html<form method="post" action="mailto:youremail@email.com">

	<textarea rows="5" cols="20" wrap="physical" name="comments">Escribe un comentario</textarea><br />
	<input type="submit" value="Enviar formulario">

</form>

Demo


Además, debo mencionar que cada cosa que escribas será mostrada dentro de la zona de texto.