Formularios y multimedia en HTML

 

Formularios

 

El formulario es la forma en que el visitante de la página Web manda información a su administrador.

Mediante los formularios se pueden mandar datos, rellenar una encuesta, enviar comentarios, etc. Se usan cuando se quiere que el visitante de la página nos envíe informaciones concretas.

El formulario consta de unos mecanismos en donde el usuario responde a una serie de preguntas. Para ello puede escribir en una serie de cajas la informacion solicitada, y/o también elegir entre una o varias opciones disponibles, las cuales pueden o no formar una lista.

El lenguaje HTML puede crear formularios con cajas de texto y botones que mandan información, si bien mediante HTML sólo podremos enviarlo a un correo electrónico.

La mayoría de las páginas que tienen formularios utilizan también otros tipos de programación como PHP o ASP, junto con bases de datos, de forma que estos programas guardan y procesan la información de forma automática. Sin embargo todos utilizan formularios escritos en lenguaje HTML.

 

Cómo crear Formularios en HTML

 

Crear un formulario en html implica construir los campos de información, estos pueden ser: campos de texto, de número, selectores, desplegables, casillas de verificación y entre otras más.

Como ya es sabido en html se emplean etiquetas para crear los diversos elementos existentes, y el caso de los formularios no es la excepción, para crear los componentes del formulario HTML también haremos uso de una variedad de etiquetas y atributos, los mismos que conoceremos a continuación.

Etiqueta <form>

Utilizaremos la etiqueta <form> para indicar al navegador que el elemento será un formulario.

<form> se emplea para cualquier tipo de formulario HTML, ya sea uno de contacto, suscripción, registro, login, encuesta, etc.

Etiqueta <input>

Crear los campos en el formulario es tan sencillo como utilizar la etiqueta <input> antecedida de lo que deseas obtener. Por ejemplo:

Existen varios tipos campos para formularios HTML y también debemos especificar qué tipo de campo es un elemento del formulario, para ello aprenderemos a utilizar el atributo TYPE a continuación.

 

 

Atributo type

El atributo type va dentro de la etiqueta <input> y su valor indicará que tipo de campo se está creando. Veamos algunos valores que puede tomar el atributo type en un formulario HTML:

Valores de atributo type en formularios HTML

Text: para campos de texto

Password: para campos de contraseña

Checkbox: para casillas de verificación

Radio: para casillas de selección

Submit: para botones de envío

Reset: para botones de resetear

File: para campos de selección de archivo

 

Ejemplo de formulario html con atributo type

En el siguiente ejemplo crearemos un formulario empleando los diversos tipos de campo que aprendimos anteriormente y para organizar y diferenciar mejor cada campo, emplearemos la etiqueta de salto de linea <br/>, veamos:

 

 Si observas el anterior ejemplo te darás cuenta de que todos los campos están construidos con la etiqueta html <input>. Pero existen otros campos que no utilizan <input>, sino etiquetas específicas como la etiqueta <select> y <textarea>.

 

 

Formularios en HTML5

 

Conoceremos los nuevos tipos de campos disponibles para formularios en HTML5, ahora podemos crear campos de búsqueda, teléfono, URL, selectores de color, fecha, etc. junto a ellos se suman varios atributos que nos facilitarán la construcción de formularios en HTML5.

Ahora, en HTML5 tenemos más tipos de campos y aprenderemos a manejarlas en esta lección. 

Por otro lado, también debemos tener en cuenta hacer uso del atributo name para que los campos de los formularios recopilen y envíen la información correctamente.

 

Nuevos tipos de campo para <input> en HTML5

Ahora conozcamos los nuevos valores que puede tomar el atributo type para recopilar cierto tipo de información, veamos:

Nuevos valores para atributo type

color.- crea un campo con selector de color, de acuerdo al sistema operativo, aparece una paleta para escoger un color.

date.- se creará un campo de fecha, en ella se pueden colocar el día, mes y año.

datetime.- permite ingresa información de hora, minuto y segundo.

datetime-local.- genera un campo para fecha y hora, podemos colocar en ella el día, mes, año y hora.

email.- para información de correo electrónico.

month.- genera un campo para ingresar un mes del año.

number.- para recopilar datos numéricos.

range.- crea una barra con un botón desplazable para elegir un rango, por defecto el rango es de 0 a 100.

search.- para generar una caja de búsqueda.

tel.- para recopilar información de número telefónico.

time.- crea un campo para ingresar hora y minuto.

url.- para información de dirección URL.

week.- crea un campo para elegir la semana del año.

 

Ejemplo de formularios HTML5

Ejemplo 1.- El objetivo de estos ejemplos es que veas como es resultado de cada tipo de campo. Para el primer ejemplo haremos uso de los valores: color, date, datetime, datetime-local, email, month, number.

 

El atributo name será necesario para procesar la información de cada campo y que estas lleguen a su destino correctamente.

Ejemplo 1 con atributo name.

El atributo name, permite acceder al contenido definido en el atributo type. Es conveniente utilizar los dos atributos (type y name) con el mismo identificador, sin embargo, se pueden declarar con nombres distintos.  El objetivo de estos ejemplos es que veas como es resultado de cada tipo de campo. Para el primer ejemplo haremos uso de los valores: color, date, datetime, datetime-local, email, month, number.

 

Ejemplo 2.- en este segundo ejemplo haremos uso de los valores: search, tel, time, url, week y range.

 

Atributos HTML5 para formularios

Así como tenemos nuevos tipos de campo, también se han agregado otros atributos para controlar el resultado final de nuestros formularios.

autocomplete.- cuando se establece autocomplete activado, el navegador trata de autocompletar los campos que el usuario está completando, basándose en su actividad en el navegador.

required.- para campos requeridos, sirve para establecer de que el campo debe ser completado obligatoriamente, en caso contrario no será posible enviar la información del formulario.

placeholder.- generalmente se usa para colocar en su valor un breve texto que indique al usuario el tipo de información que debe coloca en el campo. Se suele usar en elementos <input> y <textarea>

autofocus.- sirve para enfocar automáticamente el campo deseado cuando el formulario se carga.

size.- para establecer el tamaño de los campos, un número de caracteres para campos de texto.

readonly.- sirve para que la información de un campo no pueda ser modificada, solo de lectura.

disabled.- este atributo hace que un campo o control quede deshabilitado, de tal manera que no se puede hacer nada con ella.

 

 

 

Ejemplos de atributos HTML5

 

 Etiqueta de audio HTML5

 

La etiqueta <audio> sirve para inserta un reproductor de sonido en html5, ahora es posible insertar una canción o cualquier música para dar vida y alegría a nuestra página web.

No olvides, entre la etiqueta de apertura y cierre es recomendable colocar un aviso en texto, este texto se mostrará en caso el navegador del usuario no sea compatible o no reconozca dicho elemento de audio.

 

Por si solo la etiqueta <audio> no aparece el navegador, pues es necesario indicar cuál es el archivo para reproducir, para ello emplearemos la propiedad src y en su valor indicaremos el nombre del archivo con su respectiva extensión en caso el archivo se encuentre en la misma carpeta que el documento HTML y si se encuentra fuera, colocaremos en su lugar la dirección URL donde este alojado el audio.

 Ejemplo de código para insertar audios en HTML5

 Para que el reproductor de sonido aparezca en el navegador será necesario agregar el atributo controls en la etiqueta de apertura, sus valores por defecto harán que aparezca un reproductor con sus iconos para reproducir el sonido, controlar el avance y volumen. A continuación, veamos un ejemplo que funciona.

 Con la etiqueta <audio> ya podemos insertar audios en nuestra página.

Utilizaremos el atributo src y en su valor indicaremos la ubicación de nuestro archivo de audio.

Utilizaremos el atributo controls para proporcionar controles a nuestro reproductor de sonido en la página.

Entre la etiqueta de apertura y cierre, antes del cierre colocaremos el texto que se mostrará en caso de que el navegador del usuario no soporte el audio.

 

Formatos de audio soportados

No todos los formatos de audio que existen se pueden utilizar para insertar en una página web, en esta ocasión conoceremos los formatos más recomendables.

MP3, OGG, WAV, AAC, OPUS

 

Etiqueta <source> para insertar audio

Otra manera de insertar elementos de audio es utilizando la etiqueta <source> dentro de <audio>, dentro de ella se especifica cual es el archivo mediante el atributo src y además se puede especificar el tipo de archivo utilizando el atributo type. Veamos un ejemplo a continuación.

Ejemplo:

 

Formatos de audio alternativos en HTML5

Es muy recomendable poner más de un archivo de audio con diferentes formatos para que el navegador pueda reproducir el primer formato que reconozca, para ello nos serviremos de la etiqueta <source>.

Ejemplo:

 

Resumen de los atributo HTML para <audio>

Controls: hará que el audio tenga los controles para que el usuario interactúe.

Autoplay: hará que el audio se reproduzca automáticamente al cargarse la página, sin consultar al usuario.

Loop: hará que el audio se reproduzca indefinidamente una vez que se inicia, es decir al finalizar, empezara a reproducirse automáticamente de nuevo.

Basta con colocarlos y harán su función por defecto.

 

Etiqueta vídeos HTML5

 

Cómo insertar vídeos en HTML5, es bastante sencillo y su uso es muy similar al elemento audio que ya aprendimos anteriormente.

Utilizaremos la etiqueta <video> para insertar un reproductor de vídeo en nuestra página HTML, esta etiqueta por si solo no muestra resultados, debemos emplear los atributos para que pueda funcionar correctamente.

Entre la etiqueta de apertura y cierre colocaremos el texto que aparecerá en el navegador en caso el video no sea compatible o no se pueda reproducir. Veamos el ejemplo:

 

Atributo src

El atributo src sirve para indicar cual es el archivo de vídeo que se debe reproducir, si el archivo se encuentra en la misma carpeta que el documento HTML, entonces su valor simplemente será el nombre del archivo con su respectivo formato de vídeo.

 Si queremos reproducir desde una URL primero tenemos que asegurar que en dicha dirección URL esta ubicada el vídeo y en el valor de src colocamos esa URL. Por ejemplo:

Atributo controls

El atributo controls sirve para dotar de controles básicos a nuestro reproductor de vídeo, tales como: volumen, reproducir, pausar, la barra de progreso, etc. su valor por defecto es también controls, y para que funcione no hace falta escribir todo, basta con colocar el controls.  

Etiqueta <source>

La etiqueta <source> permite insertar más de un formato de vídeo dentro de la etiqueta <video>, es bastante útil, ya que esto nos permite tener más alternativas.

Si el navegador del usuario no puede reproducir la primera alternativa entonces tratará de reproducir la siguiente y así hasta dar con el archivo compatible.

Atributo autoplay

Sirve para reproducir el vídeo automáticamente cuando este se haya cargado sin consultar con el usuario. Esta técnica puede resultar invasivo, imagínate, entras en una página web y de repente sin que te esperes empieza a reproducirse un vídeo que no te esperabas ¿te gustaría? No verdad, trata de usarlo siempre y cuando consideres necesario.

El atributo autoplay ha sido abusivamente empleado para mostrar publicidad, por lo que es posible que ciertos navegadores hayan restringido su uso.

 Atributo loop

Este atributo hace que el vídeo se reproduzca indefinidamente cuando el vídeo finaliza, el usuario puede controlar, pero por defecto esto hará que el vídeo siempre vuelva a reproducirse.

 Formatos de video

No crear que puedes meter cualquier vídeo cuando utilizas HTML5, primero asegúrate que el formato que quieres utilizar es compatible con los navegadores web. MP4 es un formato extensamente empleado, pero también tenemos otros formatos.

No olvides colocar la extensión para que tu código funcione correctamente.

MP4, OGG, WEBM  son formatos de vídeo soportados.

Cómo insertar un video de YouTube en un archivo HTML

Insertar un archivo de YouTube en nuestro documento HTML5 es tan fácil como conseguir el código de inserción del video que queremos desde YouTube y pegar en nuestro documento; por ejemplo:

El código de inserción podemos obtener dando clic derecho sobre el video y elegir la opción: copiar código de inserción. otra forma de hacerlo es dando clic sobre la opción compartir ubicada debajo de cada video, aparecerá una ventana emergente, en ella seleccionamos la opción incorporar, aparecerá un fragmento de código y copiamos para luego pegar en nuestro documento html5. Debería verse algo así: