Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Los elementos <input> tipo "search" son campos de texto diseñados para que el usuario introduzca terminos de búsqueda.

<input type="search">

Valor Un DOMString representa el valor contenido en el campo de búsqueda.
Eventos change y input
Atributos comunes compatibles autocomplete, list, maxlength, minlengthpatternplaceholderrequiredsize.
Atributos IDL value
Métodos select(), setRangeText(), setSelectionRange().

Valor

El atributo value contiene el DOMString que representa el valor contenido en el campo de búsqueda. Puedes recuperarlo usando la propiedad HTMLInputElement.value en JavaScript.

miBusqueda.value;

Si no existen restricciones de validación para la entrada (ver Validation para más detalles), el valor puede ser una cadena de texto o una cadena vacía ("").

Uso de inputs de búsqueda

Los elementos <input> de tipo search son muy similares a los tipo text, exceptuando que están específicamente destinados para manejar términos de búsqueda.

Ejemplo simple

<form>
  <div>
    <input type="search" id="miBusqueda" name="q">
    <button>Buscar</button>
  </div>
</form>

Se muestra similar a:

q es el name estándar que se da a las cajas de búsqueda. Cuando se envía, el par name/value se manda al servidor será q=terminosdebusqueda. Recuerda poner un name a tu input, en caso contrario no se enviará nada.

Diferencias entre los tipos search y text

Las principales diferencias básicas residen en la manera en que los navegadores los manejan. Lo primero que hay que tener en cuenta es que algunos navegadores muestran un icono de aspa al que se puede hacer clic para eliminar el término de búsqueda de forma instantánea, si se desea. La siguiente captura de pantalla viene de Chrome:

Además, los navegadores modernos también tienden a almacenar automáticamente los términos de búsqueda previamente introducidos en los dominios, que luego aparecen como opciones de autocompletar cuando se realizan búsquedas subsiguientes en entradas de búsqueda en ese dominio. Esta captura de pantalla es de Firefox:

En este punto, echemos un vistazo a algunas técnicas útiles que puede aplicar a sus formularios de búsqueda.

Estableciendo textos de sustitución

Puedes proporcionar un texto de sustitución (placeholder) útil dentro de la entrada de búsqueda que podría dar una pista sobre qué hacer mediante el atributo placeholder. Mira el siguiente ejemplo:

<form>
  <div>
    <input type="search" id="miBusqueda" name="q"
     placeholder="Buscar en el sitio...">
    <button>Buscar</button>
  </div>
</form>

Puedes ver como se representa el texto de sustitución a continuación:

Etiquetas de formulario de búsqueda y la accesibilidad

Un problema con los formularios de búsqueda es su accesibilidad  el patrón general es que no se le incluya una etiqueta label (aunque puede proporcionar un icono de lupa o similar), ya que el propósito de un formulario de búsqueda es normalmente bastante obvio para los usuarios con visión debido al emplazamiento (Este ejemplo muestra un patrón típico).

Sin embargo esto podría causar confusión para los usuarios de lectores de pantalla. Una manera para solucionar esto que no afectará en su diseño visual es utilizar características de WAI-ARIA:

  • Un atributo role con el valor search en el elemento <form> va a provocar que el lector de pantalla anuncie el formulario como un formulario de búsqueda.
  • Si esto no es suficiente, se puede usar el atributo aria-label en el propio inputEsto está diseñado para contener una etiqueta de texto descriptivo que será leído por el lector de pantalla básicamente, es un no visual equivalente a <label>.

Echemos un vistazo a un ejemplo:

<form role="search">
  <div>
    <input type="search" id="miBusqueda" name="q"
     placeholder="Buscar en el sitio..."
     aria-label="Buscar en el contenido del sitio">
    <button>Buscar</button>
  </div>
</form>

Puedes ver cómo se representa a continuación:

No hay diferencia visual con respecto al ejemplo anterior, pero los usuarios del lector de pantalla disponen de mucha más información para ellos.

Nota: Ver Signposts/Landmarks para obtener más información acerca de estas características de accesibilidad.

Physical input element size

The physical size of the input box can be controlled using the size attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the search box is 30 characters wide:

<form>
  <div>
    <input type="search" id="mySearch" name="q"
    placeholder="Search the site..." size="30">
    <button>Search</button>
  </div>
</form>

Validation

<input> elements of type search have the same validation features avaiable to them as regular text inputs. It is less like that you'd want to use validation features in general for search boxes. In many cases, users should just be allowed to search for anything, but there are a few cases to consider.

Note: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.

A note on styling

There are useful pseudo-classes available for styling valid/invalid form elements — :valid and :invalid. In this section, we'll use the following CSS, which will place a check (tick) next to inputs containing valid values, and a cross next to inputs containing invalid values.

input:invalid ~ span:after {
    content: '✖';
    padding-left: 5px;
    position: absolute:
}

input:valid ~ span:after {
    content: '✓';
    padding-left: 5px;
    position: absolute:
}

The technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don't display icons placed directly after them very well.

Making input required

You can use the required attribute as an easy way of making entering a value required before form submission is allowed:

<form>
  <div>
    <input type="search" id="mySearch" name="q"
    placeholder="Search the site..." required>
    <button>Search</button>
    <span class="validity"></span>
  </div>
</form>

This renders like so:

In addition, if you try to submit the form with no search term entered into it, the browser will show a message. The follow example is from Firefox:

form field with attached message that says Please fill out this field

Different messages will be shown when you try to submit the form with different types of invalid data contained inside the inputs; see the below examples.

Input value length

You can specify a minimum length, in characters, for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value.

The example below requires that the entered value be 4–8 characters in length.

<form>
  <div>
    <label for="mySearch">Search for user</label>
    <input type="search" id="mySearch" name="q"
    placeholder="User IDs are 4–8 characters in length" required
    size="30" minlength="4" maxlength="8">
    <button>Search</button>
    <span class="validity"></span>
  </div>
</form>

This renders like so:

If you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). If you try to go beyond 8 characters in length, the browser won't let you.

Specifying a pattern

You can use the pattern attribute to specify a regular expression that the inputted value must follow to be considered valid (see Validating against a regular expression for a simple crash course).

Let's look at an example. Say we wanted to provide a product ID search form, and the IDs were all codes of two letters followed by four numbers? the following example covers it:

The example below requires that the entered value be 4–8 characters in length.

<form>
  <div>
    <label for="mySearch">Search for product by ID:</label>
    <input type="search" id="mySearch" name="q"
    placeholder="two letters followed by four numbers" required
    size="30" pattern="[A-z]{2}[0-9]{4}">
    <button>Search</button>
    <span class="validity"></span>
  </div>
</form>

This renders like so:

Examples

You can see a good example of a search form used in context at our website-aria-roles example (see it live).

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<input type="search">' in that specification.
Living Standard Initial definition
HTML 5.1
The definition of '<input type="search">' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5.0 ? Unknown (4.0) 10 10.62 ?
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile iOS WebKit
(Safari/Chrome/Firefox/etc)
Basic support ? ? ? 4.0 (4.0) ? (Yes) 3.1

See also

Etiquetas y colaboradores del documento

 Colaboradores en esta página: lionralfs, StripTM
 Última actualización por: lionralfs,