Formularios HTML

En el post anterior de HTML vimos las tablas e imagenes, ahora toca el turno de los formularios.

Los formularios son el espacio dentro de una pagina en donde damos la opcion al usuario de capturar cierta información a traves del uso de botones, cuadros de texto y otros elementos.

Las etiquetas necesarias para la creacion de un formulario son:

<form>….</form>

Con esta etiqueta declaramos que vamos a crear un formulario y es en esta etiqueta donde tambien especificamos que es lo que va a pasar con la información capturada en el. Los atributos de la etiqueta <form> son:

action: Nos permite especificar a donde se enviara la información, lo cual puede ser a un archivo php, asp o simplemente a una dirección de correo.

method: Nos permite indicar el metodo que se usara para enviar la informacion, pudiendo ser «get» o «post», mas adelante veremos en que se diferencian ambos metodos.

id: Este atributo permite asignar un nombre o identificador al formulario, el cual sera de mucha utilidad al usar javascript y/o php

Este atributo se presenta de hecho en todas laas etiquetas html pero es precisamente en los formularios donde mas importancia cobra al igual que el atributo «name»

<input>

La etiqueta <input> nos permite agregar al formulario diferentes elementos segun el valor de su atributo type.

Cuadros de texto.

Los cuadros de texto son casillas para captura de información abierta, para su colocacion daremos al atributo «type» el valor «text», de forma opcional pero recomendable podemos agregar los siguientes atributos.

• maxlength: limita el numero de caracteres que se pueden introducir en el cuadro de texto.
• size: indica en numero de caracteres el tamaño de el cuadro de texto.
• value: con este atributo podemos definir un valor por defecto.
• name: especifica el nombre de el cuadro de texto, este es importante si los datos son enviados a un php
• id: como buen habito coloque lo mismo que puso en name, ya que este le permitira manipular el cuadro de texto de javascript.

Cuadros de texto ocultos

Estos cuadros de texto permanecen invisibles en el formulario y no resevan ningun espacio. Son usados para almacenar valores que seran enviados por defecto con el formulario. Un ejemplo de esto seria

<input type=»hidden» name=»dato2″ id=»dato2″ value=»xf364″>

Cuadros de contraseña

Estos se colocan dando el valor «password» al atributo type, como su nombre lo indica son cuadros de texto que sirven para solicitar contraseñas dado que al teclear cualquier dato dentro de ellos solo aparecen puntos o asteriscos y no lo que se escribio.

Sus atributos son los mismos que los de un cuadro de texto normal

Botones de radio

Los botones de radio son una lista de opciones dentro de las cuales solo puedes seleccionar una.

Para colocarlos se debe colocar un input por cada opcion y el valor de la propiedad name de cada uno debe ser el mismo para que se tome como uno solo; en la propiedad value coloque el valor que almacenara el boton de radio una vez hecha la selección.

Casilla de verificación

Se trata de un grupo de opciones al igual que los botones de radio, pero con la diferencia de que en estos se pueden seleccionar varias opciones.

Para colocar una casilla de verificación debe colocar el valor «checkbox» en el atributo type y se aplican las mismas consideraciones que en los botones de radio a los atributos name y value.

botones de envio y reset

El boton de envio se usa para que una evz capturada la informacion esta sea enviada a el destino marcado por el atributo action de la etiqueta <form>. El boton de reser se usa para borrar el contenido de el formulario.

Para colocar los botones de envio y reset debemos colocar el valor «submit» en el atributo type y el valor «reset» en el mismo atributo, respectivamente.

Lo que coloquemos en el atributo value sera el texto que aparecera dentro del boton.

ANTERIOR: HTML imagenes y tablas

SIGUIENTE: