Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 8 de 8

Tema: [HTML5] Repasando las nuevas tecnologías de los formularios en HTML5

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    21

    [HTML5] Repasando las nuevas tecnologías de los formularios en HTML5

    Todos sabemos (o deberíamos) que HTML5, es por decirlo de alguna manera, el futuro. Una parte para demostrarlo es en los formularios, en los que disponemos de un montón de nuevas herramientas muy sencillas y que nos ahorran tiempo (y código extra sobretodo!). En este post vamos a repasar algunos de los nuevos tipos que usar en un formulario, si falta alguno (probablemente falte!!) os agradecería que lo comentaráis y lo añadimos al post

    number
    Debe usarse para trabajar con campos de texto en los que sólamente se ingresarán números (nada de letras). Si abrimos la página con un navegador móvil, en vez de abrir el teclado normal (que incluye todos los cáracteres: números, letras, símbolos...) abrirá un teclado numérico.
    Además, si el visitante utiliza Google Chrome, se muestran dos flechas en el lado derecho del input para aumentar/reducir el número del input. Y si utilizamos el atributo step, podemos modificar la cantidad en la que las flechas aumentan/diminuyen un número (de 1 en 1, de 2 en 2, de 3 en 3...). También se le pueden añadir los atributos min y max para determinar el número mínimo y máximo que podrá tener el input.
    Código HTML:
    <input type="number">
    
    <!-- Con el atributo step (para aumentar la cifra de 2 en 2) y sin límite -->
    <input type="number" step="2">
    
    <!-- Con los atributos min y max -->
    <input type="number" step="5" min="0" max="100">

    tel
    Debe usarse para trabajar con campos de texto en los que sólamente se ingresarán números de teléfono. Si abrimos la página con un navegador móvil, se abrirá un teclado numérico para ingresar un número de teléfono.
    Código HTML:
    <input type="tel">

    search
    Debe usarse para trabajar con campos de texto en los que ingresaremos una cadena a buscar. Con este input, el navegador revisará nuestro historial para buscar similitudes a lo introducido en el campo y nos dará "sugerencias" con la función de autocompletado. Además añade una "x" al final del input para borrar su contenido.
    Código HTML:
    <input type="search">

    url
    Debe usarse para trabajar con campos de texto en los que se ingresará una dirección a una página. Si lo que el usuario introdujo no tiene el formato de una URL, mostrará un aviso y el formulario no se enviará.
    Código HTML:
    <input type="url">

    date
    Debe usarse para trabajar con campos de texto en los que se introducirá una fecha. Al hacer click sobre él, se desplegará una pequeña ventana con un calendario (también llamado datepicker) para elegir la fecha que queremos introducir (o la ponemos nosotros en formato día/mes/año).
    Código HTML:
    <input type="date">

    color
    Al hacer click sobre este tipo de campo, se abrirá el típico selector de color para seleccionar un color y poder enviarlo.
    Código HTML:
    <input type="color">

    time
    Debe usarse para trabajar con campos de texto en los que se introducirá una hora determinada. En él se puede escribir una hora determinada (con formato hora : minutos : segundos) y muestra dos flechas para aumentarla/reducirla.
    Código HTML:
    <input type="time">

    email
    Debe usarse para trabajar con campos de texto en los que se introducirá una dirección de correo electrónico (email) con su estructura (dirección@dominio.xxx). Además en un móvil añade la tecla @ al teclado.
    Código HTML:
    <input type="email">

    range
    Con este tipo podremos seleccionar una cifra entre las que el programador defina con una flecha deslizante. Para definir la cifra mínima y máxima se utilizan los atributos min y max.
    Código HTML:
    <input type="range" min="0" max="10">
    Última edición por Doodleo; 28/07/2013 a las 23:27

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    21
    Pero con HTML5 no sólo disponemos de nuevos tipos de inputs, además también nos ofrece unos cuantos atributos extras:

    placeholder
    Con este atributo mostraremos un texto en gris claro en el cuadro de texto que sólo aparecerá cuando el usuario no introdujo ningún valor. Si escribe algo y lo borra, el placeholder volverá a aparecer toodas las veces que lo haga ;)
    Código HTML:
    <input type="text" placeholder="Introduce aquí tu texto...">

    required
    Utilizando este atributo estamos indicándole al formulario que ese campo es obligatorio y que si el usuario no indicó ningún valor, el formulario no debe enviarse. En caso de que esto pase, efectivamente el formulario no se enviará y al usuario le aparecerá una alerta diciendo que el campo es obligatorio.
    Código HTML:
    <input type="text" required>

    autofocus
    Con este atributo, al cargar nuestra página el campo de texto que lo posea estará activo sin necesidad de hacer click.
    Código HTML:
    <input type="text" autofocus>

    autocomplete
    Si no especificamos este atributo, el navegador dará por hecho que está activado. Si lo desactivamos, el campo que lo posea no mostrará la función de autocompletado. Además, dependiendo del navegador, autocomplete puede ser (des)habilitado a través de la configuración de este, así que no hay que fiarse del atributo, o sea, no programar (scripts Javascript o PHP) pensando que siempre estará activado. (Gracias a @skaparate por la corrección :D)
    Código HTML:
    <!-- Este input lo tendrá activado -->
    <input type="text" autocomplete>
    
    <!-- Este input no lo tendrá activado -->
    <input type="text" autocomplete="off">
    
    <!-- Si queremos desactivar en todo el formulario el autocompletado, añadiremos el atributo a la etiqueta <form> -->
    <form name="formulario" method="post" autocomplete="off">
      ...código del formulario...
    </form>
    
    <!-- Si queremos activar en todo el formulario el autocompletado, añadimos el atributo a la etiqueta <form> -->
    <form name="formulario" method="post" autocomplete>
      ...código del formulario...
    </form>

    multiple
    Este atributo funciona en los campos de archivo (type="file") y sirve para seleccionar varios archivos en el mismo campo para su posterior manejo (subirlo al servidor o lo que hagas después con ellos). Para seleccionar varios, simplemente en la ventana que se abra para seleccionarlo pulsa la tecla Control y haz click en los archivos que quieres seleccionar a la vez.
    El atributo multiple también funciona en los campos de tipo email y permite ingresar en el mismo campo varias direcciones de correo electrónico (con su validación, como si fuera un campo de email normal). Para ingresar varios emails debes escribir las direcciones separadas por una coma (si no se separan así aparecerá una alerta diciendo que las separe por comas y no enviará el formulario)
    Código HTML:
    <!-- Subir varios archivos -->
    <input type="file" multiple>
    
    <!-- Ingresar varios emails -->
    <input type="email" multiple>

    formtarget
    Este atributo debe añadírsele al botón/input mediante el cual enviamos el formulario, y si lo especificamos con formtarget="_blank" el formulario se enviará en una ventana a parte.
    Código HTML:
    <input type="submit" formtarget="_blank" value="Enviar el formulario en una nueva ventana">

    pattern
    El atributo pattern es fundamental para hacer una validación específica de un campo. Podemos elegir qué carácteres aceptar, una longitud de carácteres requerida, etc... Podéis ver una explicación más detallada en la página de CCTW: http://www.comocreartuweb.com/curso-de-html/formularios-con-html5/pattern.html
    Código HTML:
    <!-- Con el siguiente pattern sólo aceptaríamos el campo si contiene 5 carácteres -->
    <input type="text" pattern="\S{5}">
    
    <!-- Con el siguiente pattern sólo aceptaríamos el campo si contiene de entre 5 a 10 carácteres -->
    <input type="text" pattern="\S{5,10}">

    Puedes probar todos estos nuevos tipos de campos y atributos en vivo en: http://doodleo.site88.net/html5/formularios/ (No te preocupes no se guarda ningún dato ni nada, de hecho hazlo con datos falsos!)
    Última edición por Doodleo; 29/07/2013 a las 12:23

  3. #3
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,079
    Poder de Reputación
    25
    Hola, excelente aporte, como siempre :).

    Una pequeña corrección: maxlength no es nuevo en HTML5, ya existía anteriormente -> http://www.w3schools.com/tags/att_input_maxlength.asp.

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    21
    @skaparate: Gracias por el comentario y la corección :), cambio ese atributo por autocomplete ​que creo que sí es nuevo, no?

  5. #5
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,079
    Poder de Reputación
    25
    cambio ese atributo por autocomplete ​que creo que sí es nuevo, no?
    Sí, ese si lo es :) (no lo conocía XD, así que gracias nuevamente).

    #Editado#

    Un aporte sobre autocomplete: dependiendo del navegador, autocomplete puede ser (des)habilitado a través de la configuración de este, así que no hay que fiarse del atributo, o sea, no programar (scripts Javascript o PHP) pensando que siempre estará activado.
    Última edición por skaparate; 25/07/2013 a las 17:23

  6. #6
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    21
    Editado en el post, gracias por la información!! (tampoco yo sabía eso :p)
    El objetivo del post es recoger todos o por lo menos casi todos los nuevos tipos y atributos para tenerlos ya recogidos en un sólo post, así que de poco a poco iré revisando la página de W3C que los contiene para ir añadiéndolos al post con su explicación.

  7. #7
    Recien Llegado! Habitante Avatar de miguel espinoza
    Fecha de Ingreso
    23 jun, 12
    Ubicación
    ocotlan jalisco, mexico
    Mensajes
    15
    Poder de Reputación
    12
    gracias me ha servido bastante, justo estaba pensando en hacer una consulta preguntando si existian algunos atributos de formularios que hicieran lo que hacen estos, por lo tanto felicitaciones, una vez mas este foro y los maestros me han sacado del apuro, jeje saludos.

  8. #8
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    21
    @miguel espinoza: Me alegro de que te haya servido, si notas que falta algo puedes comentarlo y intentaremos arreglarlo :) Creo que me faltan algunos atributos como week, en cuánto pueda me pongo a ello.

Temas Similares

  1. Formularios html5
    Por RYDDLE en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 2
    Último Mensaje: 07/12/2012, 17:50
  2. Html5 y css3
    Por adl en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 0
    Último Mensaje: 02/08/2012, 01:29
  3. Html-kit y html5
    Por echpa en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 0
    Último Mensaje: 20/06/2012, 18:40
  4. Dudas HTML5
    Por Manolek en el foro Foro General
    Respuestas: 1
    Último Mensaje: 29/04/2012, 18:37
  5. Nuevas tecnologías QR CODE
    Por johnpeterjp en el foro Otros Elementos
    Respuestas: 6
    Último Mensaje: 18/01/2012, 20:01

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •