¿Como crear formularios en Html?.
Para crear formularios utilizamos la etiqueta <form>. Un formulario esta compuesto o alberga otro tipos de elementos también llamados controles, como pueden ser los cuadro de texto, listas, botones, opción, etc.
Suelen utilizarse para recopilar información del visitante de la web. Esta información es recogida por el navegador, que la manda al servidor para que la procese. El servidor la almacenará normalmente en una base de datos o hará otro tipo de acción con esta información, que una vez procesada devolverá al navegador y este haga lo pertinente con ella, ya sea construir una página con esos datos, completar un registro de activación, etc, etc.
Las posibilidades del: ¿Que hacer, con un formulario? son muchas. Combinado con Javascript podemos captar esa información, para hacer algún cálculo con ella, sin necesidad de mandar dicha información al servidor.
Para incluir controles en un formulario, utilizamos la etiqueta <input>, acompañado del atributo type=»». Algunos controles pueden inicializarse por defecto, utilizando el atributo value=»». los diferentes tipos de controles son los siguientes (Html5 aporta más controles, Incompatibles con versiones anteriores a IE9.0). :
Tipos de Controles de formularios que usan <input>.
- text – Cuadro de texto de una linea donde se puede incluir texto. Si incluimos el atributo <value> podemos escribir el texto que aparecerá cuando se abra la página.
- password – Es igual al anterior, pero oculta el texto escrito mostrando tan solo asteriscos (*) o puntos,(.)
- checkbox – Casilla de verificación. (Activar-Desactivar).
- radio – Muestra un botón de opción . Suelen ponerse varios y que el visitante haga click en uno. (Activar-Desactivar).
- BOTONES. Muestran un botón pulsable y los tipos son:
- submit – Botón de envio, encargado de recopilar datos y enviarlos al destinatario.
- image – Igual al anterior, pero se le puede incorporar una imagen para que la muestre en vez de mostrar solo texto.
- reset – borra el contenido de todos los elementos de entrada que se hubiesen escrito ya.
- button – Utilizado solamente con adición de código javascript.
Tipos de Controles de formularios que no usan <input>.
- <textarea>…….</textarea> -Cuadro de texto de mayor número de lineas admitidas.
- <select>…….</select> -Lista seleccionable. Suele trabajar conjuntamente con el elemento <option>.
Para mostrar un poco como se encajan las piezas, crearemos una pequeña aplicación, que no necesita mandar información al servidor, tan solo utilizaremos un poco de código javascript. Explicar el funcionamiento de javascript, se escapa de la temática principal de este curso. Si os interesa saber que código utilizo y como funciona en este ejemplo, preguntármelo en un comentario, o ver el código fuente de la página.
Volviendo al ejemplo, trataremos de crear un formulario simple, con dos cuadros de texto y que realiza una simple suma.
RESULTADO=