Formularios HTML y lo nuevo en HTML5

En este artículo trataremos sobre los formularios en HTML y las nuevas etiquetas y características agregadas en HTML5 a los formularios, su funcionamiento, atributos y como usarlo correctamente.

En este Articulo hablaremos sobre los formularios html ¿como funciona un formulario? y las nuevas funcionalidades de los formularios en HTML5. Un formulario es una parte muy importante para la web, tanto por parte del usuario como por parte de los administradores de la web.

Creación de un formulario

La estructura HTML del formulario es bastante simple, se defineen un bloque de código encerrado por las etiquetas:

Dentro de las etiquetas form se incluyen todas las etiquetas o campos que conforman el formulario.

Cada formulario tiene asociada una accion que indica el script que va a procesar los datos introducidos en dicho formulario, para el envío de esos datos la etiqueta form tiene dos parámetros que son obligatorios: action y method.

Parámetros de la etiqueta FORM

  • action: sirve para indicar la aplicación o script que procesará los datos introducidos en los campos del formulario.
  • method: este atributo indica el modo de transmisión de los datos. El modo GET utiliza la dirección URL para pasar los valores introducidos en los campos del formulario, da como resultado una url paresida a esto (www.domini.com/loguin.php?Apellido=lopez&Nombre=Carlos). El modo POST envía los datos como parte de la entrada estándar(no visible en la url).
  • name: Identifica el nombre del formulario, este nombre facilita identificar el formulario desde el escript.
  • target: Indica la ventana de destino diferente a la del envió de los datos.
  • accept-charset: Espesifica el el juego de caracteres que el servidor utiliza para gestionar los datos del formulario.
  • auto-complete: puede ser ON u OFF. Para desactivar el activado y desactivado del formulario.

Los atributos anteriores son los específicos para un formulario, naturalmente también pueden utilizar los atributos comunes para casi todas las etiquetas html(class, id, dir, style etc).

Etiquetas de formulario

Las etiquetas además de ser de distintos tipos, tienen sus atributos propios que se añaden a los comunes de todas las etiquetas.

Las etiquetas de control de formulario son las siguientes:

Etiqueta INPUT

Esta es la etiqueta más utilizada y también la que presenta más opciones. El atributo TYPE le permite indicar la clase de entrada de datos. El valor predeterminado es TEXT y representa una linea de entrada de datos como esta:

Listado de tipos de datos aceptados en la etiqueta INPUT antes de HTML5

  • TEXT
  • CHECKBOX
  • RESET
  • RADIO
  • PASSWORD
  • BOTTON
  • FILE
  • HIDDEN
  • IMAGE
  • SUBMIT

Atributos de la etiqueta input

El principal atributo de la etiqueta INPUT es TYPE, ya que es el que le indica el tipo de datos que debe recibir. A continuación mostraremos las larga lista de atributos que se le pueden agregar a la etiqueta INPUT.

  • TYPE:Mencionado anteriormente, es el que indica el tipo de control de datos que se ha elegido.
  • SRC:Indica el origen de los datos.
  • STEP:Permite establecer la cantidad de valores posibles dentro de un rango.
  • VALUE:Indica el valor que devuelve el control.
  • REQUIERED:(HTML5) Valor booleano que nos indica que es una información obligatoria.
  • PLACEHOLDER:(HTML5) Texto que sirve de información o guia al usuario y desaparece al pulsar dentro del campo, anteriormente este efecto se creaba con javaScript
  • AUTOCOMPLETE: Indica se se activa (on)o se desactiva (off) el auto completado de la entrada de datos.
  • ALT:Se utiliza cuando el tipo es una imagen y no se puede cargar en la interfaz del usuario, se muestra este texto alternativo.
  • CHECKED: Para indicar si el elemento está seleccionado por defecto, solo se utiliza en algunos tipos.
  • DISABLED: Es un valor booleano que indica que el elemento está desactivado, con lo cual no admite entrada de datos.
  • READONLY: Valor booleano que indica que el campo no se puede modificar, solo lectura.
  • FORMENCTYPE: Indica el modo de envío de los datos.
  • FORMACTION: Es la dirección Url que se utiliza al activar el elemento.
  • FORMNOVALIDATE: Es un valor boobleano que indica que el formulario no se valida antes de enviarse.
  • FORMTARGET: Ventana del destino del formulario.
  • HEIGHT: Altura del campo en cuestión.
  • WIDTH: Anchura del campo en cuestión.
  • SIZE: Indica la cantidad de caracteres que se pueden introducir en el campo.
  • MAX: Valor máximo que se puede entrar en el elemento de datos.
  • MIN: Valor Mínimo que se puede entrar en el elemento de datos.
  • MAXLENGTH: Longitud máxima de la entrada de datos.
  • list: Es un identificador de una lista que se define con DATALIST
  • MULTIPLE: Valor booleano que indica que se permite la selección de valores múltiples.
  • NAME: Nombre que identifica al campo de datos.
  • PATTERN: Expresión regular que se utiliza para validar entradas de datos. Este atributo permite hacer validaciones muy complejas y utilizado correctamente puede ahorrarse muchas lineas de código.

Tipos de entrada de datos (tipos de campos de formulario)

Input Type:Text (ver ejemplo)

El tipo texto representa una linea de texto, como en casi todos los campos de formulario su valor se puede inicializar utilizando el atributo value. Este campo tiene la peculiaridad que si se omite el type, se asume Text.
Podemos ver un ejemplo con el siguiente código.

Input Type:Password (ver ejemplo)

Representa una entrada de datos de texto que se visualizan asteriscos pero al enviarse se envían los datos reales, el datos introducido en el campo se asigna al atributo value.

Input Type:Hidden

Es un dato que se mantiene oculto a la vista pero que se pasa al servidor junto con el resto de los campos del formulario. Es un campo adecuado para pasar información de una página a otra y que se puede utilizar en los script como un dato más. Al ser un dato oculto, el usuario no puede ni ver ni modificar el dato. El dato se le asigna al atributo value.

Input Type:Checkbox (ver ejemplo)

Es una dato que es representado al usuario por una casilla de verificación; por lo tanto, sólo puede tener dos valores: seleccionado o no seleccionado. Si se utiliza el atributo checket, el campo se muestra seleccionado por defecto.

Input Type:Radio(ver ejemplo)

Es un dato que le presenta al usuario con botones de opción; una variable asignada a un grupo de botones en el que solo uno puede estar seleccionado. Si se utiliza el atributo checked, el campo aparece seleccionado por defecto, para informarle a HTML que todos los botones forman parte de un grupo de opciones, estos comparten el atributo name.

Input Type:SUBMIT

Este tipo ya lo estamos usando desde el primer ejemplo, este tipo de dato es representado por un botón que al ser pulsado enviar los datos recogidos por el formulario al que este asociado, en este caso el atributo value se utiliza para poner el texto dentro del botón.

Input Type:RESET

Es un dato que se representa por un botón que al ser pulsado reinicia los campos del formulario con los valores predeterminados. El atributo value se utiliza como texto del botón.

Input Type:IMAGE (Ver Ejemplo)

Este atributo ejerce la misma función del input sutmit, con la diferencia de que este atributo es representado por una imagen, la imagen a mostrar es llamada por el atributo src. Al hacer clic en la imagen se enviar el formulario.

Input type:File (Ver Ejemplo)

Este atributo permite enviar archivos al servidor utilizando el protocolo HTTML mediante el método POST. En el navegador se muestra un botón examinar o seleccionar para que podamos elegir el archivo que se requiere enviar.

Nuevos tipos de entrada de datos en formularios HTML5

En HTML5 se han incluido nuevos tipos de entradas de datos para los formularios,algunos de estos nuevos tipo de entrada tienen la capacidad de comprobar si el valor introducido coincide con su tipo de dato lo que nos ayuda bastante a la hora de solucionar la validación de los datos que el usuario introduce.

Con el uso de estas nuevas características en los formulario HTML5 nos evitamos tener que crear script para validar los datos del lado del cliente, en esta parte del articulo tratare de explicar brevemente estos tipos de entrada que nos trae HTML5, aquí un listado de los nuevos tipos de entrada de datos que nos trae HTML5.

  • tel
  • url
  • search
  • email
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

Input type:tel (Ver Ejemplo)

Para números de telefonos utilizaremos el tipo de entrada (type=”tel”). A diferencia de los tipos url y email, el tipo tel no impone un sintaxis o patrón determinado.
Tanto las letras y los números son validos. ¿Raro verdad? Si, pero existe una buena razón para ello: La mayoría de los
países tienen diferentes tipos de números de teléfonos validos, con varias longitudes;por lo tanto, seria imposible especificar
un solo formato como estándar.

Por ejemplo: En EE.UU. +1(316)222-5555 se entiende igual que 415.222.5555

De todas forma podemos crear nosotros mismos el formato que nos interese utilizando javascript u el atributo
pattern en el formulario para especificar dicho formato, siempre avisando al usuario el formato de teléfono que debe introducir.

Puedes encontrar un lista muy interesantes de expresión regular o patrones de datos en esta web, te sirven tanto para este tipo de datos como para otros como tarjeta de crédito, códigos postales etc.

Input type:url (Ver Ejemplo)

Esta entrada de datos se utilizan para especificar una dirección web. Se muestra como un simple campo de texto normal. En muchas pantallas táctiles, el teclado se optimizará para la entrada de direcciones web, con una barra (/) y una tecla de método abreviado (.com)

Con el código anterior no puede estar seguro de que los datos introducidos en este campo realmente sean una url valida ya que solo se valida el formato general de esta; por lo tanto sss://miurl.ccc se considerara valido, auqneu sss:// no es un protocolo real y .ccc no sea un dominio real de primer nivel.

Si quieres asegurarte de que el dato introducido sea realmente una url valida, solo debemos proporcionar a los usuarios un patrón de url que debe introducir y ademas utilizar el atributo pattern para asegurarse que es correcto, podemos utilizar pattern="expresión regular" con el formato que desees validar. como he mencionado anteriormente aquí puedes encontrar expresiones regulares.

Input type:search (Ver Ejemplo)

El tipo d entrada de datos Search(type="search"),proporciana un campo de búsqueda, es muy parecido a un campo de texto normal. Muchos navegadores aplican estilos a este campo de manera coherente con el navegador o las casillas de búsqueda del sistema operativo, algunos navegadores han agregado la posibilidad de de borrar la entrada de datos con un solo clic al proporcionar un icono X una vez que se a escrito algo en el campo.

En estos momentos solo crome y safari proporcionan un botón para el borrado del campo, aunque hay poca diferencia entre usar un type=”text” o un type=”search” recomiendo utilizar cada typo de datos para lo que lo necesite, para eso se han creado y es preferible hacer las coas bien.

Dirección de correo electrónico con Input type:email (Ver Ejemplo)

El tipo email(type=”email”) como e de esperarse, se utiliza para especificar una o más direcciones de correo electrónico. Soporta el atributo booleano multiple, para permitir varias direcciones separadas por coma.

Este campo de email sigue pereciendo un campo de texto normal, almeno visualmente, sin embargo existen diferencia, si se intenta enviar el formulario y el datos introducidos no es un correo electrónico, alguno navegadores ofrecen un mensaje de error, los mensajes de error predeterminados de algunos navegadores los muestro a continuación.

Un uso muy interesante de este campo esta en los dispositivos móviles, cuando estamos escribiendo en un dispositivo móvil y pulsamos sobre este campo email, el teclado del dispositivo móvil cambia a una forma optimizada para la introducción de correos electrónicos, agregando un acceso directo para el símbolo @.

Input type:number (Ver Ejemplo)

El tipo number(input=”number”) proporciona una entrada de dato para agregar un número. Normalmente se trata de un cuadro donde se puede escribir un número o hacer clic en las flechas arriba o abajo para seleccionarlo.

Esta entrada de datos cuenta con los atributos max y min para especificar los valores mínimo y máximos permitidos, tambien puede utilizar el atributo step, este determina la cantidad a disminuir o aumentar cuando hace clic en las flechas.

Los atributos max,min y step son soportados por Opera y aquellos que trabajan con Webkit.

Input type number

Input type:range(Ver Ejemplo)

Este tipo de entrada de datos nos proporciona un deslizador en aquellos navegadores que lo soportan, al igual que el tipo number es soportado por Opera y los navegadores que trabajan con WebKit.Al igual que number, permite los atributo min,max y step. La diferencia entre numbre y range, según la HTML 5 Specification, es que en el campo tipo range no es relevante obtener el el valor exacto del número. Por ejemplo para recoger datos de valoración de usuarios, que elijan entre un rango numérico(1-10).

Input type number

Input type:color (Ver Ejemplo)

Este tipo de dato proporciona al usuario un selector de color, soportado por el momento por Opera, Safari y Crome, este selector devuelve un valor RGB hexadecimal, como #FFF.

Los navegadores que trabajan con WebKit soportan el tipo de entrada de datos de color y pueden indicar si es valido, pero no proporcionan todavía un selector como lo hace Opera.

Input type number

Fechas y Horas en Formularios HTML5 (Ver Ejemplo)

Existen varios tipos nuevos de entrada de datos de fecha y hora, incluido date, datetime,datetime-local, month, time y wiek. Todas aseptan datos formateados de acuerdo a al estándar ISO 8601.

Input Type=”Date”:

Esto engloba la fecha(año,mes,dia) pero no la hora; Ejemplo,2008-06-22,Podemos seleccionar el año,mes y día.

Input type number

month: Solo incluye el año y mes; ejemplo, 2012-10

¿Que te ha parecido este artículo? Dejanos tu valoración...

HorribleMaloBuenoMuy BuenoExcelente (14 votes, average: 4,71 out of 5)
Loading...Loading...

  • Hectorman

    Muy buena info y muy completa, gracias.

  • jordano_p

    Gracias, me queda lo mas interesante, que es la explicación de las nuevas características añadidas a los formularios con html5 y css3.

  • http://twitter.com/frasesbonitas77 pensamientos para reflexionar

    Muy util la informacion, Deberian haber mas paginas como esta. La voy a aconsejar!

  • Ricardo Chi

    Muy util la informacion y los ejemplos, excelente la explicacion del Pattern, necesitaba algo asi

  • http://ga omar

    Como se puede hacer para bloquear las fechas y que no deje insertar fechas futuras es decir si quiero colocar la fecha de nacimiento de algún usuario no me permita ingresar fechas futuras

  • Alex

    Muy buenos ejemplos, congrats!!… una pregunta como hago cuando deshabilito el boton enviar y una vez llenado el formulario que se habilite?

    • http://jordanopolanco.com jordano_p

      Sí, lo puedes hacer con javaScript.

  • http://www.datapronet.com Juan Navas

    Hola
    Necesito hacer dos formularios
    1. Solicitar datos: Nombre, apellido y corre. Metodo POST
    2. En un segundo formato, mostrar los datos introducidos en el formato 1.

  • Johanna

    Muchas gracias me ha servido de mucho,,,,,

  • Jorge

    Buenos dias no se me queda claro como debo hacer para que el mensaje del formulario llegue a mi correo electronico gracias anticipadamente

    • http://jordanopolanco.com jordano_p

      Es normal que no te aya quedado claro, es que en este artículo el propósito es mostrar como funcionan los elementos de un formulario, no llego a tocar el tema de enviar un mensaje desde un formulario.

      Quizás en otro tutorial toque este tema.

      Un saludo

  • jjg

    amigo, como puedo agregar la hora en un campo de texto en html???

  • http://jordanopolanco.com/ jordano_p

    Si es un archivo HTML debes utilizar JavaScript para solucionar esto, solo debes agregar con javascript la hora en el atributo value del input.

    Para que veas como funciona la clase Time() de javaScript miraesta web.

  • Luis Ruiz

    Hola Jordano me uno al grupo que te da las gracias por lo explicativo de tu aporte. Soy una persona de la tercera edad y auto didacta que me he abocado a hacer una página web para la compañía de un amigo, todo lo tengo listo solo que no he podido lograr el envío del formulario por problemas con el php script ya que he visto muchos pero ninguno me envía los datos correctamente, la página la hice en HTML5 con dreamweaver CC. Espero tu aporte por esta vía o si fueras tan amable me puedes enviar uno a mi correo. Gracias anticipadas y Feliz Navidad y un muy venturoso Año Nuevo.

    • http://jordanopolanco.com Jordano Polanco

      Muchas gracias Luis,

      En este artículo no trato el tema, pero si buscas en la red encontraras mucho tutoriales donde te explican como enviar formulario con php.

      Anotare esto para un próximo tutorial, lo tengo en mente ase tiempo pero no he podido crearlo.

      Un saludo.

      • Luis Ruiz

        Muy agradecido Sr. Jordano, por su respuesta.
        Ya logré solucionar el problema.
        Le deseo un Feliz Año Nuevo, y que pueda hacer realidad sus planes tanto familiares, como de trabajo, sobre todo con salud.

  • http://jordanopolanco.com Jordano Polanco

    Muchas gracias Luis, Igualmente. Feliz Año.

  • http://iglesiacfaluque.org.py Edgar Cabral

    Hola… como bloqueo para que en un campo de texto no se pueda ingresar caracteres especiales… @?%$· todos esos simbolos…

    • http://jordanopolanco.com Jordano Polanco

      El otro día estuve trabajando en una web y tuve la misma necesidad, en este blog muestran una forma muy artesanal pero efectiva para lo que buscas.

      Es fácil de implementar, espero te sirva.

  • Luis Ruiz

    hola estimado Jordano, ahora que lo veo hablando sobre los formularios en html5, es posible cambiar el fondo blanco de los textfield y el gris de los botones.

    • http://jordanopolanco.com Jordano Polanco

      Claro que si, con css puedes personalizarlo ha tu gusto, puedes utilizar, degradados css3 o imágenes de fondo, o bien sobras para dar efecto de profundidad.

      Si se puede hacer lo que preguntas, me me enrollo y no paro, jejeje.

      Un saludo.

      • Luis Ruiz

        Gracias voy a buscar la forma

  • Marco Antonio

    Buen aporte man

  • Irene

    Excelente contenido..fue de mucha utilidad. Gracias 😉

  • https://www.facebook.com/cesarangelina Cesar Angelina M

    Excelente Post Felicidades me sirvio de mucho

    • http://jordanopolanco.com Jordano Polanco

      Gracias @Cesar, me alegro que te haya servido.

  • http://merkuriacomunicacion.wordpress.com roxph

    Gracias muy buena información!

  • Manuel

    Buen Post, una preguntita,¿Es posible crear un input type=text que cuando se rellene acepte etiquetas html?

  • VALERIA

    Hola que tal! excelente el artículo y aprovecho a ver si me puedes ayudar con algo. Preparamos un formulario para que las personas completen antes de poder descargar un PDF gratuito. Esto nos funciona desde la web (es obligatorio completarlo para poder descargarlo) pero quienes entran desde el teléfono movil pueden poner simplemente descargar sin llenar lo datos!! No sabemos porque y es un problema, llegan los formularios vacíos. ¿Cómo hacemos para quw desde el telefono sea un requerimiento completar el formulario? Ojala nos puedas ayudar!

  • https://lobally.com Iván de la Jara

    Vaya plan…

  • Brayan

    Alguien con conociminetos en consola web podria editar los campos hidden que soluciones presentas a este tipo de inconvenientes ?