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.
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:
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>No uses este código para un formulario de login. Los datos del formulario no serán encriptados y no viajaran de manera segura.
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:
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>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.
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:
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>En caso de que reemplazes la dirección email por la tuya recibirán un email con: 'size=(tamaño elegido) color=(color elegido)'.
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>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>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>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" />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=
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>Además, debo mencionar que cada cosa que escribas será mostrada dentro de la zona de texto.