MODULO 3 - Lección 19: HTML FORMULARIOS - PARTE 1




Según la W3C, un formulario HTML es una sección de un documento que contiene:


  • Contenido normal
  • Código
  • Controles (elementos especiales)
  • Rótulos

Se utilizan para que el usuario envíe información al servidor (formularios de registro, acceso a sitios web, formularios de contacto, etc...). Hasta para escribir un comentario en Facebook estaríamos utilizando un formulario.

Las etiquetas básicas para formularios, son:

  • form
  • input
  • select
  • textarea
  • label
  • fieldset

FORM: Es fundamental para que el resto de elementos puedan ser enviados. Todos los campos que se quieran enviar deben estar entre los campos <form> y </form>
No tiene representación gráfica.

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 o destino que procese los datos de la petición.
Es posible utilizar una ruta absoluta o relativa.

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 metodo GET.

GET: Es el metodo que se usa normalmente al navegar.

  • Datos visibles (URL)
  • Limitada (el limite depende de cada navegador)
  • Favoritos
  • Formularios de búsqueda
POST:

  • Datos no visibles
  • Sin limite
  • Ficheros
  • Formularios de registro

CODIFICACIÓN DE CARACTERES:

ACCEPT-CHARSET: Espera una lista de juegos de caracteres, separados por comas. Normalmente utilizamos el estándar unicode UTF-8 y a veces vemos el juego latin one o ISO 8859-1, que define el alfabeto latino.
No es un atributo muy común.

ENCTYPE: Especifica el tipo de codificación. Por defecto; a application/x-www-form-urlencoded convertirá todos los espacios en signos suma (+) y caracteres espaciales en valores ASCII hexadecimal.

multipart/form-data se utiliza cuando se vayan a subir ficheros mediante el formulario.

text/plain sólo convierte los espacios en signos de sumar pero los caracteres especiales no son convertidos.

INPUT: Es de las etiquetas más utilizadas en formularios. Con ella podemos definir gran parte de los controles tipicos de formularios:

  • Entradas de tipo texto
  • Casillas de verificación
  • Casillas de opción (radio)
  • Archivos
  • Texto enmascarado (password)
  • Campos ocultos
  • Botones

La etiqueta input no tiene etiqueta de cierre y por lo tanto es importante cerrarla debidamente para cumplir con los estandares (<input...../>)

NAME: Atributo común a todos los campos de formulario no exclusivo de input. Espera una cadena de texto que indica el nombre que recibirá el campo al ser enviado.
Por ejemplo: <input name="email"/>

TYPE: Es uno de los atributos más importantes para la etiqueta input. Define en que se convertirá el control. Aunque no es obligatorio, es recomendable su uso.
Por defecto es de tipo text.

  • "text" → texto
  • "checkbox" → indica que el campo será casilla de verificación
  • "radio" → dibujará una casilla de opción o un botón tipo radio
  • "file" → muestra un botón que abrirá una ventana para seleccionar un archivo. También muestra el nombre o la ruta al archivo, dependiendo del navegador.
  • "password" → genera un campo de texto enmascarado, ideal para campos de contraseña
  • "hidden" →  genera un campo de texto oculto para almacenar información que el usuario no vaya a introducir de forma activa (por ejemplo podemos incluir el tiempo que ha empleado el usuario en rellenar el formulario)
  • "button" → muestra botón
  • "submit" → dibuja un botón "enviar," que al pulsarlo envía el formulario a la acción que corresponda
  • "image" → utiliza una imagen con la misma función que el botón de tipo submit (no se suele utilizar)
  • "reset" →  inserta un botón que reinicia el formulario, borrando los datos insertados por el usuario.
DISABLED: Desabilita el campo para que no pueda ser utilizado. 
disabled="disabled" />
La representación depende del ordenador, pero el campo queda totalmente inutilizado.

READONLY: Funciona de forma parecida a disabled. Aplicado a un input de tipo text, sería posible seleccionar el texto y copiarlo.

VALUE: Ciertos campos necesitan de este atributo para completar su funcionalidad.


EJEMPLOS CON INPUT

CAMPOS DE TEXTO: Los inputs de tipo texto pueden limitar el número de caracteres que se insertan, lo que es útil para controlar que ciertos campos limitados no lleguen con más caracteres de los que se pueden almacenar, para ello utilizaremos el atributo maxlenght. El valor debe ser un número entero.

maxlenght="numero"


SIZE: El atributo size, también espera un número y se traduce en la anchura del campo de texto en caracteres. Un input de tipo 3, será lo suficientemente ancho para mostrar 3 caracteres, pero no 4.
Está relacionado con el estilo, por lo que no es recomendable su uso.

size="numero" (Tamaño en número de caracteres)

VALUE: Indica el valor del campo por defecto: value="texto"
Sirve para poner un texto en un campo para aclarar su funcionamiento. El usuario deberá borrarlo al escribir en el campo.
Esta práctica se suele utilizar apoyándose en JavaScript o con atributos nuevos de HTML5

Los inputs de tipo CHECKBOX, insertan casillas de verificación. Como estas casillas suelen organizarse en grupos de selección múltiple es importante que el atributo en name de todas las casillas de verificación  del mismo grupo, tengan el mismo nombre, de forma que al recibirlas, el servicio destino sepa que esos valores corresponden al mismo campo.
<input type="checkbox" name=temas/>HTML 
<input type="checkbox" name=temas/>CSS

El atributo CHECKED toma como valor el texto "checked" e indica que la casilla aparece marcada por defecto.

Los input del tipo FILE ofrecen la posibilidad al usuario de adjuntar archivos al envío del formulario: <input type="file" accept "image/gif"/>

Con el atributo accept, es posible especificar los tipos de archivo que aparecen para ser seleccionables, pero ni está implementado por todos los navegadores, ni supondrá filtro alguno, pues existe la opción de "Todos los archivos" que permite 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.

<form enctype="multipart/form-data">
<input type="file".../>
...
</form>



Es común ver campos que, a priori, parecen de tipo texto pero en los que al tratar de escribir, aparecen puntos o asteriscos en lugar de los caracteres introducidos.

Estos son los campos de texto enmarcado o type password.

Tienen las mismas opciones que los campos de tipo texto.

Es interesante trabajar con campos ocultos para enviar información que creemos útil pero que el usuario no insertará de manera directa (por ejemplo el tiempo empleado en rellenar el formulario web)

En los campos type hidden, sólo son útiles los atributos name y value, puesto que no son visibles para el usuario.

BOTONES: Son otro elemento común en los formularios, Para cada botón se utiliza un tipo de input diferente.

Al marcar un input con el tipo submit, se dibujará un botón con el texto a enviar, cuya acción será la de enviar el formulario al destino marcado en el atributo action de la etiqueta form.

type="submit" → Envía el formulario

Los botones de tipo reset, suelen tener un texto similar al de restablecer. Este botón reinicia el formulario dejándolo como si el usuario no hubiera modificado nada.


type="seset" → Reinicia el formulario

También es posible insertar botones con otro tipo de acciones, para ello se establece el atributo type="button" → Botón sin acción

Para dotar de acción a estos botones, es necesario trabajar con eventos JavaScript y en intrusivo, mediante atributos como onclick, o bien no intrusivo haciendo uso de librerias o scripts no incrustados en HTML.

onclick="javascript:function();"
<srcipt src="myNonObtrusiveLibrary.js"/><script>function();</script>

Existe un tipo raramente utilizado que consiste en utilizar una imagen como botón. Si establecemos el atributo type="image" podremos ver como resultado una imagen sin acción.
type="image" → Imagen sin acción.

Para este tipo de inputs, se utilizan los atributos:

alt="texto alternativo"
src="ruta de la imagen"

Este tipo de botones esta a medio camino entre estructura y diseño y no es muy aconsejable su uso. Podremos trabajar el estilo del botón mediante CSS

El atributo value, empleado en botones, especifican el texto que aparece en el botón, salvo en el caso de los botones de tipo imagen que no muestran texto.




Comentarios

Entradas populares de este blog

MODULO 4 - Lección 5 - HTML: TABLAS

MODULO 2 - Lección 4 PROTOTIPADO, WIREFRAMES, MOCKUPS Y PROTOTIPOS

MODULO 4. Lección 14: HTML: NUEVAS FUNCIONALIDADES EN FORMULARIOS (PARTE 2)