Programa en HTML5

Para empezar

Esta es la segunda entrega de HTML5 avanzado, se trata de una colección de 3 ebook en la que encontrarás todo lo que necesitas saber para conocer el lenguaje HTML en profundidad, desde su sintaxis y etiquetas más usadas hasta los aspectos menos conocidos del estándar. La colección es exclusiva de RedUSERS PREMIUM y puedes accederla en los siguientes links: HTML5 AVZ v1; HTML5 AVZ v2 y HTML5 AVZ v3  A continuación, los primeros temas correspondientes al Vol. 1

Formularios avanzados

A continuación, verás cómo crear con el lenguaje HTML formularios, una de las herramientas más importantes de los sistemas web, los cuales permiten manipular información que ingresan los visitantes de un sitio web

Formularios

HTML es un lenguaje de marcado, que desde hace varios años se considera el estándar para la creación de sitios web, sobre todo a la hora de crear interfaces visuales. Sus siglas, por su nombre en inglés HyperText Markup Language, hacen referencia al tipo de lenguaje ante el cual te encuentras, un estándar que utiliza etiquetas de apertura y cierre, orientado a almacenar información y a mostrarla.Es importante aclarar que el objetivo de un documento HTML es almacenar información pura y extender el modo en el cual se muestra a otros estándares, como CSS.

Las etiquetas se encargan de almacenar información en cierto formato, y el estilo es manipulado por las hojas de estilo. Por ende, a diferencia de otros documentos, HTML se encarga de almacenar los datos y mostrarlos en el navegador en forma directa sin darle un diseño o estilo.

Si creas un documento HTML, colocas una etiqueta de apertura <p>, escribes algo de texto, varios saltos de línea y luego más texto, seguido de la etiqueta de cierre </p>, el documento renderizado en el navegador mostrará todo en un mismo renglón.

Esto se debe a que HTML almacenó estos caracteres en una etiqueta de tipo párrafo, dándoles un formato en particular. Esto es importante para establecer que todos los elementos HTML sean interpretados en los navegadores web –Google Chrome, Microsoft Edge, Mozilla Firefox o cualquier otro–, por un mismo motor conocido como motor de renderizado y mostrados en la pantalla como la etiqueta lo indique.

Para dar un formato en particular a los datos, HTML usa tanto las etiquetas como los atributos en ellas, que especifican información más detallada de la forma en la cual se deben almacenar dichos datos, o cómo deben interactuar cuando el documento se abra en un navegador.

Un ejemplo común es que, a la hora de crear formularios web, su comportamiento o la forma en la que van a mostrarse en el documento dependen en gran medida de los atributos que se usen.

Las etiquetas básicas HTML permiten al desarrollador crear formularios simples, con poco código, que muestren algunas casillas de ingreso de texto para el visitante. Pero dado que los formularios tienen como objetivo recolectar esos datos y enviarlos a un servidor, es importante saber crear formularios avanzados que no fallen a la hora de ser usados a través de internet.

Para trabajar con interfaces de usuario en HTML, solo es necesario un navegador que muestre el trabajo que hayas realizado, y un editor de texto. Puede ser desde un editor básico, como el bloc de notas del sistema operativo, o algo más avanzado, como un editor de código.

Existen muchos editores para trabajar con código del front-end, entre ellos, se destaca como recomendado Brackets, un editor ligero y de código abierto, de la empresa Adobe. También sobresale Visual Studio Code, que es gratuito y cuenta con soporte nativo de JavaScript y varios frameworks del front-end.

Para conocer las bases de HTML5, y aprender sobre su uso básico puedes recurrir al ebook Sitios Multiplataforma con HTML5 + CSS3. El elemento más usado dentro de los formularios es <input>, una etiqueta que indica que se debe abrir una casilla que permita el ingreso de datos al visitante.

Un elemento input contiene varios atributos que pueden agregarse para modificar su comportamiento y formato, algunos son obligatorios, y otros, recomendables.

Para empezar a trabajar, comienza por crear una carpeta donde irán los documentos por crear. En su interior, abre un documento con extensión HTML llamado index. Este nombre es arbitrario, pero en la mayoría de las aplicaciones es el que se le da al documento inicial o página de inicio. En su interior, coloca las etiquetas HTML de estructura básica:

Una opción interesante es utilizar VS Code y su menú de sugerencias rápidas para crear documentos HTML. Si abres un documento con este editor, colocas html:5 y presionas ENTER, VS Code creará estas etiquetas de forma automática y le ahorrará algo de tiempo al desarrollador.

Visual Studio Code es gratuito, y una buena opción para quienes usan HTML y JavaScript

Los atributos forman parte de todas las etiquetas HTML, incluso de las más básicas, como <html> la cual, como puedes ver al crear el documento, soporta el atributo lang con valores como es, en y otros, para indicar el idioma del documento. En el caso de los formularios, que se indican mediante las etiquetas <form></form>, permiten indicar qué clase de elemento se está usando mediante el atributo type.

Si bien esto es suficiente para mostrar una casilla de texto, no es un formulario completo. El atributo type=”text” le indica al navegador que lo que se puede introducir allí es texto plano, y será tratado como tal, aunque no es el único valor que se puede introducir. El atributo type acepta diferentes valores, comenzando por las casillas de escritura.

Campos de escritura

• type=”email”: el input se ve similar a uno de tipo texto, pero verifica por sí mismo que tenga formato de correo electrónico. En caso que no lo tenga, no permite el envío del formulario
• type=”number”: le indica al navegador que solo se permiten valores numéricos en esta casilla
• type=”password”: esta casilla permite la entrada de texto, cualquier tipo de carácter, pero oculta los valores ingresados
• type=”url”: funciona de forma similar a email, pero valida que el valor ingresado sea con un formato de URL.
• type=”tel”: mediante el atributo, permite validar que se ingrese un número telefónico.

Si pruebas este código en el archivo HTML, verás que el formulario solo puede ser enviado si se introducen 8 números. Los valores entre corchetes indican que cada número puede ir del 0 al 9, y el valor entre llaves indica cuántos números serán en total, en este caso, dos conjuntos de 4 números del 0 al 9

• type=”search” Se ve y se comporta de forma similar a un elemento text, pero se acostumbra usar para campos de búsqueda.

Campos de fechas

Todos los campos anteriores permiten escribir al usuario del sitio la información que desee en forma manual con el teclado. Pero en otras ocasiones, lo que se necesita es enviar datos de fechas que deben respetar cierto estándar. Los datos ingresados suelen ser procesados por un servidor para realizar alguna tarea con ellos, por esto, es necesario que respeten cierto formato, como el caso de las fechas. HTML ofrece el tipo date para seleccionar una fecha específi ca; en las últimas versiones del lenguaje, el documento muestra un calendario interactivo para que el visitante seleccione año, mes, y día

• type=”datetime-local”: esta variante de un campo fecha permite seleccionar fecha y también hora
• type=”month”: en este atributo, el input permite seleccionar un mes del año, devolviendo el número
• type=”time”: con el valor time, la página permite seleccionar solamente la hora.

• type=”week”: este valor permite seleccionar una semana del año, devolviendo el número de esa semana.

El atributo date muestra un calendario que permite seleccionar fácilmente una fecha

Campos de selección

Por otro lado, otros campos muy usados son aquellos que solo permiten elegir valores, uno o varios, de un rango de opciones. No se permiten ingresar valores personalizados, sino que el desarrollador se encarga de crear sus propias opciones. El valor Checkbox permite crear una lista que el usuario puede ver, y seleccionar una, varias o ninguna de las opciones

En este punto, comienzan a aparecer nuevos atributos para los elementos, que son necesarios para la creación de formularios. En este caso, colocar junto al elemento un nombre no significa que HTML lo trate como el valor seleccionado. Para que el formulario se envíe con el valor seleccionado, es necesario que se agregue el atributo value con un valor en su interior.

Eso será lo que se envíe en el formulario, no el texto a su lado, por lo que se recomienda escribir con claridad este atributo. También se desaconseja el uso de acentos o caracteres extraños, de cara al procesamiento de los datos en el servidor. Otro atributo importante que hace su aparición es checked, el cual indica que la casilla ya se encontrará marcada desde que se carga el formulario.

Checkbox es útil para mostrar al usuario varios valores para seleccionar.

Con un funcionamiento parecido, se encuentra “radio”, que muestra una lista de la cual solo un valor puede ser seleccionado.

En este ejemplo, si ejecutas el documento en el navegador, solo podrás elegir un elemento de la lista, nunca dos.

Otro tipo de input es range, en las últimas versiones de HTML, este muestra un selector que devuelve un número del 1 al 100 dependiendo de en qué parte del selector colocó el mouse el usuario.

También existe un selector de colores, que entrega el valor numérico del color formato RGB.

Campos especiales

Por otro lado, existen otros campos de tipo input, destinados al control avanzado de formularios y la manipulación de archivos. Para ello, cuenta con el atributo type=”file”, el cual permite acceder al explorador de archivos de la computadora y enviar un archivo.

Por otro lado, los inputs pueden ser usados para el envío de un formulario o para su manipulación una vez cargado el documento

• type=”submit”: crea un elemento de tipo botón; al hacer clic en él, envía el formulario.

• type=”reset”: este elemento también se comporta como un botón, pero que, en este caso, limpia todos los campos del formulario

• type=”image”: mediante este atributo, el documento mostrará una imagen del servidor que funciona como botón para el envío del formulario

Para lograr esto, crea un formulario simple, con uno o dos campos de texto, y coloca debajo los inputs de envío y reseteo.

Al hacer clic en Enviar, con el documento ya cargado, podrás ver que el formulario se vacía y la página se recarga, aunque al no haber especificado ningún archivo que vaya a procesarlo vuelve a la misma página. En cambio, el botón de Resetear solo limpia los campos sin recargar el sitio.

Por otro lado, también existen los campos ocultos, que se logran mediante el atributo type=”hidden”. Por medio de este, el documento es renderizado y, al llegar a este elemento, se omite y no se muestra por pantalla; se usa en muchos casos para enviar valores predefinidos. Sin embargo, el usuario puede acceder a este elemento, mediante la consola del navegador y modificarlo a su gusto, por lo que su uso es desaconsejado en la mayoría de los casos.

Aprende más sobre HTML5, leyendo la edición completa de este ebook en RedUSERS PREMIUM

Cada mes, lanzamos 2 ebooks USERS, en ellos tratamos en profundidad el tema abordado. En cada ebook, nuestros EXPERTOS vuelcan todos sus conocimientos con el objetivo de brindar una experiencia de capacitación satisfactoria para nuestros lectores.

Lee lo que quieras, donde vayas, por una mínima cuota mensual: SUSCRIBETE!