FORMULARIOS EN HTML Los formularios son interfaces interactivas que permiten a los usuarios interactuar con la página WEB a través del ingreso o captura de datos de los visitantes. A través de los formularios podemos crear aplicaciones Web. Los formularios están compuestos por controles los cuales pueden ser cajas de texto, casillas de verificación, botones de opción, menús y rótulos, etc. 1. LA ETIQUETA FORM Los formularios están delimitados con la etiqueta <FORM> y </FORM>. Un formulario es considerado un contenedor. Los atributos básicos que maneja un formulario son: METHOD: Indica cómo se enviara la información o parámetros del formulario al servidor para ser procesada. Los métodos pueden ser el GET, envía los datos agregándolos a la dirección URL. Sin embargo el método POST, enviara la información formando parte del cuerpo de la petición, es decir estos datos no se pueden ver. El método GET admite como máximo el envío de unos 500 bytes de información, además el método GET no permite el envío de archivos adjuntos con el formulario. ACTION: Indica la URL o archivo que se encarga de procesar los datos del formulario. 2. CUADRO DE TEXTO El control cuadro de texto text permite ingresar información a través de la escritura. Las propiedades son: Type=text, permite definir una caja de texto Name, permite asignar un nombre a la caja de texto Value, permite asignar un valor por defecto a la caja de texto - 1 - Mg. Abril Saire Peralta
La propiedad size permite definir el tamaño de la caja de texto y la propiedad maxlength permite ingresar una cantidad de caracteres. 3. CUADRO DE CONTRASEÑA Es una caja de texto que permite escribir contraseñas o password, en donde la información que se ingresa se ve a través del asterisco o circulo. El tipo de control es PASSWORD. Utilizaremos la propiedad placeholder el cual muestra una ayuda de la forma de ingreso de los datos, además de la propiedad autofocus el cual permite que el cursor se muestre en una caja de texto. 4. CAJA MULTILINEA Es una caja de texto multilinea, el cual el usuario puede ingresar más de una línea de texto. El tipo de control es TEXTTAREA. La caja de texto está definida por la cantidad de filas (rows) y columnas (cols). - 2 - Mg. Abril Saire Peralta
5. CASILLA DE VERIFICACIÓN Los casillas de verificación o checkbox permite ingresar información a través de la selección o marcado de opciones individualmente. El valor del atributo value, junto con el valor del atributo name, es la información que llega al servidor cuando el usuario envía el formulario. Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo checked. El resultado será que por defecto la casilla de verificación empleado este marcado. 6. BOTONES DE OPCIÓN Los controles de tipo opción o radio son similares a los controles de tipo checkbox, pero presentan una diferencia muy importante: son mutuamente excluyentes. Cada vez que se selecciona una opción, automáticamente se deselecciona la otra opción que estaba seleccionaba. Al darle el mismo valor al atributo name, el navegador sabe que dichos controles están relacionados. - 3 - Mg. Abril Saire Peralta
7. BOTÓN DE ENVIO Y RESETEO El botón de envío permite enviar información al servidor y el botón de reseteo permite borrar todos los datos introducidos por los usuarios. Aplicar la propiedad Required, el cual indica que el ingreso son datos obligatorios El valor de la propiedad value, es el texto que se mostrara en el botón. 8. FICHEROS ADJUNTOS Los formularios también permiten adjuntar archivos para subirlos al servidor. El tipo de control es que se debe usar para cargar archivos es FILE. Si se incluye un control para adjuntar archivos, es obligatorio añadir el atributo enctype en la etiqueta <form>. 9. MENUS DESPLEGABLES La etiqueta <select> es usada para crear un menú desplegable. Cada opción ofrecida por el menú se representa con la etiqueta <option> Ejemplo 01-4 - Mg. Abril Saire Peralta
Ejemplo 02 La propiedad multiple permite seleccionar más de un elemento de la lista (utilizando la tecla control), además la propiedad selected permite seleccionar por defecto un elemento de la lista. IMPORTANTE Disabled, (disabled="disabled"), permite desactivar un control (text, checkbox y submit) Readonly, (readonly="readonly"), permite el permiso de lectura (text, checkbox y submit) 10. OTROS TIPOS DE CONTROLES Tenemos otros controles como tipo email, url, date, time, etc. - 5 - Mg. Abril Saire Peralta
Resultado - 6 - Mg. Abril Saire Peralta