Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


HTML5 search input: Campo de búsqueda para formularios

Con HTML5 search input podemos hacer validaciones automáticas en un campo de búsqueda. Este nuevo input para los formularios en HTML5 hará que en los dispositivos móviles salga por defecto el botón de buscar en el teclado.

Sintaxis de HTML5 search input

La sintaxis de este nuevo input HTML5 es muy sencilla:

En la sintaxis podéis apreciar que en el type hemos declarado el valor ‘search’, con esto es suficiente para que el navegador detecte el tipo de input que es.

Ejemplo de HTML5 search input

Vamos a ver en este ejemplo probado en Google Chrome cómo incluir el campo de tipo search en nuestros formularios:

Os explico el código:

  • He creado un formulario con método POST.
  • En el he introducido 2 input, uno de tipo submit y otro de tipo search.
  • Ahora solo nos qeda probar el input en nuestro ordenador o dispositivo móvil.

Imagen de ejemplo del search input en un navegador de un ordenador.

html5 search inputComo se puede apreciar en la imagen, lo característico del input es que al escribir en él nos sale una ‘X’.  Esta ‘X’ sirve para borrar la cadena escrita:

Imagen del search input de HTML5 en dispositivos móviles

Os pongo esta imagen de ejemplo tomada desde un iPhone con navegador Safari, si os fijáis sale por defecto el botón ‘Buscar‘ en el teclado.

html5 search input iphone

Atributos válidos en HTML5 search input

Voy a listaros los atributos válidos para este input según la W3C.

  1. name: Nombre del input (name=»nombre del input»).
  2. disabled: Atributo que determina si está desactivado el input para la introducción de datos (disable=»disabled»), por defecto activado.
  3. type: tipo de input, en este caso es ‘search’
  4. form: Con este atributo se asocia el id del form al que pertenece el input (form=»id del form»).
  5. autocomplete: Con autocomplete activado el input se autorrellenará con contenidos anteriormente enviados por él mismo (autocomplete=»off», autocomplete=»on»).
  6. autofocus: Este atributo hace que el cursor se situe en en input (autofocus=»autofocus»).
  7. list: Asocia mediante id una lista de valores predefinidos (list=»nombre lista»).
  8. maxlength: Longitud máxima en caracteres del número introducido.
  9. readonly: Con el valor activado el input no podrá variar de valor, no se podrá editar (readonly=»readonly»).
  10. required: Determina si el input tiene que ser rellenado obligatoriamente (required=»required»).
  11. size: Anchura del input en el form.
  12. pattern: Expresión regular que a de cumplir el parámetro de búsqueda.
  13. placeholder: Permite al usuario ver una leyenda en el input de entrada de datos. Cuando el usuario clicke sobre el input esta leyenda desaparecerá (placeholder=»leyenda, texto explicativo»).
  14. value: Valor por defecto del input.
  15. dirname: Se envía la dirección en la que ha sido escrito el texto del search input.
  16. novalidate: Hace que el input no se valide al enviarse el formulario.

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies