FORMULARIOS
Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios de nuestro site. Los formularios html están compuestos por campos de texto y botones.
Una vez el usuario ha rellenado el formulario e introducido los valores en los campos, éstos son enviados para poder procesarlos. El envío de estos datos puede hacerse a un correo electrónico o a un programa que procese toda la información y nos ayude a hacer un seguimiento.
Los formularios son un tag más de html y, como todos los tags, debe ir indicado mediante una etiqueta. La etiqueta de los formularios es <form> y su cierre </form>. Todo lo que vaya dentro de estas etiquetas, serán partes del formulario.
La etiqueta <form> tiene una serie de atributos básicos que vamos a pasarte a explicar a continuación.
action
El atributo “action” indica el tipo de acción que va a realizar el formulario. Anteriormente indicamos que la información podía enviarse a un correo electrónico o a un programa que la gestione. Es mediante esta etiqueta que se gestionan los formularios.
Si queremos que el formulario se envíe a un correo, la acción quedaría escrita de la siguiente manera: <form action=mailto:direcciondelcorreo@correo.com…></form>. Este tipo de envíos se utilizarían para casos de formularios de contacto, de sugerencias, etc.
Si lo que queremos es que la información sea enviada a un programa que la gestione, debemos indicarle en la acción, la url del archivo donde se encuentra ubicado el programa que la gestionará. Lo escribiríamos de la siguiente manera: <form action="dirección completa del archivo que la gestionará" ...> </form>. Este tipo de envíos se utilizarían para casos de formularios de encuestas, cuestionarios, etc.
method
Mediante este atributo le indicamos al formulario la forma en la que el formulario será enviado. Existen dos valores posibles: get y post.
El valor get es el valor por defecto. Si no concretamos el method, la información se enviará a través de este medio.
“get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &.
Un ejemplo de un formulario enviado por el method=“get” sería el siguiente: http://www............?nombre1=valor1&nombre2=valor2
El valor post indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición.
enctype
Mediante este atributo indicaremos la forma en la que viajará la información que se mande a través del formulario.
La forma puede ser de varios tipos, aunque el más común es que la información se envíe como texto plano (enctype="text/plain").
Una vez vistos estos tres atributos, veremos como quedaría el código de un formulario estándar a un correo eléctrónico:
| <form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> </form> |
Formularios II: campos de texto.
| Los campos de entrada de los formularios se definen mediante el tag <input> y sus diferentes valores. Estos valores nos permiten utilizar varios tipos de cajas y de formas.
Vamos a ver a continuación distintos tipos de cajas y veremos como varían sus características.
Las cajas de texto básicas: <input type= “text”>
La caja de texto básica se escribiría de la siguiente forma:
y su apariencia sería la siguiente:
Hemos visto como el type= “text” le da a la caja una apariencia sencilla. Este tipo de campos se usan para albergar informaciones cortas y concretas.
Podemos completar el estilo de esta caja gracias a los siguientes atributos:
size: mediante el atributo size podemos definir el tamaño de la caja. Es decir, la apariencia de la misma. Si el texto que vamos a escribir no cabe en la caja, éste se desplazará pero sin que la caja varíe su tamaño. El texto irá desapareciendo por la izquierda.
maxlength: Este atributo nos sirve para definir la cantidad máxima de letras que se pueden escribir en la caja. No se podrán escribir en la caja más caracteres que los indicados por el maxlength.
value: Define si queremos que en la ventana haya un texto ya preescrito. Este texto puede ayudar al usuario a saber cúal es el tipo de dato que te piden en ese campo.
name: para ponerle un nombre al campo. Esto resulta muy útil a la hora de gestionar la información que nos llegue.
Mira el siguiente código:
Aquí vemos un tipo de caja “text” con un tamaño de 15 y un límite de caracteres de 30. Además, tiene un texto preescrito en él. El resultado sería el siguiente:
Campos de texto largo: <textarea>
Un <textarea> es como una caja de texto sencilla, tipo “text”, pero en la que dejamos al usuario espacio de sobra para poder escribir un texto largo. Son útiles para que el usuario contacte con nosotros, plantee sus dudas o sugerencias, etc.
Su etiqueta es <textarea> y su correspondiente cierre </textarea>. Todo lo que vaya dentro de estas etiquetas formará parte del texto.
Sus atributos básicos son “rows” y “cols” que servirán para definir el tamaño del textarea. Además, no debemos olvidar el atributo “name”, que servirá para definir el nombre de este campo.
Un textarea llamado “comentarios” y con unas dimensiones de 10 filas y de 40 columnas, tendría el código siguiente:
Y se vería de la siguiente forma:
Textos con passwords
En muchos formularios se piden datos personales que el usuario no quiere que se lean a su alrededor: contraseñas, etc. Para ello debemos crear una caja que no muestre los datos que se escriben en ella y que los codifique. Esto es más sencillo de lo que parece.
El siguiente código es de un campo con datos codificados:
Y este sería el resultado obtenido:
|
No hay comentarios:
Publicar un comentario