El input search es un campo de búsqueda compuesto por un input text. La única diferencia de usar un input search a un input text para buscar es meramente estética. Adopta el estilo que le proporcione la plataforma que lo está usando. En cada navegador el diseño del search será diferente.
Algunos navegadores no sólo proporcionan diseño sino también funcionalidad. Es posible que un buscador disponga de un botón «x» para borrar el texto introducido. Esto sólo está disponible en los navegadores Chrome, Safari, Opera y Microsoft Edge.
|
1 2 3 4 |
<form id="form-busca" action="buscar.php" method="post"> <input type="search" id="buscador" name="buscador" placeholder="Buscar..."> <input type="submit" value="Buscar"> </form> |
El search es preciso que esté en un form para poder realizar una búsqueda. El atributo action indica el fichero encargado de la búsqueda y este tomará el valor introducido en el input.
Ejemplo input search en firefox
Atributos más usados
El input search puede usar múltiples atributos de HTML5 a mayores de los mostrados en el ejemplo, pero diré algunos que son los que más probablemente utilicéis:
- disabled: Permite desactivar el input.
- form: Permite asociar el form al input introduciendo el id del form.(form = «form-busca»)
- autocomplete: Esto autorellenará el campo con valores introducidos previamente por el usuario. autocomplete=»off», autocomplete=»on»)
- maxlength: Longitud máxima para el valor introducido.
- required: Establece que el input debe ser rellenado. Determina si el input tiene que ser rellenado obligatoriamente (required=»required»)
- size: Cambia la anchura del input.
- pattern: Expresión regular para que el valor introducido cumpla un patrón.
- novalidate: Hace que el input no se valide al enviarse el formulario.
Y hasta aquí el post de hoy. A seguir picando 🙂