Según la W3C, un formulario HTML es una sección de un documento contiene contenido normal, código, elementos especiales llamados controles, y rótulos para esos controles. Los usuarios normalmente rellenan un formulario modificando sus controles, antes de enviar el formulario a un agente para que lo procese.
Etiquetas básicas para formularios
- <form>: Es fundamental. Todos los campos que se quieran enviar deben estar entre estas etiquetas. No tiene representación gráfica.
Atributos para <form>
- 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. Es posible utilizar una ruta absoluta o una relativa.
- method: indica la forma de enviar la información. Acepta los valores GET (por defecto) y POST.
∎ GET
▶ Los datos son visibles en la URL.
▶ Tiene un límite en el envío, el cual depende del navegador.
▶ Se utiliza, normalmente, en los casos en los que el resultado del envío sea siempre el mismo y cuando queramos que el resultado se pueda guardar.
▶ Ejemplo: formulario de búsqueda.
∎ POST
▶ Los datos no son visibles en la URL.
▶ No tiene límite en el envío.
▶ Posibilita la subida de ficheros al servidor.
▶ Ejemplo: formulario de registro.
- accept-charset: espera una lista de juegos de caracteres separados por comas. Normalmente se utiliza el estándar "unicode" UTF-8. No es un atributo muy común.
- enctype: especifica el tipo de codificación.
- <input>: Es de las más utilizadas, y no tiene etiqueta de cierre. Con ella se puede definir gran parte de los controles típicos de formularios.
Atributos para <input>
- name: espera una cadena de texto que indica el nombre que recibirá el campo al ser enviado. No es exclusivo de <input>.
- type: es uno de los atributos más importantes ya que define en qué se convertirá el control. Tiene distintos tipos:
▶ "text"⟶ Texto.
▶ "checkbox"⟶ Casilla de verificación.
▶ "radio"⟶ Casilla de opción (radio).
▶ "file"⟶ Subir fichero.
▶ "password"⟶ Texto enmascarado.
▶ "hidden"⟶ Campo oculto.
▶ "button"⟶ Botón.
▶ "submit"⟶ Botón de enviar.
▶ "image"⟶ Imagen como botón de enviar. En la actualidad, es poco utilizado.
▶ "reset"⟶ Botón de reinicio.
- disabled: deshabilita el campo para que no pueda ser utilizado (disabled="disabled")
- readonly: funciona de forma parecida a disabled pero, aplicado por ejemplo a un input de tipo "text", sería posible seleccionar el texto y copiarlo.
- value: ciertos campos necesitan este atributo para completar su funcionalidad.
Atributos para <input type="text"...>
❇ maxlength: limita el número de caracteres que se insertan. El valor debe ser un número entero.
❇ size: espera un número y se traduce en la anchura del campo de texto en caracteres.
❇ value: indica el valor que tiene este campo por defecto. Este texto no se borrará cuando el componente obtenga el foco y el usuario deberá borrarlo para poder insertar su propia cadena.
Atributos para <input type="checkbox"...>
❇ name: como estas casillas suelen organizarse en grupos de selección múltiple, es importante que el atributo name de todas las casillas de verificación del mismo grupo tenga el mismo nombre, de forma que al recibirlas, el servicio destino sepa que esos valores corresponden al mismo campo.
❇ checked: toma como valor el texto "checked" e indica que la casilla aparece marcada por defecto.
❇ value: en este tipo de elementos es imprescindible. Le indica al formulario qué valor debe enviar si la casilla está activada.
Atributos para <input type="radio"...>
❇ name: para que el control funcione correctamente es necesario que todos los elementos de cada grupo de casillas de opción tengan el mismo valor.
❇ checked: toma como valor el texto "checked" e indica que la casilla aparece marcada por defecto.
❇ value: el atributo seleccionado será el que se envíe junto al formulario.
Los atributos son iguales que en las casillas de verificación, pero en las de radio sólo se puede seleccionar una opción.
Atributos para <input type="file"...>
❇ accept: es posible especificar los tipos de archivo que aparecen para ser seleccionables pero, ni está implementado por todos los navegadores mayoritarios, ni supondrá filtro alguno, ya que la opción "Todos los archivos" permitirá al usuario subir cualquier tipo de archivo.
La etiqueta <form> tiene un atributo enctype que debe tener el valor "multipart/form-data" para el envío de archivos.
Atributos para <input type="password"...>
Estos campos tienen las mismas opciones que los campos de tipo texto (maxlength, size y value).
Atributos para <input type="hidden"...>
En estos campos sólo son útiles name y value, puesto que no son visibles para el usuario.
Atributos para <input type="button"...>
Para cada tipo de botón se utiliza un tipo de <input> diferente:
❇ button: es posible insertar botones con otro tipo de acciones con este atributo. Para dotar de acción a estos botones, es necesario trabajar con eventos Javascript.
❇ 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>.
❇ image: consiste en usar una imagen como botón.
❇ reset: suelen tener un texto similar a "Restablecer". Este botón reinicia el formulario, dejándolo como si el usuario no hubiese modificado nada.
- <select>: Permite generar listas desplegables y listas de selección múltiple.
Atributos para <select>
- name: es fundamental.
- multiple: se utiliza para generar listas de selección múltiple.
Etiquetas para <select>
- <option>: Se utiliza para definir cada una de las opciones de la lista, cuyo atributo value será el valor del elemento <select> cuando se envíe el formulario. Entre <option> y </option> incluimos el texto que queramos mostrar al usuario. Así se mostraría una lista desplegable. Y, al añadirle el atributo multiple, se transforma en una lista de selección múltiple.
- <optgroup>: Se pueden agrupar las opciones encerrándolas entre estas etiquetas para facilitar el uso de listas con muchos elementos. Se le añade un atributo label mediante el cual se especifica el texto que aparece en el desplegable. Los títulos de grupo no son seleccionables.
- <textarea>: Permite insertar grandes cantidades de texto.
Atributos para <textarea>
- name: es fundamental.
- cols: toma como parámetro el número de caracteres de ancho (20 por defecto).
- rows: toma como parámetro el número de caracteres de alto (2 por defecto).
En estos campos es posible hacer uso de la tecla "intro" para introducir saltos de línea. Cuando el área visible sea demasiado pequeña para el texto contenido, el control <textarea> mostrará barras de desplazamiento (normalmente verticales).
- <label>: No muestra absolutamente nada en pantalla. Sin embargo, es una etiqueta que mejora la usabilidad y accesibilidad de los formularios.
Atributos para <label>
- for: espera el identificador del control de formulario con el que se va a asociar.
- <fieldset>: Agrupa elementos de un formulario que están relacionados entre sí. Además, dibuja un marco alrededor de los componentes encerrados.
Etiquetas para <fieldset>
- <legend>: Se utiliza para facilitar la lectura del formulario, dotando de un título a los componentes agrupados.
