¡Descarga HTML Formularios y más Apuntes en PDF de Desarrollo de Aplicaciones Web solo en Docsity!
Los formularios en HTML
El contenido de un formulario lo debemos desarrollar entre los tags . Encerrados dentro de la etiqueta, además de los distintos tipos de controles (que veremos más adelante), pueden insertarse todos los elementos de una página Web, ya sean tablas, imágenes, etc…
La etiqueta
La principal función de esta etiqueta es encerrar la definición de todos los controles que compondrán el formulario.
Sus atributos principales son:
Action : se indica la acción que se llevará a cabo al enviar el formulario. Lo más común es el envío del mismo por correo electrónico.
Method : suele ser GET o POST. El más utilizado es el Segundo, ya que envía la información en forma de archivo.
Ejemplo:
…
Las etiquetas de los controles
Son aquellas que nos van a permitir crear los controles del formulario (cajas de texto, checkbox, listas de selección, etc…).
Todas estas etiquetas, que veremos a continuación, tienen un punto en común, la utilización del atributo name. Cada uno de los controles que componen un formulario ha de estar convenientemente identificado.
Otro atributo común es el tabindex , que permite indicar el orden de tabulación de los elementos del formulario. Es decir, en que control me voy a posicionar cuando pulse la tecla de tabular.
Vamos a ver a continuación los controles más utilizadas:
Cajas de texto (Text)
Este es el control más utilizado, se trata de una casilla en la que el usuario escribe texto.
Definición:
Resultado por pantalla:
En el ejemplo anterior, el atributo size indica el tamaño de la caja. El atributo name recordamos que está presente en cada control.
Botones de opción (Radio Button)
Estos botones permiten seleccionar sólo una de las varias opciones que se muestran.
Definición:
Resultado por pantalla:
Resultado por pantalla:
Áreas de texto
Este control aparece en forma de una caja de texto de varias líneas con barras de desplazamiento.
Definición:
Resultado por pantalla:
Si se desea que aparezca un texto dentro del Área de texto al iniciar el formulario, se tiene que escribir encerrado entre la etiqueta de apertura y la de cierre. El atributo rows indica el número de líneas que se mostrarán en el control, y el atributo cols el número de caracteres que se mostrarán en cada línea.
Botones
Se utilizan principalmente para enviar el formulario o eliminar su contenido.
Definición de los botones más frecuentes:
Otros controles
Controles de contraseña
Definición:
Resultado por pantalla:
Controles ocultos
La característica de este control es evidentemente que no aparece en el formulario aunque si se encuentra en él.
Una utilidad de este control podría ser conseguir distinguir la procedencia del formulario. Por ejemplo si se diseña una Web con dos formularios, para distinguir si los datos provienen de uno u otro, se inserta un control oculto en cada uno. De esta forma al recibir los datos, ellos mismos se identificarán.
Definición:
Selección de archivos
Se utiliza para seleccionar un archivo en el disco duro.
Definición:
Resultado por pantalla:
Etiquetas (label)
Al insertar una etiqueta para un control, ésta se debe enlazar con el control al que representa.
Definición:
Nombre:
El atributo Tabindex
Ejercicio final
Realiza los cambios que consideres oportunos en formulario.html para que se muestre como en las siguientes imágenes:
