HTML Elemento INPUT Search (Busqueda de Datos)

LEMENTO INPUT
(TYPE=SEARCH)
Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags
y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.
TABLA DE CONTENIDOS
 01Descripción
 02Ejemplos
 03Atributos
o Atributos específicos
o Atributos globales
 04Eventos
o Eventos globales
DESCRIPCIÓN
El elemento input, teniendo el valor "search" en su atributo type, representa
un campo de texto de una sola línea para propósitos de búsqueda. El control asociado a este
campo es una caja de texto que permite a los usuarios editar una sola línea de texto regular.
Los controles de búsqueda son útiles para recopilar líneas cortas de texto que los agentes
procesadores o programas del lado cliente usarán como parámetros para conducir
operaciones de búsqueda.
Un campo de texto regular y un campo de búsqueda son muy similares. La
diferencia entre ellos es principalemente estilística: los navegadores pueden representar sus
controles de manera diferente, de acuerdo a su propósito.
El contenido del atributo value en este elemento representa al valor incial del control.
Este valor es el que será mostrado cuando el documento es cargado y cuando un botón de
reinicio es presionado en el formulario.
EJEMPLOS
En nuestro primer ejemplo recrearemos un formulario de búsqueda básico. En la
entrada de búsqueda, haremos uso del atributo placeholder, el cual ha sido introducido
en HTML5. Este atributo nos permite dar una pista acerca de la información que se espera
sea provista en el control, como ejemplos o descripciones cortas. Esta pista será mostrada
dentro del control (como si fuera el valor) sólo cuando el control no tenga un valor real.
Cuando el usuario comience a tipear, el texto de placeholder será removido del control.
<form action="../../form-result.php" method="post" target="_blank">
<p>
Búsqueda de música: <input type="search" name="busquedamusica"
placeholder="Canción, autor, álbum...">
<input type="submit" value="Buscar">
</p>
</form>
Buscar
Búsqueda de música:
En el segundo ejemplo, usaremos algunos atributos más: size para establecer el
ancho del control como un número de caracteres visibles y maxlength para establecer el
número máximo de caracteres que el valor puede tomar.
Los autores no deberían confiar en los atributos minlength y maxlength. Los usuarios

podrían enviar la información del formulario con navegadores que (algunos
intencionalmente) no soportan estas características.

<p>
Busca un código: <input type="search" name="busquedacodigo" size="4"
maxlength="4">
</p>
</form>
Buscar
Busca un código:
Ahora probemos otro atributo nuevo en HTML5: list. Este atributo enlaza al
control con un elemento datalist al referenciar su atributo id. El datalist asociado
provee un número de sugerencias que los usuarios pueden elegir para rellenar
automáticamente el valor del control.
El soporte provisto por los navegadores para datalist es incompleto. Los autores pueden
tener que recurrir a programas para proveer esta funcionalidad consistentemente.

<p>
Busca entre nuestros modelos: <input type="search"
name="busquedamodelos" list="listamodelos">
</p>
</form>
<datalist id="listamodelos">
<option value="Camaro">
<option value="Corvette">
<option value="Impala">
<option value="Colorado">
</datalist>
Buscar
Busca entre nuestros modelos:
Nuestro ejemplo final combina dos atributos, también nuevos en HTML5, que
habitualmente trabajan juntos. Estos son pattern y required. Su importancia se vuelve
evidente cuando el autor necesita establecer un conjunto de reglas acerca del formato de la
información que puede ser ingresada en un control.
El atributo pattern, ayuda estableciendo expresiones regulares que cualquier
valor ingresado debe acatar. Cuando está presente, el atributo title toma particular
relevancia, ya que es responsable de proveer una explicación acerca de las reglas que
aplican en el campo. Los navegadores pueden usar esta información para componer el
mensaje de error que se muestra al usuario luego de un intento fallido de envío.
Por otra parte, el atributo required impide a los usuarios dejar el campo vacío.
Ambos atributos, juntos, indican que el control debe ser rellenado y especifican cómo debe
ser rellenado.
La presencia de estos atributos implica que el envío del formulario será interrumpido hasta
que sus requerimientos sean satisfechos. Los navegadores mostrarán mensajes de error
cuando el usuario intente enviar campos que no cumplen las premisas.
Una expresión regular es una secuencia de caracteres que forman un patrón de búsqueda,
principalmente para su uso en correspondencia de patrones y cadenas u operaciones
estilo búsqueda y reemplazo.
El soporte provisto por los navegadores para el atributo required es incompleto. Los

autores pueden tener que recurrir a programas para proveer esta funcionalidad
consistentemente.

<p>
Buscar por código: <input type="search" name="busquedacodigo"
pattern="[A-Za-z0-9]{8,20}" title="Un código válido consiste en una
cadena con 8 a 20 caracteres, cada uno de los cuales es una letra o un
dígito" required>
</p>
</form>
Buscar
Buscar por código:
ATRIBUTOS
ATRIBUTOS ESPECÍFICOS
AUTOFOCUS
Un valor booleano que instruye al navegador a establecer el enfoque sobre este
control cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog)
donde el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la
cadena vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan
pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido cargados.
Ejemplo
<p><input type="search" name="campobusqueda" autofocus></p>
DIRNAME
Un nombre para un nuevo campo especialmente creado con el fin de transmitir la
direccionalidad del texto ingresado. Este atributo, nuevo en HTML5, permite a los autores
manipular correctamente los valores enviados con cualquier direccionalidad de texto, al
agregar un campo que es enviado con el formulario. El nombre de ese campo será el valor
de este atributo.
Siendo relativamente nuevo, el soporte provisto por los navegadores para el

atributo dirname es incompleto. Los autores deberían revisar el soporte cuando la
información es recibida en el servidor.
Ejemplo
<p>
<input type="search" name="campobusqueda" dirname="campobusqueda-
dir">
</p>
</form>
Buscar

DISABLED
Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el
atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el
control estará deshabilitado.
Los controles deshabilitados son representados en color gris (si son visibles), son
impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no
son enviados cuando el formulario es despachado.
Ejemplo
<p>
<input type="search" name="campobusqueda" disabled>
</p>
</form>
Buscar

FORM
El valor del atributo id del formulario con el que este control está asociado.
Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en
formularios anidados o distantes.
Ejemplo
<p><input type="search" name="campobusqueda" form="formulario1"></p>
<form id="formulario1" action="../../form-result.php" method="post"
target="_blank">
<p><input type="submit" value="Buscar"></p>
</form>
Buscar
LIST
Un identificador que concuerda con el valor del
atributo id del elemento datalist con el que este control está asociado.
El datalist referenciado por este atributoproveerá un número de sugerencias que los
usuarios pueden escoger para autocompletar el control.
El soporte provisto por los navegadores para datalist es incompleto. Los autores pueden
tener que recurrir a programas para proveer esta funcionalidad consistentemente.
Ejemplo
<p>
Buscar mascotas: <input type="search" name="campobusqueda"
list="listamascotas">
<input type="submit" value="Search"></p>
</p>
</form>
<datalist id="listamascotas">
<option value="Perro">
<option value="Gato">
<option value="Conejo">
<option value="Loro">
</datalist>
Search
Buscar mascotas:
MAXLENGTH
Un entero que indica el número máximo de caracteres que el valor de este control
puede tener.
Los autores no deberían confiar en el atributo maxlength. Los usuarios podrían enviar la

información del formulario con navegadores que (algunos intencionalmente) no soportan
estas características.
Ejemplo
<p>
Buscar código: <input type="search" name="buscarcodigo"
maxlength="2">
</p>
</form>
Buscar
Buscar código:
MINLENGTH
Un entero que indica el número mínimo de caracteres que el valor de este control
puede tener.
Los autores no deberían confiar en el atributo minlength. Los usuarios podrían enviar la

información del formulario con navegadores que (algunos intencionalmente) no soportan
estas características.
El soporte provisto por los navegadores para el atributo minlength es extremadamente

bajo (hasta el 18/12/2014). Los autores no deberían confiar en este atributo hasta que el
soporte crezca.
Ejemplo
<p>
Buscar código: <input type="search" name="buscarcodigo"
minlength="1">
</p>
</form>
Buscar
Buscar código:
NAME
Un nombre para el control. Este nombre será enviado por el navegador al agente
procesador, emparejado con el contenido del atributo value. Ambos atributos juntos
conformarán un par nombre-valor que será utilizado para procesar la información del
formulario.
Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos

navegadores e incluido en el estándar HTML, no está permitido en este atributo.
Ejemplo
<p>
Buscar ciudad: <input type="search" name="buscarciudad">
</p>
</form>
Buscar
Buscar ciudad:
PATTERN
Una expresión regular para comparar con el valor del control antes de que el
formulario sea enviado. Este atributo puede ser usado para especificar un formato que los
usuarios tendrán que respetar a la hora de completar el campo. Si este patrón no es
respetado, un mensaje de error será mostrado durante el envío y el proceso será cancelado
(a menos que el atirbuto formnovalidate esté presente en el formulario o en el botón de
envío).
El atributo title toma un significado especial cuando este atributo está
presente: se espera que éste provea una explicación acerca de las reglas que aplican en el
campo. Los navegadores pueden usar la información de title para componer el mensaje
de error que es mostrado al usuario cuando el proceso de envío es cancelado.
Una expresión regular es una secuencia de caracteres que forman un patrón de búsqueda,
principalmente para su uso en correspondencia de patrones y cadenas u operaciones
estilo búsqueda y reemplazo.
Ejemplo
<p>
Buscar por código: <input type="search" name="buscarporcodigo"
pattern="[A-Z0-9]{4,10}" title="Un código válido debe tener entre 4 y 10
caracteres de logitud, donde cada carácter puede ser una letra mayúscula
o un dígito">
</p>
</form>
Buscar
Buscar por código:
PLACEHOLDER
Una línea de texto que se supone provee una pista acerca de cómo debería ser
rellenado el campo, como ejemplos o descripciones cortas. Los navegadores pueden
mostrar los contenidos de este atributo en el control mientras este no tiene un valor. Tan
pronto como el usuario comience a escribir su propio texto, el texto placeholder debería
desaparecer del control.
Los autores no deberían utilizar este atributo para reemplazar a la etiqueta. Las etiquetas
están pensdas para proveer un título, mientras que el texto placeholder debería dar una
pequeña pista acerca de cómo rellenar el campo. Además, es de esperarse el
texto placeholder desaparezca cuando el usuario comience a escribir en el control.
Ejemplo
<p>
Busca rpor estado: <input type="search" name="buscarporestado"
placeholder="Kansas, Arizona, Colorado...">
</p>
</form>
Buscar
Busca rpor estado:
READONLY
Un valor booleano que instruye al navegador a impedir que el usuario cambie el
valor del control. Si este atributo tiene el valor "readonly" o la cadena vacía (""), o si
simplemente está presente, el usuario no tendrá premitido hacer cambios al valor en el
control.
Aunque este atributo previene que el valor del control sea editado, no toda interacción es
bloqueada: los usuario aún podrán seleccionar y copiar el texto en el control.
Ejemplo
<p>
Búsqueda de usuarios: <input type="search" name="busquedausuarios"
value="samwise4855" readonly>
</p>
</form>
Buscar
Búsqueda de usuarios:
REQUIRED
Un valor booleano que indica si este control puede ser dejado en blanco o no. Si
este atributo tiene el valor "required" o la cadena vacía (""), o si está siplemente presente, el
usuario tendrá que rellenar el control a fin de poder enviar el formulario.
Si un control con el atributo required presente es dejado en blanco, los navegadores que

soporten este mecanismo arrojarán un error previo al envío y cancelarán el proceso
inmediatamente.
El soporte provisto por los navegadores para el atributo required es incompleto. Los

autores pueden tener que recurrir a programas para proveer esta funcionalidad
consistentemente.
Ejemplo
<p>
Búsqueda de títulos: <input type="search" name="busquedatitulos"
required>
</p>
</form>
Buscar
Búsqueda de títulos:
SIZE
Un entero para ser usado como ancho del elemento, como un número de
caracteres que deberian ser visibles en el control simultáneamente.
Como los caracteres normalmente no tienen el mismo ancho, los navegadores pueden
definir el ancho de carácter de acuerdo a ciertos criterios (como ancho promedio o
máximo).
Ejemplo
<p>
Buscar por codigo: <input type="search" name="buscarporcodigo"
size="4">
</p>
</form>
Buscar
Buscar por codigo:
TYPE
Un valor que indica el tipo de campo que representa este elemento. Existen
veintidós valores posibles (insensibles a mayúsculas/minúsculas):
 hidden: un control oculto utilizado para enviar información al servidor, típicamente
manejado por programas.
 text: un control usado para la entrada de una sola línea de texto.
 search: igaul a text pero con fines de búsqueda.
 tel: un control usado para proveer un número de teléfono.
 url: una caja de texto usada para el ingreso de un único URL absoluto.
 email: un control diseñado para editar una o más direcciones de e-mail.
 password: una caja de texto para la edición de contraseñas, donde los caracteres son
representados por puntos.
 date: un control para ingresar una fecha específica.
 month: un control para ingresar un mes específico.
 week: un control para ingresar una semana específica.
 time: un control para ingresar una hora específica.
 datetime-local: un control para ingresar una fecha y hora local específica.
 number: un control para ingresar un número.
 range: un control para ingresar uno o dos números dentro de un rango.
 color: un control para ingresar un color.
 checkbox: un control para ingresar un valor booleano (verdadero/falso).
 radio: un control para elegir una única opción entre varias.
 file: un control usado para subir archivos al servidor.
 submit: un botón usado para enviar el formulario.
 image: igual a submit pero con la habilidad de verse como una imagen en lugar de usar la
apariencia predeterminada de los botones.
 reset: un botón usado para reiniciar los controles del formulario a sus valores iniciales.
 button: un botón sin una acción predeterminada asociada.
Cuando este atributo está ausente, el elemento se comporta como si tuviera el
valor "text".
Ejemplo
<input type="search" name="searchstring">
VALUE
Un valor inicial para el control, que será establecido cuando la página se cargue y
cuando el botón de reinicio sea presionado.
Ejemplo
<p>Búsqueda de títulos: <input type="search" name="busquedatitulos"
value="Un hombre sin honor"></p>
<p>
<input type="reset" value="Restaurar formulario">
<p>
</form>
Búsqueda de títulos:
Buscar Restaurar formulario

ATRIBUTOS GLOBALES
Los atributos son un mecanismo de HTML mediante el cual los autores pueden establecer
parámetros o configuraciones para los elementos. Estos atributos pueden definir, por
ejemplo, la dirección del texto o el lenguaje usado dentro del elemento, una relación entre
este y otro elemento, o información consultiva para su correcta interpretación, entre muchas
otras.
En HTML5 existe un número de atributos definidos para todos los elementos en
el estándar, denominados atributos globales. A pesar de ello, no todos los elementos serán
afectados por todos los atributos grobales. Por ejemplo, el atributo spellcheck no
afectará el comportamiento o la semántica de un párrafo, del mismo modo que el
atributo lang no tendrá efecto en un elemento sin contenido o atributos de texto.
LISTA DE ATRIBUTOS
GLOBALES
ACCESSKEY
Una tecla, o una lista de teclas separadas por espacios, para ser asociadas al
elemento. Los navegadores ejecutarán la acción asociada al elemento (por ejemplo,
siguiendo un vínculo para el elemento a) o le darán el foco cuando las teclas especificadas
en este atributo sean presionadas en combinación
con ALT , CTRL , ALT+SHIFT o CTRL+ALT , dependiendo del navegador.
Ejemplo
<p>You can use keys to follow this link: <a accesskey="h"
href="http://www.htmlquick.com/">Homepage of HTMLQuick.com</a></p>
You can use keys to follow this link: Homepage of HTMLQuick.com
AUTOCAPITALIZE
Un valor enumerado indicando a los navegadores cómo el texto ingresado por el
usuario debería ser automáticamente convertido a mayúsculas. Existen cuatro valores
posibles:
 off ó none: el navegador no debería convertir automáticamente el texto ingresado a
mayúsculas.
 on ó senctences: el navegador debería convertir automáticamente a mayúsculas el primer
carácter de cada oración.
 words: el navegador debería convertir automáticamente a mayúsculas el primer carácter
de cada palabra.
 characters: el navegador debería convertir automáticamente a mayúsculas todos los
caracteres ingresados.
Ejemplo
<p>Título: <input type="text" name="titulo" autocapitalize="words"></p>
Título:
AUTOCOMPLETE
El atributo autocomplete provee información acerca de si y cómo los
navegadores deberían sugerir opciones automáticamente para este control, como un intento
de adivinar lo que el usuario está escribiendo. Existen tres valores posibles para este
atributo:
 El valor on, indicando al navegador que debería sugerir opciones automáticamente pero
sin proveer ninguna otra información acerca del tipo de datos que se espera en el control.
 El valor off, indicando al navegador que no debería sugerir opciones automáticamente,
ya sea debido a que la información a ser ingresada en el control es particularmente
sensible (como el usuario para acceder a un área muy segura) o debido a que su valor
nunca será reutilizado (como una clave de uso único en un proceso de registración).
 Una lista de identificadores de detalles de autocompletado, indicando al navegador que
debería sugerir opciones automáticamente y especificando el tipo de valor que se espera
recibir.
Los valores "on" y "off" nunca aplican a elementos input cuyos atributos type poseen el

valor hidden. En tales elementos, el contenido de este atributo describe el significado del
valor del elemento.
Una lista de identificadores de detalles de autocompletado puede estar compuesta

por los siguientes identificadores en el orden especificado.
1. Opcionalmente, un identificador que comience con la cadena " section-" (insensible a
mayúsculas/minúsculas), indicando el grupo al cual el campo pertenece.
2. Opcionalmente, uno de los dos identificadores siguientes (insensibles a
mayúsculas/minúsculas):
o shipping: el campo es parte de la dirección de envío.
o billing: el campo es parte de la dirección de facturación.
3. Una de las dos opciones siguientes:
o Cualquiera de los siguientes identificadores (insensibles a
mayúsculas/minúsculas):
 Para entradas de texto (elementos input de
tipo hidden, text ó search, textarea y select):
 name: un nombre completo
 honorific-prefix: un prefijo o título, como Sir, Sr., Dr., etc.
 given-name: un primer nombre.
 additional-name: nombres adicionales o secundarios.
 family-name: un apellido o nombre de familia.
 honorific-suffix: un sufijo, como Jr., II ó ABIST.
 nickname: un sobrenombre o nombre corto utilizado en lugar del
nombre completo.
 organization: la empresa asociada con la persona o información
en otros campos asociados a este campo.
 organization-title: un título profesional, como Contador,
Arquitecto, Ingeniero, etc.
 username: un nombre de usuario, típicamente usado para
operaciones de acceso, como "adan457" ó "materia_oscura_01".
 address-line1: una componente de una dirección.
 address-level4: el nivel administrativo más específico, en
direcciones con cuatro niveles administrativos.
 address-level3: el tercer nivel administrativo, en direcciones con
tres o más niveles administrativos.
 address-level2: el segundo nivel administrativo, en direcciones
con dos o más niveles administrativos. En países con dos niveles
administrativos, esto sería típicamente la ciudad, pueblo o aldea.
 address-level1: el nivel administrativo más amplio. Esto podría ser
la provincia o estado dentro del cual se encuentra la localidad.
 country: un código de país representando a un país, como "US",
"UK" ó "ES".
 country-name: el nombre de un país, como Albania, Liberia ó
Uruguay.
 postal-code: un código postal, código ZIP, código CEDEX (si
es CEDEX, se debe agregar "CEDEX", y el distrito, si es relevante, al
campo address-level2), etc., como 02139, 1428 ó 10025.
 cc-name: un nombre completo como figure en el instrumento de
pago.
 cc-given-name: un primer nombre como figure en el instrumento
de pago.
 cc-additional-name: nombres adicionales o secundarios como
figure en el instrumento de pago.
 cc-family-name: un apellido o nombre de familia como figure en
el instrumento de pago.
 cc-number: un código identificando al instrumento de pago, como
el número de una tarjeta de crédito.
 cc-csc: el código de seguridad del el instrumento de pago
(CSC, CVC, CVV, SPC, CCID, etc.).
 cc-type: el tipo de intrumento de pago utilizado, como la tarjeta
de crédito.
 transaction-currency: un código de divisa representando a la
divisa a ser usada en la transacción, como "USD", "ARS" ó "GBP".
 language: una etiqueta de lenguaje identifiando al idioma
preferido, como "en", "en-GB" ó "es-419".
 sex: un identificador de género, como masculino o femenino.
 Para entradas de contraseñas (elementos input de
tipo hidden, text, search ó password, textarea y select):
 new-password: una nueva contraseña, típicamente requerida al
crear una cuenta o al cambiar una contraseña.
 current-password: la actual contraseña, típicamente requerida al
ingresar o al cambiar una contraseña.
 one-time-code: un código de un solo uso, utilizado para verificar
la identidad del usuario.
 Para entradas de múltiples líneas (elementos input de
tipo hidden, textarea y select):
 street-address: una dirección, posiblemente compuesta por
múltiples líneas.
 Para entradas de mes (elementos input de
tipo hidden, text, search ó month, textarea y select):
 cc-exp: la fecha de expiración del instrumento de pago.
 Para entradas numéricas (elementos input de
tipo hidden, text, search ó number, textarea y select):
 cc-month: el mes de expiración del instrumento de pago.
 cc-year: el año de expiración del instrumento de pago.
 transaction-amount: el monto de la transacción, como al ingresar
un valor en una subasta.
 bday-day: el día de una fecha de nacimiento.
 bday-month: el mes de una fecha de nacimiento.
 bday-year: el año de una fecha de nacimiento.
 Para entradas de fecha (elementos input de
tipo hidden, text, search ó date, textarea y select):
 bday: una fecha de nacimiento.
 Para entradas de URL (elementos input de
tipo hidden, text, search ó url, textarea y select):
 url: una página correspondiente a la empresa, persona, dirección
o información de contacto en otros campos asociados a este
campo, como "http://www.yo-soy-juan.com".
 photo: una fotografía, ícono, u otra imagen a la empresa, persona,
dirección o información de contacto en otros campos asociados a
este campo, como
"http://www.yo-soy-juan.com/imagenes/yo.jpg".
o Lo siguiente, en el orden dado:
0. Opcionalmente, un identificador que coincide (insensible a
mayúsculas/minúsculas) con alguno de los valores siguientes:
 home: indicando que el campo es para contactar a alguien en su
residencia.
 work: indicando que el campo es para contactar a alguien en su
lugar de trabajo.
 mobile: indicando que el campo es para contactar a alguien en su
dispositivo móvil.
 fax: indicando que el campo describe datos de contacto de una
máquina de fax.
 pager: indicando que el campo describe datos de contacto de
un pager ó beeper.
1. Un identificador que coincide (insensible a mayúsculas/minúsculas) con
alguno de los siguientes identificadores de detalles de autocompletado:
 Para entradas telefónicas (elementos input de
tipo hidden, text, search ó telephone, textarea y selec
t):
 tel: un número de teléfono completo, incluyendo el
código de país, como +1 617 253 5702.
 Para entradas de texto (elementos input de
tipo hidden, text ó search, textarea y select):
 tel-country-code: el código de país de un número
telefónico, como +1 ó +54.
 tel-national: un número de teléfono sin el código de país,
con un prefijo nacional, si corresponde, como 617 253
5702.
 tel-area-code: el código de área de un número telefónico,
como 617.
 tel-local: un número de teléfono sin el código de país y sin
el código de área nacional, como 253 5702.
 tel-local-prefix: la primera parte de un número de
teléfono sin código de país y sin código de área, cuando
ese número se encuentra dividido en dos componentes.
 tel-local-suffix: la segunda parte de un número de
teléfono sin código de país y sin código de área, cuando
ese número se encuentra dividido en dos componentes.
 tel-extension: el código de extensión interno de un
número telefónico.
 Para entradas de e-mail (elementos input de
tipo hidden, text, search ó email, textarea y select):
 email: una dirección de correo electrónico, como
juanperez@desconocido.com.
 username: un nombre de usuario, típicamente usado para
operaciones de acceso, como
"segundo_plano@astromail.com".
 Para entradas de URL (elementos input de
tipo hidden, text, search ó url, textarea y select):
 impp: una URL representando a un punto de un protocolo
de mensajería instantánea, como "aim:goim?
screenname=juanperez" ó
"xmpp:juanperez@desconocido.com".
Usualmente, los navegadores llevan a cabo las operaciones de autocompletado recuperando

datos de una base de datos con entradas previas u otras fuentes con información del usuaio.
Ejemplo
<p>
Código de registración: <input type="text" name="codigoreg"
autocomplete="off"><br>
Usuario: <input type="text" name="usuario"
autocomplete="username"><br>
<input type="submit" value="Enviar datos">
</p>
</form>
Código de registración:
Usuario:
Enviar datos
CLASS
El nombre de una clase, o una lista de nombres de clases separados por espacios.
Este atributo es utilizado en conjunto con hojas de estilo e indica al navegador qué clases se
supone asignarán atributos presentacionales al elemento.
Ejemplo
<p class="referencias">Este artículo está basado en el libro "El viento
en lo árboles" de Jhon L. Brooks</p>
CONTENTEDITABLE
Un valor que indica al navegador si debería permitir al visitante editar los
contenidos del elemento. Si el atributo toma el valor "true" o la cadena vacía (""), o si
simplemente está presente, los contenidos del elemento serán editables. Si toma el valor
"false" (valor por defecto) o si está ausente, los contenidos no serán editables.
Ejemplo
<p contenteditable>Si tu navegador soporta este atributo, podrás editar
este párrafo.</p>
Si tu navegador soporta este atributo, podrás editar este párrafo.
CONTEXTMENU
El valor de id de un menú emergente contextual (menu con el valor "popup" en
su atributo type). Este menu será mostrado por los navegadores como un menú contextual
para el elemento, habitualmente cuando el usuario haga click derecho sobre éste.
El soporte nativo para interfaces de menú es incompleto. Los autores pueden tener que
depender de scripts para proveer esta funcionalidad en cualquier navegador, hasta que el
soporte aumente.
Ejemplo
<p contextmenu="menumegusta">Cuando te das cuenta que estás del lado de
la mayoría, es tiempo de hacer una pausa y refleccionar.</p>
<menu type="popup" id="menumegusta">
<menuitem label="Fabuloso!" type="radio" radiogroup="megustagruporadio"
checked></menuitem>
<menuitem label="Mmm... nah!" type="radio"
radiogroup="megustagruporadio"></menuitem>
</menu>
Cuando te das cuenta que estás del lado de la mayoría, es tiempo de hacer una pausa y
refleccionar.
DIR
La dirección en la que el texto en el contenido del elemento está escrito. Este
atributo es útil al insertar una porción de contenido con una direccionalidad diferente a la
del documento, como cuando se incluyen textos en arábico, hebreo, o siríaco en un
documento escrito en alguna lengua occidental. Puede tomar tres valores indiferentes a
mayúsculas y minúsculas:
 rtl: Derecha a izquierda.
 ltr: Izquierda a derecha.
 auto: El navegador decide qué direccionalidad tiene el texto.
El mecanismo provisto por los navegadores para detectar la direccionalidad del texto es
muy primitivo. Se alienta a los autores a proveer un valor para este atributo (aparte de
"auto") cuando sea necesario.
Ejemplo
<p>El cartel decía: <q lang="he" dir="rtl">[texto en hebreo]</q>.</p>
DRAGGABLE
Un valor booleano que especifica si el elemento puede ser arrastrado. Si el
atributo toma el valor "true", el navegador le permitirá al usuario que arrastre este
elemento. Si toma el valor "false" las capacidades de arrastre no serán provistas.
Cuando este atributo está presente, el atributo title debe estar presente también y proveer
un nombre para el elemento, vital en interacciones no-visuales.
Desafortunadamente, el soporte provisto por los navegadores para operaciones de "arrastrar
y soltar" es extremadamente bajo. Los autores pueden tener que recurrir a scripts hasta que
el soporte aumente.
Ejemplo
<p draggable="true">Si tu navegador lo permite, puedes arrastrar este
párrafo.</p>
Si tu navegador lo permite, puedes arrastrar este párrafo.
ENTERKEYHINT
Un atributo enumerado que provee a los navegadores una pista acerca del
propósito de la tecla enter en el contexto actual. Los navegadores pueden
consecuentemente mostrar un ícono específico para la tecla enter en teclados virtuales,
que refleje de mejor forma la acción que será ejecutada al presionar la tecla.
El atributo enterkeyhint ha sido introducido recientemente al estándar y se espera que

el soporte provisto por los navegadores sea bajo. Sin embargo, su uso es aún recomendado
ya que puede proveer una característica no crucial cuando es soportado.
Ejemplo
<p>
Busca tu libro: <input type="text" name="busquedalibro"
inputmode="search" enterkeyhint="search">
</p>
</form>
Buscar
Busca tu libro:
HIDDEN
Un valor que indica que el elemento no es aún, o ya no es más, relevante. El
atributo puede indicar esto tomando los valores "hidden" o la cadena vacía (""), o con su
sola presencia. Los navegadores esconderán todo el elemento del documento (no sólo
visual sino completamente) como si éste no existiera.
Ejemplo
<p>Este es el primer párrafo.</p>
<p hidden>Este es el segundo párrafo.</p>
<p>Este es el tercer párrafo.</p>
Este es el primer párrafo.
Este es el tercer párrafo.
INPUTMODE
Un valor que indica qué tipo de mecanismo de entrada sería más beneficioso para
que los usuarios ingresen datos en un control o cualquier elemento con el
atributo contenteditable presente. Existen ocho valores posibles, insensibles a
mayúsculas/minúsculas:
 none: no debería proveerse ningún mecanismo de entrada.
 text: entrada de texto para la configuración regional del usuario.
 tel: entrada de número de teléfono, incluyendo teclas para los dígitos del 0 al 9, el
carácter "#", y el carácter "*". En algunas configuraciones regionales, también pueden
incluirse etiquetas mnemotécnicas alfanuméricas.
 url: entrada de texto para la configuración regional del usuario, con teclas para la entrada
de direcciones web, tales como los caracteres "/" y "." y para entrada rápida de cadenas
comúnmente encontradas en nombres de dominio como "www." ó ".co.uk".
 email: entrada de texto para la configuración regional del usuario, con teclas para la
entrada de direcciones de e-mail, tales como los caracteres "@" y ".".
 numeric: entrada numérica, que incluye teclas para los dígitos del 0 al 9, el carácter
separador de miles para la configuración regional, y el carácter para indicar números
negativos.
 decimal: entrada numérica fraccional, que adicionalmente incluye una tecla para el
separador decimal.
 search: entrada de texto optimizada para propósitos de búsqueda.
Los navegadores pueden usar la información en este atributo para proveer un mecanismo
que asista al usuario en el rellenado de la información. Por ejemplo, los teclados virtuales
en pantalla pueden proveer teclas especiales para el modo de entrada especificado.
Ejemplo
<p>
Ingresa tu correo electrónico: <input type="text"
name="correoelectronico" inputmode="email">
<input type="submit" value="Enviar datos">
</p>
</form>
Enviar datos
Ingresa tu correo electrónico:
ID
Un identificador para el elemento. Este identificador debe ser único en el
documento y puede ser utilizado para referirse al elemento desde vínculos, scripts,
definidiones de estilo u otros atributos.
Los identificadores deben tener al menos un carácter de largo y no presentar caracteres de

espacio (espacios, tabulaciones, saltos de línea, quiebres de página o retornos de carro).
Ejemplo
<p id="parrafo1">Es párrafo tiene un ID para que puedas, por ejemplo,
manipularlo desde un script.</p>
IS
Un nombre para un elemento personalizado que extiende a otro elemento del
estándar.
Este atributo requiere que una clase extendida sea definida programáticamente para tener
sentido. Los autores de contenido pueden no encontrarle un uso productivo.
Ejemplo
<button is="super-boton">Este es un botón personalizado que extiende a un
elemento button regular.</button>
ITEMID
Un URI que coincida con un identificador global para la propiedad que el
elemento está representando. Este identificador global debe ser definido por el vocabulario
declarado en el atributo itemtype.
Este atributo debería estar presente únicamente si los

atributos itemscope e itemtype también están presentes.
Este atributo es parte de la sintaxis de microdatos, un mecanismo de HTML5 para proveer

versiones de los datos contenidos en el documento, que sean accesibles para scripts.
Ejemplo
<ul itemscope itemtype="http://vocab.example.net/book"
itemid="urn:isbn:1-619-49173-7">
<li>Título: <span itemprop="title">El signo de los cuatro</span></li>
<li>Autor: <span itemprop="author">Sir Arthur Conan Doyle</span></li>
<li>Fecha de publicación: <time itemprop="pubdate" datetime="2013-10-
03">3 de Octubre de 2013</time></li>
</ul>
ITEMPROP
Una lista de uno o más identificadores separados por espacios, que proveen cada
uno el nombre de una propiedad para la cual este elemento brinda un valor.
Los identificadores en este atributo deben ser una propiedad permitida por la especificación
definida en el atributo itemtype del ítem. Si el atributo itemtype no está presente,
puede ser cualquier valor que no contenga un carácter punto ("."), ni un carácter dos puntos
(":").

Ejemplo
<p itemscope><span itemprop="user">John Doe</span>: <span
itemprop="comment">Eso está muy bueno!</span></p>
ITEMREF
Una lista de uno o más identificadores separados por espacios, que coincidan con
los atributos id de los elementos que proveen información para este ítem.
Ejemplo
<table>
<tr>
<th>Nombre</th>
<td itemscope itemprop="name" itemref="apellido1">Johann
Sebastian</td>
<td itemscope itemprop="name" itemref="apellido2">Wolfgang
Amadeus</td>
</tr>
<tr>
<th>Apellido</th>
<td id="apellido1" itemprop="surname">Bach</td>
<td id="apellido2" itemprop="surname">Mozart</td>
</tr>
</table>
ITEMSCOPE
Un valor booleano que indica si el elemento es un ítem en el modelo de sintaxis
de microdatos. Si este atributo toma el valor "itemscope" o la cadena vacía (""), o si
simplemente está presente, el elemento es un ítem.

Ejemplo
<p itemscope>La <span itemprop="event-name">fiesta de cumpleaños de
John</span> comenzará <time itemprop="event-time" datetime="2015-05-21
20:00">esta noche a las 8:00 en punto</time></p>
ITEMTYPE
Una lista de URIs, cada uno apuntando un recurso que define un vocabulario (el
conjunto de nombre utilizados en el atributo itemprop). Si esta lista tiene más de un
elemento, todos los elementos deben definir el mismo vocabulario.
La mayoría de los vocabularios globales pueden encontrarse en el sitio Schema.org. Debido

a su popularidad, se alienta a los autores a usarlo como recurso de vocabularios seimpre que
sea posible.
Ejemplo
<p itemscope itemtype="http://schema.org/Event">La ópera <span
itemprop="name">La traviata</span> será puesta en escena <time
itemprop="startDate" datetime="2015-08-10 22:00">el próximo lunes a las
10pm</time> y tendrá <time itemprop="duration" datetime="PT 2H">dos
horas</time> de duración.</p>
LANG
El lenguaje utilizado en el contenido del elemento y en todos los atributos que
contengan texto. El lenguaje debe ser especificado con una etiqueta de lenguaje válida.
Es muy importante definir el atributo lang siempre que el texto sea presentado en un

lenguaje diferente al del documento. Esto puede ser especialmente beneficioso para
intérpretes como los navegadores de voz, que necesitan cambiar la pronunciación de las
palabras de acuerdo al lenguaje en el que están escritas.
Ejemplo
<p>'Chaval' es la traducción más apropiada para '<span
lang="en">Guy</span>'.</p>
'Chaval' es la traducción más apropiada para 'Guy'.
NONCE
Un número criptográfico de utilización única ("nonce") que puede ser utilizado
por la Política de seguridad de contenido para determinar si el recurso externo especificado
por este elemento será cargado y aplicado al documento.
Ejemplo
<link rel="search" href="buscar.php"
nonce="aHR0cDovL2h0bWxxdWljay5jb20vYnVzYy5waHANCg==">
SLOT
El nombre del slot del componente en el cual este elemento debería emplazarse.
El valor de este atributo debería coincidir con el atributo name del slot objetivo.
El atributo slot es parte de la especificación de shadow DOM y está pensado para ser

manejado por programas. Los autores de contenido pueden encontrarle escasa utilidad en
este atributo.
Ejemplo
<span slot="album">Mirando las estrellas</span>
SPELLCHECK
Un valor que indica si el elemento debería estar sujeto a revisiones ortográficas o
gramaticales. Si se establece a "true" o a la cadena vacía (""), los navegadores normalmente
subrayarán en rojo las palabras con errores y proveerán alternativas en menús contextuales.
Cuando se establece a "false", el navegador evitará revisar el contenido del elemento en
busca de errores.
El atributo spellcheck está pensado para actuar en campos de texto y elementos con el

atributo contenteditable habilitado. En la mayoría de los navegadores, sus efectos
sólo serán mostrados cuando el elemento obtenga el enfoque.
El soporte para el atributo spellcheck es incompleto. Los autores pueden tener que
recurrir a scripts con el fin de proveer revisiones ortográficas en cualquier navegador hasta
que el soporte aumente.
Ejemplo
<input type="text" value="Texto a ser rebisado" spellcheck="true">
Texto a ser
STYLE
Un conjunto de declaraciones de CSS que serán aplicadas al elemento por parte
de los navegadores, y definirán atributos presentacionales para éste. En contraste con el
atributo class, este es considerado un modo "in situ" de aplicar propiedades de estilo.
Ejemplo
<p style="color: #ff6600; font-size: 1.5em">Este es un párrafo con un
estilo definido.</p>
Este es un párrafo con un estilo definido.

TABINDEX
Un número entero que indica la posición del elemento en la navegación por
tabulación (la navegación a través de todos los elementos que pueden recibir el enfoque
presionando la tecla TAB ). Si el valor es negativo, el elemento se encontrará excluido de la
navegación por tabulación.
Los elementos que por defecto pueden recibir el enfoque son: a y link (con un
valor en href), button, input (cuando su tipo no es
"hidden"), select, textarea, menuitem, un elemento que define un contexto de
navegación (como iframe), un elemento con el atributo contenteditable presente
o th con una interfaz de ordenamiento.
Si este atributo es omitido, el navegador determinará automáticamente la posición
de todos los elementos capaces de recibir el enfoque de acuerdo a su posición en el código.
Además de decidir la posición del elemento en la navegación por tabulación, el

atributo tabindex también indica que el elemento puede recibir el enfoque,
independientemente de su condición predeterminada.
Ejemplo
<a href="document2.html" tabindex="2" style="float: right;">Second
document</a>
<a href="document1.html" tabindex="1">First document.</a>
TITLE
Una línea de texto que representa información consultiva para el elemento, la
cual podría actuar como descripción, expansión, nota al pie, título, etiqueta, instrucción,
etc. Los navegadores usualmente mostrarán esta información como una descripción
emergente (pequeña caja de texto) en respuesta a algún evento como, por ejemplo, cuando
el usuario posa el mouse sobre el elemento.
Algunos elementos, como link, abbr, e input, definen semánticas adicionales para el

atributo title más allá de la semántica descripta más arriba.
Ejemplo
<p>Pon el mouse sobre el siguiente vínculo para ver la descripción
emergente: <a title="Vínculo a la página de inicio de HTMLQuick.com"
href="http://www.htmlquick.com/es/">Tutoriales HTML</a>.</p>
Pon el mouse sobre el siguiente vínculo para ver la descripción emergente: Tutoriales
HTML.
TRANSLATE
Un valor que indica si el navegador debería traducir el contenido del elemento y
el de sus hijos (incluídos los atributos con valores de texto) cuando el documento es
adaptado a la lengua local. Si se establece a "yes" o a la cadena vacía (""), los navegadores
normalmente traducirán todos los textos en este elemento. Si se establece a "false", los
navegadores omitirán al elemento en el proceso de traducción.
El soporte provisto por los navegadores para el atributo translate es incompleto. Los

autores no deberían confiar en esta funcionalidad hasta que el soporte aumente.
Ejemplo
<p translate="yes">Este fin de semana iremos al festival '<span
translate="no">Fiesta loca</span>'.</p>
Este fin de semana iremos al festival 'Fiesta loca'.
DROPZONE
Una lista de identificadores separados por espacios, que coinciden,
indiferentemente de mayúsculas y minúscula, uno de los siguientes valores:
 copy: Indica que una copia del contenido soltado en el elemento debe ser agregada.
 move: Hace que el contenido soltado se mueva al elemento.
 link: Indica que un vínculo al contenido soltado debe ser agregado al elemento.
 string:[type]: Indica que está permitido soltar una cadena del tipo "[type]" en el elemento.
 file:[type]: Indica que estña permitido soltar un archivo de tipo "[type]" en el elemento.
El atributo dropzone No debería tener más de uno de los tres primeros valores ("copy",
"move", y "link"). Si ninguno de ellos está presente, el valor "copy" estará implícito.
Este atributo ha sido removido del estándar debido a la falta de soporte provisto por los
navegadores. Los autores deberían recurrir a scripts del lado cliente para reemplazar su
funcionalidad.
Ejemplo
<p dropzone="copy string:text/html file:image/png">Este párrafo en una
zona de entrega. Si tu navegador lo soporta deberías poder arrojar aquí
cadenas HTML, y archivos PNG.</p>
ATRIBUTOS DE DATOS
PERSONALIZADOS
Cualquier atributo en cualquier elemento que comience con la cadena "data-" es
un atributo de datos personalizados. Estos atributos definen datos personalizados por el
autor para el elemento en el cual son declarados y están diseñados para ser utilizados, en
general, por programas.
En el siguiente ejemplo, se utilizan atirbutos de datos personalizados para ayudar
a un programa a identificar un ítem a la venta y sus características, mientras no se dejan
rastros de esta información específica en la vista de usuario.
Ejemplo
<td data-codigo="3213764135438543" data-categoria="chucherias" data-
precio="25000000">
<b>Ítem:</b> Huevo Fabergé Original de la Coronación Imperial<br>
<b>Precio:</b> $25.000.000
</td>
Ítem: Huevo Fabergé Original de la Coronación Imperial
Precio: $25.000.000
EVENTOS GLOBALES
Los eventos son mecanismos que permiten crear una interacción entre los elementos del
documento y ciertos sucesos relacionados al sistema y a las acciones del usuario. Estos eventos pueden
ser asociados a fragmentos de código escritos en un lenguaje del lado cliente (como JavaScript) que
llevarán a cabo su proceso cuando se cumplan las condiciones propias del evento al cual han sido
asociados. Por ejemplo, un programa puede estar listo para realizar una animación en la página cuando
el usuario haga click sobre un elemento determinado.
En HTML5 existe un número de eventos definidos para todos los elementos en el estándar,
denominados eventos globales. Sin embargo, muchos de estos eventos tendrán efecto únicamente en un
puñado de elementos. Por ejemplo, existen muchos eventos que sólo serán ejectuados para los
elementos video y audio, como oncanplay, onpause y onloadeddata.
LISTA DE EVENTOS GLOBALES

ONABORT
El proceso de carga de este elemento ha sido abortado por el usuario.
ONAUXCLICK
El usuario ha presionado y luego soltado un botón secundario (central, derecho o cualquier
otro) del mouse, mientras su cursor estaba sobre este elemento.
Este evento ha sido recientemente introducido al estándar y la implementación por parte de los
navegadores puede ser incompleta. Se aconseja precaución al utilizarlo.
Ejemplo
<p onauxclick="cambiarColor(this)">Al hacer click con cualquier botón
secundario sobre este párrafo su color de fondo cambiará.</p>
Al hacer click con cualquier botón secundario sobre este párrafo su color de fondo cambiará.
ONBLUR
Este elemento ha perdido el enfoque.
Ejemplo
<p>Cuando deselecciones este control, el color de su contenedor cambiará:
<input type="text" onblur="cambiarColor(this.parentNode)"></p>
Cuando deselecciones este control, el color de su contenedor cambiará:

ONCANCEL
El usuario ha optado por cancelar la acción presentada por esta ventana de diálogo
(dialog). Esto puede haber sido causado por el usuario, si éste ha presionando el botón CANCEL o la
tecla ESCAPE , por ejemplo.
ONCANPLAY
Este elemento de video o audio puede continuar con su reproducción, pero
probablemente, ésta deberá ser pausada para precargar datos antes de llegar a su final.
La ejecución de este evento está basada en meras estimaciones. No existe certeza de que la reproducción
deberá necesariamente ser pausada para pregargar.
ONCANPLAYTHROUGH
Este video o audio puede continuar con su reproducción, y es probable que ésta llegue a
su final sin la necesidad de ser pausada para precargar datos.
La ejecución de este evento está basada en meras estimaciones. No existe certeza de que la reproducción
será completada sin la necesidad de pausarla para pregargar.
ONCHANGE
El valor de este control de formulario (form) ha cambiado desde la última vez que ha
recibido el enfoque, y el enfoque ha sido pasado de este a otro elemento.
Ejemplo
<p>Cuando edites y deselecciones este control, el color de fondo de su
contenedor cambiará: <input type="text"
onchange="cambiarColor(this.parentNode)"></p>
Cuando edites y deselecciones este control, el color de fondo de su contenedor cambiará:
ONCLICK
El usuario ha presionado y luego soltado el botón principal (usualmente izquierdo)
del mouse, mientras su cursor estaba sobre este elemento.
Este evento es también ejecutado en un elemento antes de su activación, cuando es accionado desde otro
dispositivo como, por ejemplo, un teclado.
Este evento está pensado para funcionar únicamente con el botón primario, desde la introducción del
evento onauxclick. Sin embargo, algunos navegadores pueden todavía disparar este evento para otros
botones del mouse.
Ejemplo
<p onclick="cambiarColor(this)">Al hacer click con el botón primario
sobre este párrafo su color de fondo cambiará.</p>
Al hacer click con el botón primario sobre este párrafo su color de fondo cambiará.
ONCLOSE
El usuario ha cerrado este diálogo (dialog).
ONCONTEXTMENU
El usuario ha llamado al menú contextual para este elemento, muy probablemente, haciendo
click sobre éste con el botón derecho del mouse.
ONCOPY
El usuario ha copiado información de este elemento al portapapeles.
navegadores puede ser incompleta. Se aconseja precaución al utilizarlo.
Ejemplo
<p oncopy="cambiarColor(this)">Si copias alguna parte de este texto al
portapapeles, el párrafo cambiará su color de fondo.</p>
Si copias alguna parte de este texto al portapapeles, el párrafo cambiará su color de fondo.
ONCUECHANGE
La pista actual de este track ha cambiado. Esto ocurre cuando, por ejemplo, la próxima
línea en los subtítulos de un video es mostrada.
ONCUT
El usuario ha cortado información de este elemento, lo que significa que la ha cppiado al
portapapeles al mismo tiempo que la eliminó del documento.
navegadores puede ser incompleta. Algunos navegadores pueden disparar el evento aún cuando el texto
no es removido del documento. Se aconseja precaución al utilizarlo.
Ejemplo
<p oncut="cambiarColor(this)">Si cortas alguna parte de este texto, el
párrafo cambiará su color de fondo.</p>
<p oncut="cambiarColor(this)" contenteditable>Si cortas alguna parte de
este texto, el párrafo cambiará su color de fondo.</p>
Si cortas alguna parte de este texto, el párrafo cambiará su color de fondo.
Si cortas alguna parte de este texto, el párrafo cambiará su color de fondo.
ONDBLCLICK
El usuario ha presionado y soltado un botón del mouse dos veces (consecutivas y en un corto
poríodo de tiempo), mientras su cursor estaba sobre este elemento.
Ejemplo
<p ondblclick="cambiarColor(this)">Al hacer doble-click sobre este
Al hacer doble-click sobre este párrafo cambiará su color de fondo.
ONDRAG
Este elemento está siendo actualmente arrastrado por el usuario.
Este evento será ejecutado repetidamente durante una operación de arrastre. Los autores deberían estar al
tanto de esta conducta y escribir sus programas en consecuencia, teniendo especial consideración por el
tiempo de ejecución.
El soporte nativo provisto por los navegadores para operaciones de "arrastrar y soltar" es incompleto.
Los autores pueden necesitar recurrir a scripts hasta que el soporte aumente.
Ejemplo
<p draggable="true" ondrag="cambiarColor(this)">Arrastra este párrafo y
su color estará en constante cambio.</p>
Arrastra este párrafo y su color estará en constante cambio.
ONDRAGEND
La operación de arrastre de este elemento ha concluido.
Ejemplo
<p draggable="true" ondragend="cambiarColor(this)">Arrastra este párrafo,
y cuando termines su color de fondo cambiará.</p>
Arrastra este párrafo, y cuando termines su color de fondo cambiará.
ONDRAGENTER
Un elemento está siendo arrastrado y ha ingresado al área ocupada por el elemento que
contiene este evento.
Ejemplo
<p draggable="true">Arrastra este párrafo por sobre el siguiente y su
color de fondo cambiará cuando ingreses a su espacio.</p>
<p ondragenter="cambiarColor(this)">Este párrafo cambiará su color de
fondo si arrastras un elemento sobre él.</p>
Arrastra este párrafo por sobre el siguiente y su color de fondo cambiará cuando ingreses a su espacio.
Este párrafo cambiará su color de fondo si arrastras un elemento sobre él.
ONDRAGEXIT
Un elemento está siendo arrastrado y ha sido movido fuera del área ocupada por el elemento
que contiene este evento.
Este evento tiene la misma funcionalidad que ondragleave y es propenso a volverse obsoleto en

versiones futuras del estándar. Usa el evento ondragleave en su lugar.
ONDRAGLEAVE
Un elemento está siendo arrastrado y ha sido movido fuera del área ocupada por el elemento
que contiene este evento.
Ejemplo
<p draggable="true">Arrastra este parrafo sobre el pŕoximo y su color de
fondo cambiará cuando lo abandones.</p>
<p ondragleave="cambiarColor(this)">Este párrafo cambiará su color de
fondo si arrastras un elemento fuera de él.</p>
Arrastra este parrafo sobre el pŕoximo y su color de fondo cambiará cuando lo abandones.
Este párrafo cambiará su color de fondo si arrastras un elemento fuera de él.
ONDRAGOVER
Un elemento está siendo arrastrado sobre el elemento que contiene este evento.
Este evento será ejecutado repetidamente durante una operación de arrastre. Los autores deberían estar al
tanto de esta conducta y escribir sus programas en consecuencia, teniendo especial consideración por el
tiempo de ejecución.
Ejemplo
<p draggable="true">Arrastra este parrafo sobre el pŕoximo y su color de
fondo cambiará cuando lo muevas sobre él.</p>
<p ondragover="cambiarColor(this)">Este párrafo cambiará su color de
fondo si arrastras un elemento a través de él.</p>
Arrastra este parrafo sobre el pŕoximo y su color de fondo cambiará cuando lo muevas sobre él.
Este párrafo cambiará su color de fondo si arrastras un elemento a través de él.
ONDRAGSTART
Este elemento está comenzando a ser arrastrado (recién se lo ha agarrado).
Ejemplo
<p draggable="true" ondragstart="cambiarColor(this)">Arrastra este
párrafo y su color de fondo cambiará en el momento que comiences.</p>
Arrastra este párrafo y su color de fondo cambiará en el momento que comiences.
ONDROP
Un elemento ha sido soltado en el área ocupada por el elemento que contiene este evento.
El manejo predeterminado por parte de los navegadores para operaciones de "arrastrar y soltar" no
permite que los elementos de HTML sean soltados unos dentro de otros. Los autores que intenten lograr
esta conducta deben prevenir la ejecución de las acciones predeterminadas para este evento y para
"ondragover".
ONDURATIONCHANGE
El atributo duration de este video o audio ha sido actualizado.
ONEMPTIED
Este video o audio ha sido retornado a su estado no inicializado, ya sea porque ha
ocurrido un error fatal durante la carga que está a punto de ser reportado, o porque el método load() ha
sido invocado mientras el algoritmo de selección de recursos ya estaba siendo ejecutado.
ONFORMDATA
El formulario al que pertenece este atributo está procesando los campos antes de ser enviado.
ONENDED
El final de este video o audio ha sido alcanzado.
ONERROR
El navegador ha encontrado errores que le impidieron cargar apropiadamente este recurso de
medios.
ONFOCUS
El elemento ha ganado el enfoque.
Ejemplo
<p>Cuando selecciones este control, el color de fondo de su contenedor
cambiará: <input type="text" onfocus="cambiarColor(this.parentNode)"></p>
Cuando selecciones este control, el color de fondo de su contenedor cambiará:

ONINPUT
El valor de este control de formulario (form) ha sido cambiado.
Este evento es ejecutado inmediatamente después de que el cambio ha ocurrido, en contraste con el
evento "onchange", que espera hasta que elemento pierde el enfoque para revisar si se han aplicado
cambios a su valor.
Ejemplo
<p>Cuando cambies el texto en este control, el color de fondo de su
contenedor cambiará: <input type="text"
oninput="cambiarColor(this.parentNode)"></p>
Cuando cambies el texto en este control, el color de fondo de su contenedor cambiará:

ONINVALID
El usuario ha rellenado este control de formulario (form) con datos que no concuerdan con
sus criterios de validez y luego intentó enviar el formulario.
Además de revisar controles como number o e-mail, que tienen sus propias restricciones acerca de la
información ingresada, los autores pueden especificar los criterios para decidir si un valor es válido o no
mediante el atributo pattern.
ONKEYDOWN
Una tecla ha sido presionada mientras este elemento tenía el enfoque.
Ejemplo
<p>Cuando presiones una tecla mientras editas este control, el color de
fondo de su contenedor cambiará: <input type="text"
onkeydown="cambiarColor(this.parentNode)"></p>
Cuando presiones una tecla mientras editas este control, el color de fondo de su contenedor
cambiará:
ONKEYPRESS
Una tecla asociada con un carácter ha sido presionada mientras este elemento tenía el
enfoque.
En contraste con onkeydown y onkeyup, este evento no será ejecutado por teclas que no están
asociadas a caracteres de entrada (la mayoría imprimibles) como, por
ejemplo, ALT , CTRL , INS y DEL .
Ejemplo
<p>Cuando presiones una tecla de 'carácter' mientras editas este control,
el color de fondo de su contenedor cambiará: <input type="text"
onkeypress="cambiarColor(this.parentNode)"></p>
Cuando presiones una tecla de 'carácter' mientras editas este control, el color de fondo de su contenedor
cambiará:
ONKEYUP
Una tecla ha sido soltada mientras este elemento tenía el enfoque.
Ejemplo
<p>Cuando sueltes una tecla mientras editas este control, el colo de
fondo de su contenedor cambiará: <input type="text"
onkeyup="cambiarColor(this.parentNode)"></p>
Cuando sueltes una tecla mientras editas este control, el colo de fondo de su contenedor
cambiará:
ONLOAD
El navegador ha completado la carga del recurso provisto por este elemento.
ONLOADEDDATA
La información de video o audio de este elemento ha sido cargada lo suficiente como para
permitirle al navegador mortrarla en la posición actual de reproducción por primera vez.
ONLOADEDMETADATA
El navegador ha determinado la duración y dimensiones de este video o audio y las pistas
están listas.
ONLOADSTART
La búsqueda de información de medios de este video o audio ha comenzado.
ONMOUSEDOWN
El usuario ha presionado un botón del mouse, mientras su cursor estaba sobre este elemento.
Ejemplo
<p onmousedown="cambiarColor(this)">Al presionar el botón del mouse sobre
este párrafo su color de fondo cambiará.</p>
Al presionar el botón del mouse sobre este párrafo su color de fondo cambiará.
ONMOUSEENTER
El cursor del mouse ha ingresado a los límites de este elemento.
Este evento será ejecutado solamente cuando el cursor entre al área de este elemento y no cuando entre
al área de cualquiera de sus hijos. Para detectar cuando el puntero ingresa el área de este elemento así
como la de sus hijos, usa el evento onmouseover.
El soporte provisto por los navegadores para este evento es incompleto. Lo autores pueden necesitar
recurrir a scripts para proveer esta funcionalidad hasta que el soporte mejore.
Ejemplo
<p onmouseenter="cambiarColor(this)">Al mover el puntero dentro de este
párrafo su color de fondo cambiará.</p>
Al mover el puntero dentro de este párrafo su color de fondo cambiará.
ONMOUSELEAVE
El cursor del mouse se ha movido fuera de los límites de este elemento.
Este evento será ejecutado solamente cuando el cursor salga del área de este elemento y no cuando salga
del área de cualquiera de sus hijos. Para detectar cuando el puntero abandona el área de este elemento así
como la de sus hijos, usa el evento onmouseout.
El soporte provisto por los navegadores para este evento es incompleto. Lo autores pueden necesitar
recurrir a scripts para proveer esta funcionalidad hasta que el soporte mejore.
Ejemplo
<p onmouseleave="cambiarColor(this)">Al mover el puntero fuera de este
Al mover el puntero fuera de este párrafo su color de fondo cambiará.
ONMOUSEMOVE
El cursor del mouse se está moviendo sobre el elemento.
Este evento se ejecutará repetidamente mientras el puntero se mueva sobre este elemento. Los autores
deberían tener en cuenta esta conducta y escribir sus funciones en consecuencia, teniendo consideración
especial por el tiempo de ejecución.
Ejemplo
<p onmousemove="cambiarColor(this)">Al mover el mouse sobre este párrafo
su color de fondo cambiará constantemente.</p>
Al mover el mouse sobre este párrafo su color de fondo cambiará constantemente.
ONMOUSEOUT
El cursor del mouse se ha movido fuera de los límites de este elemento (o fuera de los de
cualquiera de sus hijos).
Este evento será disparado, no solamente cuando el cursor salga del área de este elemento, sino también
cuando salga del área de cualquiera de sus hijos. Para detectar al puntero saliendo del área de este
elemento únicamente, usa el evento onmouseleave.
Ejemplo
<p onmouseout="cambiarColor(this)">Al mover el mouse fuera de este
párrafo, su color de fondo cambiará.</p>
Al mover el mouse fuera de este párrafo, su color de fondo cambiará.
ONMOUSEOVER
El cursor del mouse ha entrado al área de este elemento (o a la de cualquiera de sus hijos).
Este evento será disparado, no solamente cuando el cursor entre al área de este elemento, sino también
cuando entre al área de cualquiera de sus hijos. Para detectar al puntero entrando al área de este elemento
únicamente, usa el evento onmouseenter.
Ejemplo
<p onmouseover="cambiarColor(this)">Al mover el mouse al área de este
elemento su color de fondo cambiará.</p>
Al mover el mouse al área de este elemento su color de fondo cambiará.
ONMOUSEUP
El usuario ha soltado el botón del mouse mientras su cursor estaba sobre este elemento.
Ejemplo
<p onmouseup="cambiarColor(this)">Al soltar el botón del mouse sobre este
Al soltar el botón del mouse sobre este párrafo su color de fondo cambiará.
ONCUT
El usuario ha pegado información en este elemento.
navegadores puede ser incompleta. Algunos navegadores pueden disparar el evento aún cuando el texto
no es incorporado al documento. Se aconseja precaución al utilizarlo.
Ejemplo
<p oncut="cambiarColor(this)">Si pegas algún texto en este elemento, el
<p oncut="cambiarColor(this)" contenteditable>Si pegas algún texto en
este elemento, el párrafo cambiará su color de fondo.</p>
Si pegas algún texto en este elemento, el párrafo cambiará su color de fondo.
Si pegas algún texto en este elemento, el párrafo cambiará su color de fondo.
ONPAUSE
El flujo de reproducción en este video o audio ha sido pausado.
ONPLAY
El navegador ha iniciado la reproducción de este video o audio.
ONPLAYING
La reproducción de este video o audio está lista para comenzar después de haber sido
pausada o retrasada debido a la falta de información de medios.
ONPROGRESS
El navegador se encuentra recuperando información de medios para este video o audio.
ONRATECHANGE
Uno de los atributos defaultPlaybackRate y playbackRate de
este video o audio ha cambiado.
ONRESET
Este control de formualrio (form) ha sido reiniciado.
La operación de reinicio es comúnmente llevada a cabo cuando el usuario presiona un botón de reinicio,
y hace que todos los controles en el formulario tomen sus valores iniciales.
Ejemplo
<form onreset="cambiarColor(this)">
<input type="text" value="Valor inicial">
<input type="reset" value="Reiniciar este formulario">
</form>
Valor inicial Reiniciar este formulario

ONRESIZE
El tamaño de este elemento ha cambiado.
Este evento puede ser ejecutado repetidamente durante una operación de redimensionamiento. Los
autores deben tener en cuenta esta conducta, ya que un script pesado puede tener un impacto negativo en
el desempeño de la aplicación.
Este evento ha sido recientemente puesto a disposición de todos los elementos de HTML. Se espera que
el soporte provisto por los navegadores sea pobre para todos los elementos excepto body.
Ejemplo
<p onresize="cambiarColor(this)">Al cambiar el tamaño de este párrafo su
color de fondo cambiará.</p>
Al cambiar el tamaño de este párrafo su color de fondo cambiará.
ONSCROLL
Los contenidos de este elemento o documento han sido desplazados.
Este evento puede ser ejecutado repetidamente durante una operación de desplazamiento. Los autores
deben tener en cuenta esta conducta, ya que un script pesado puede tener un impacto negativo en el
desempeño de la aplicación.
Para que este evento se ejecute, el elemento debe estar mostrando su contenido en una ventana
desplazable (comúnmente un iframe con barras de desplazamiento).
Ejemplo
<div onscroll="cambiarColor(this)" style="height: 6em; overflow: auto;">
Primera línea<br>Segunda línea<br>tercera línea<br>Cuarta línea<br>
Quinta línea<br>Sexta línea<br>Séptima línea<br>Octava línea
</div>
Primera línea
Segunda línea
tercera línea
Cuarta línea
Quinta línea
Sexta línea
Séptima línea
Octava línea
ONSEEKED
El valor del atributo seeking ha cambiado a falso, al finalizarse una operación de búsqueda
en este video o audio.
ONSEEKING
El valor del atributo seeking ha cambiado a verdadero, y la operación de búsqueda en
este video o audio está tardando lo suficiente como para que el navegador tenga tiempo de ejecutar el
evento.
ONSELECT
El usuario ha seleccionado una porción de texto en este control de formulario (form).
Ejemplo
<p>Cuando selecciones una porción de texto en este control, el color de
fondo de su contenedor cambiará: <input type="text" value="Texto en este
control" onselect="cambiarColor(this.parentNode)"></p>
Cuando selecciones una porción de texto en este control, el color de fondo de su contenedor
Texto en es
cambiará:
ONSLOTCHANGE
El nodo asignado a este elemento slot ha cambiado.
ONSHOW
El usuario ha requerido que este menu "popup" sea mostrado.
ONSTALLED
A pesar de los esfuerzos del navegador por recuperar información de medios para
este video o audio, no se han recibido datos.
ONSUBMIT
El usuario ha enviado el formulario (form).
La operación de envío de un formulario es comúnmente llevada a cabo cuando el usuario presiona

el botón de envío. Esto prepara al formulario para ser enviado al agente procesador especificado en el
atributo action.
Ejemplo
<form action="../form-result.php" onsubmit="cambiarColor(this, event)"
target="_blank">
<input type="text" name="campo1" value="Valor inicial">
<input type="submit" value="Enviar este formulario">
</form>
Valor inicial Enviar este formulario

ONSUSPEND
La recepción de la información de medios para este video o audio ha sido
intencionalmente suspendida por el navegador aún cuando todavía no se han descargado todos los
contenidos.
ONTIMEUPDATE
La posición de reproducción de este video o audio ha cambiado.
Este evento podría ser ejecutado como parte de la reproducción normal, o bien debido a un salto
ejecutado por el usuario o por el mismo programa.
ONTOGGLE
El estado de este elemento details ha cambiado (su contenido ha sido ocultado o
mostrado).
Este atributo es bastante nuevo y, por lo tanto, se espera que el soporte provisto por los navegadores sea
relativamente pobre.
ONVOLUMECHANGE
El valor de cualquiera de los dos atributos volume y muted de este video o audio ha
cambiado.
ONWAITING
La reproducción de este video o audio has sido pausada debido a que los datos necesarios
para continuarla no se encuentran disponibles aún.
ONWHEEL
El usuario ha rotado el mecanismo de rueda del mouse mientras su cursor estaba sobre este
elemento.
Ejemplo
<p onwheel="cambiarColor(this)">Al rotar la rueda del mouse sobre este
Al rotar la rueda del mouse sobre este párrafo su color de fondo cambiará.
ONLOADEND
El proceso de carga de esta imagen ha sido completado satisfactoriamente.
ONAUTOCOMPLETE
Este control de formulario (form) ha sido rellenado automáticamente por el navegador.
La operación de auto-rellenado es llevada a cabo por los navegadores para incrementar la accesibilidad y
la facilidad de uso, y consiste en el rellenado de los controles con con valores conocidos, tomados de la
información del usuario o entradas previas.
ONAUTOCOMPLETEERROR
La operación de auto-rellenado en este control de formulario (form) ha fallado. Esta falla
puede deberse a que el usuario ha cancelado la operación, a que el control estaba deshabilitado
(mediante el atributo disabled) o a que la información no concordaba con los requerimientos del
control.
ONREADYSTATECHANGED
Este elemento y todos los recursos que contiene han sido completamente cargados.
ONSORT
El ordenamiento de esta tabla (table) ha sido solicitado, pero la acción no ha sido llevada a
cabo aún. La cancelación de este evento prevendría la operación de ordenamiento.
TUTORIALES
 ¿Cómo empezar?
 Etiquetas y atributos HTML
 La estructura del documento
 Estructura del contenido
 Vínculos en HTML
 Organizando un sitio web
 Tablas en HTML
 Formularios básicos en HTML
 Hojas de estilo en cascada (CSS)
REFERENCIA
 Elementos de HTML
 Codificación de caracteres
 Referencia de caracteres
 Eventos globales
 Atributos globales
 Códigos de color
 Etiquetas de lenguaje
 Tipos de medios de Internet
 URIs y URLs
MÁS
 Contáctame
 Más allá de HTML
 Herramientas y recursos
 Acerca de mí
AYÚDAME
 Informa errores
 Dona

HTML Elemento INPUT Search (Busqueda de Datos)

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML Elemento INPUT Search (Busqueda de Datos)

Cargado por

Copyright:

Formatos disponibles

LEMENTO INPUT

Los autores no deberían confiar en los atributos minlength y maxlength. Los usuarios

<form action="../../form-result.php" method="post" target="_blank">

<form action="../../form-result.php" method="post" target="_blank">

El soporte provisto por los navegadores para el atributo required es incompleto. Los

<form action="../../form-result.php" method="post" target="_blank">

Siendo relativamente nuevo, el soporte provisto por los navegadores para el

Los autores no deberían confiar en el atributo maxlength. Los usuarios podrían enviar la

Los autores no deberían confiar en el atributo minlength. Los usuarios podrían enviar la

El soporte provisto por los navegadores para el atributo minlength es extremadamente

Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos

Si un control con el atributo required presente es dejado en blanco, los navegadores que

El soporte provisto por los navegadores para el atributo required es incompleto. Los

Los valores "on" y "off" nunca aplican a elementos input cuyos atributos type poseen el

Una lista de identificadores de detalles de autocompletado puede estar compuesta

Usualmente, los navegadores llevan a cabo las operaciones de autocompletado recuperando

El atributo enterkeyhint ha sido introducido recientemente al estándar y se espera que

Los identificadores deben tener al menos un carácter de largo y no presentar caracteres de

Este atributo debería estar presente únicamente si los

Este atributo es parte de la sintaxis de microdatos, un mecanismo de HTML5 para proveer

Este atributo es parte de la sintaxis de microdatos, un mecanismo de HTML5 para proveer

Este atributo es parte de la sintaxis de microdatos, un mecanismo de HTML5 para proveer

La mayoría de los vocabularios globales pueden encontrarse en el sitio Schema.org. Debido

Es muy importante definir el atributo lang siempre que el texto sea presentado en un

El atributo slot es parte de la especificación de shadow DOM y está pensado para ser

El atributo spellcheck está pensado para actuar en campos de texto y elementos con el

Este es un párrafo con un estilo definido.

Además de decidir la posición del elemento en la navegación por tabulación, el

Algunos elementos, como link, abbr, e input, definen semánticas adicionales para el

El soporte provisto por los navegadores para el atributo translate es incompleto. Los

LISTA DE EVENTOS GLOBALES

Cuando deselecciones este control, el color de su contenedor cambiará:

Este evento tiene la misma funcionalidad que ondragleave y es propenso a volverse obsoleto en

Cuando selecciones este control, el color de fondo de su contenedor cambiará:

Cuando cambies el texto en este control, el color de fondo de su contenedor cambiará:

La operación de envío de un formulario es comúnmente llevada a cabo cuando el usuario presiona

También podría gustarte