Un formulario se compone de dos partes, la parte cliente y la parte servidor.
¿Qué es un formulario en HTML?
Según el W3C (World Wide Web Consortion) es un elemento que contiene:
- Contenido normal
- Código
- Controles
- Rótulos
Los usuarios normalmente rellenan un formulario cambiando su contenido con sus controles, enviando el formulario a un servidor para que éste lo procese.
¿Para qué se utilizan?
Para permitir que el usuario envíe información al servidor.
Etiquetas básicas para formularios
- form
Es fundamental para que el resto de elementos puedan ser enviados, todos los datos que se quieran enviar tienen que estar contenidas en esta etiqueta.
No tiene representación gráfica.
Sus atributos: - action es el único atributo requerido para la etiqueta form, espera una cadena de texto que especifique la URL o ruta a la acción destino que procese los datos de la petición.
- method indica la forma de enviar la información. Este atributo acepta dos valores: GET y POST. Si no se utiliza, el formulario se enviará por defecto mediante el método GET.
- GET es el método que utilizamos normalmente al navegar.
Al utilizar en un formulario los datos de envío son visibles en la URL como parejas nombre=valor.
Esta visibilidad está limitada por cada navegador.
Se usa GET en los casos que el envío sea siempre el mismo y cuando se quiere que el resultado se pueda guardar, como por ejemplo en un formulario de búsqueda. - POST es un método un tanto más seguro para el envío de información como contraseñas ya que los datos no son visibles en la URL del navegador.
No tienen límite de envío.
Posibilita la subida de ficheros al servidor.
- accept-charset son una lista de caracteres separados por comas, normalmente se utiliza el UTF-8 y puede que alguna vez en ISO-8859-1 que define los caracteres latinos.
- enctype especifica el tipo de codificación
- application/x-www-form-urlencoded (por defecto)
Convierte todos los espacios sensibles en suma y caracteres especiales en valores ASCII exagesimal. - multipar/form-data
Se utiliza cuando se van a subir ficheros mediante el formulario - text/plain
Sólo convierte los espacios en blanco en signos de sumar y los caracteres especiales no son convertidos - input
Es de las más utilizadas al momento de hacer formularios.
No tiene etiqueta de cierre.
Sus atributos: - name
Recibe una cadena de texto en un campo para luego ser enviado - type
Define en qué se convertirá el control, su uso no es obligatorio pero si recomendable. Por defecto es de tipo text. Estos son algunos tipos: - text recibe texto
- checkbox casilla de verificación
- radio casilla de opción (radio)
- file muestra una ventana nueva donde se puede elegir un archivo, también muestra la ruta al archivo dependiendo del navegador
- password genera un campo de texto enmascarado
- hidden es un campo oculto para evitar que el usuario ingrese datos de forma activa
- button botón
- submit es un botón que enviará la información del formulario a la acción que corresponda
- image utiliza una imagen con la misma función de tipo submit en la actualidad es poco utilizada
- reset borra los campos llenados en el formulario
- disabled
Deshabilita el campo - readonly
Se puede aplicar a un campo de texto y poder ser copiado - value
Algunos campos necesitarán de este atributo para poder funcionar
- Texto
- Casillas de verificación
- Casillas de opción (radio)
- Archivos
- Textos de campo enmascarado
- Campos ocultos
- Botones varios
INPUT
TEXTO <input type = "text">
- maxlength limita la cantidad de caracteres que se van a enviar y así prevenir errores y el valor debe ser un número entero
- size también espera un número de caracteres, está directamente relacionado con el estilo de la página, no es recomendado su uso.
- value indica el valor que tiene este campo por defecto, este valor no se borrará cuando se use y el usuario tendrá que borrarlo por él mismo.<input type="text" value="Buscar..."/>
- name todas las casillas de verificación deben tener el mismo nombre para que el servidor de destino sepa que esas casillas pertenecen al mismo campo<input type="checkbox" name="temas"/>HTML
<input type="checkbox" name="temas"/>CSS - checked toma como valor el texto check e indica que la casilla aparece marcada por defecto<input type="checkbox" checked="checked"/>HTML
<input type="checkbox"/>CSS - value idica al formulario que tipo de valor debe enviar si la casilla está activada, si no se declara el formulario enviará información que el servidor no podrá de procesar.<input type="checkbox" value="html"/>HTML
<input type="checkbox" value="css"/>CSS
CASILLAS DE OPCION <input type = "radio">
- name todas las casillas de radio deben tener el mismo nombre para que el servidor de destino sepa que esas casillas pertenecen al mismo campo<input type="radio" name="tema"/>HTML
<input type="radio" name="tema"/>CSS - checked se mostrará junto con el formulario<input type="radio" checked="checked"/>HTML
<input type="radio"/>CSS - value es el valor que se enviará junto con el formulario<input type="radio" value="html"/>HTML
<input type="radio" value="css"/>CSS
TEXTOS DE CAMPO ENMASCARADO <form enctype="multipar/form-data">
Tienen las mismas opciones que un campo de tipo texto.
CAMPOS OCULTOS
Es útil para enviar información que creemos que es útil pero el usuario no insertará de forma directa. Aquí los atributos que se pueden usar son type y value ya que el usuario no los verá.
BOTONES <input type="submit | reset | button | image">
Casi no se ven los que da por defecto cada navegador web ya que no va bien con el diseño de la página u es muy simple.
Para cada tipo de boton se hace un input diferente:
- Al marcar un <input /> como tipo “submit”, se dibujará un botón con el texto “Enviar” cuya acción será enviar el formulario al destino marcado en el atributo “action” de la etiqueta <form>.
- Los botones del tipo “reset” suelen tener un texto similar a “Restablecer”. Este botón reinicia el formulario, dejándolo como si el usuario no hubiese modificado nada.
- También es posible insertar botones con otro tipo de acciones, para ello se establece el atributo type=“button”.Para dotar de acción a estos botones, es necesario trabajar con eventos Javascript; bien intrusivo, mediante atributos como “onclick” o bien no intrusivo, haciendo uso de librerías o scripts no incrustados en HTML.
- Existe un tipo, raramente utilizado, que consiste en usar una imagen como botón. Si establecemos el atributo type=“image”, podremos ver este resultado.
- Para este tipo de <input />, se utilizan, del mismo modo que para las imágenes, los atributos alt, para incluir un texto alternativo y src, para especificar la ruta a la imagen.
- Este tipo de botones está a medio camino entre estructura y diseño, por lo que desaconsejo su uso. Podremos trabajar el estilo del botón mediante CSSEl atributo “value”, empleado en botones, especifica el texto que aparece en el botón; salvo en el caso de los botones de tipo imagen que, obviamente, no muestran texto.
EN RESUMEN
Los formularios se envían mediante dos métodos: GET y POST.
Con GET, el envío está limitado y la información enviada es visible; sin embargo, es útil para poder guardar el resultado en marcadores o favoritos.
y con POST, el envío no tiene limitación y los datos no son visibles en la URL, además, permite la subida de archivos.
Todas las etiquetas de formulario deben ir entre etiquetas <form> y </form> para que su información sea enviada con el formulario.
- Fuera de las etiquetas <form> y </form> es posible utilizar elementos de formulario, serán visibles, pero no se enviará la información. Repasa el código.
- Especifica siempre el atributo “type”.
- Necesitarás un botón “submit” para enviar el formulario.
- En la medida de lo posible, separa contenido de estilos, lo agradecerás cuando tengas que mantener la web.
SELECT
Permite desplegar listas desplegables y listas de selección múltiple. Además del atributo name que es esencial para el envío de formularios select crea listas de selección múltiple.
- Lista desplegablePara definir cada una de las etiquetas de la lista se usa la etiqueta option cuyo valor será el del select cuando se envíe el formulario.<option value="valor"> texto </option>
<select>
<option value="HTML"
HTML
</option>
<option value="CSS">
CSS
</option>
</select>
- Lista múltiple
Solamente se obtiene agregando el atributo multiple en la etiqueta select
<select multiple="multiple">
<option value="HTML"
HTML
</option>
<option value="CSS">
CSS
</option>
</select> - optgroupSe pueden separar las opciones usando estas etiquetas. Para facilitar las listas de muchos elementos.
TEXTAREA <textarea> </textarea>
De nuevo el atributo name es necesario. Muestra los datos de una manera un tanto más peculiar que con un textbox.
En esta es posible presionar intro para introducir saltos de línea
- cols
Es el número, la anchura de los elementos que se van a tener. Por defecto son 20. - rows
Es el alto, por defecto a 2.
LABEL
No muestra nada en pantalla, sin embargo es una etiqueta que mejora la accesibilidad y utilidad de los formularios. Asocia un texto a un control. Si este texto se presiona el control asociado a este se activa en la mayoría de los navegadores.
- for
Para enlazar un label con su control de usuario.
FIELDSET <fieldset> </fieldset>
Agrupa los elementos de formularios.
- legend
Es el nombre de la agrupación
