Tutorial HTML

INICIO HTML Introducción HTML Editores HTML HTML básico Elementos HTML Atributos HTML Encabezados HTML Párrafos HTML Estilos HTML Formato HTML Cotizaciones HTML Comentarios HTML Colores HTML CSS HTML Enlaces HTML Imágenes HTML icono de favoritos HTML Tablas HTML Listas HTML Bloque HTML y en línea Clases HTML Identificación HTML Marcos flotantes HTML HTML JavaScript Rutas de archivo HTML Encabezado HTML Diseño HTML Responsivo HTML Código informático HTML Semántica HTML Guía de estilo HTML Entidades HTML Símbolos HTML Emoticonos HTML Juego de caracteres HTML Codificación de URL HTML HTML frente a XHTML

Formularios HTML

Formularios HTML Atributos de formulario HTML Elementos de formulario HTML Tipos de entrada HTML Atributos de entrada HTML Atributos de formulario de entrada HTML

Gráficos HTML

Lienzo HTML HTML SVG

Medios HTML

Medios HTML Vídeo HTML Audio HTML Complementos HTML HTML de YouTube

API de HTML

Geolocalización HTML Arrastrar/soltar HTML Almacenamiento web HTML Trabajadores web HTML SSE HTML

Ejemplos HTML

Ejemplos HTML Cuestionario HTML Ejercicios HTML Certificado HTML Resumen HTML Accesibilidad HTML

Referencias HTML

Lista de etiquetas HTML Atributos HTML Atributos globales HTML Compatibilidad con navegador HTML Eventos HTML Colores HTML Lienzo HTML Audio/vídeo HTML Tipos de documentos HTML Conjuntos de caracteres HTML Codificación de URL HTML Códigos de idioma HTML Mensajes HTTP Métodos HTTP Convertidor PX a EM Atajos de teclado

Atributos de entrada HTML


Este capítulo describe los diferentes atributos para el <input>elemento HTML.


El atributo de valor

El valueatributo de entrada especifica un valor inicial para un campo de entrada:

Ejemplo

Campos de entrada con valores iniciales (predeterminados):

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

El atributo de solo lectura

El readonlyatributo de entrada especifica que un campo de entrada es de solo lectura.

Un campo de entrada de solo lectura no se puede modificar (sin embargo, un usuario puede tabular, resaltarlo y copiar el texto).

¡El valor de un campo de entrada de solo lectura se enviará al enviar el formulario!

Ejemplo

Un campo de entrada de solo lectura:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

El atributo deshabilitado

El disabledatributo de entrada especifica que un campo de entrada debe estar deshabilitado.

Un campo de entrada deshabilitado es inutilizable y no se puede hacer clic.

¡El valor de un campo de entrada deshabilitado no se enviará al enviar el formulario!

Ejemplo

Un campo de entrada deshabilitado:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>


El atributo de tamaño

El sizeatributo de entrada especifica el ancho visible, en caracteres, de un campo de entrada.

El valor predeterminado para sizees 20.

Nota: el sizeatributo funciona con los siguientes tipos de entrada: texto, búsqueda, teléfono, URL, correo electrónico y contraseña.

Ejemplo

Establecer un ancho para un campo de entrada:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

El atributo maxlength

El maxlengthatributo de entrada especifica el número máximo de caracteres permitidos en un campo de entrada.

Nota: Cuando maxlengthse establece a, el campo de entrada no aceptará más que el número de caracteres especificado. Sin embargo, este atributo no proporciona ningún comentario. Entonces, si desea alertar al usuario, debe escribir código JavaScript.

Ejemplo

Establezca una longitud máxima para un campo de entrada:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

Los atributos min y max

La entrada miny los maxatributos especifican los valores mínimo y máximo para un campo de entrada.

Los atributos miny maxfuncionan con los siguientes tipos de entrada: número, rango, fecha, fecha y hora local, mes, hora y semana.

Sugerencia: use los atributos max y min juntos para crear un rango de valores legales.

Ejemplo

Establezca una fecha máxima, una fecha mínima y un rango de valores legales:

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

El atributo múltiple

El multipleatributo de entrada especifica que el usuario puede ingresar más de un valor en un campo de entrada.

El multipleatributo funciona con los siguientes tipos de entrada: correo electrónico y archivo.

Ejemplo

Un campo de carga de archivos que acepta múltiples valores:

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

El atributo del patrón

El patternatributo de entrada especifica una expresión regular con la que se comprueba el valor del campo de entrada cuando se envía el formulario.

El patternatributo funciona con los siguientes tipos de entrada: texto, fecha, búsqueda, URL, teléfono, correo electrónico y contraseña.

Sugerencia: use el atributo de título global para describir el patrón para ayudar al usuario.

Sugerencia: obtenga más información sobre las expresiones regulares en nuestro tutorial de JavaScript.

Ejemplo

Un campo de entrada que puede contener solo tres letras (sin números ni caracteres especiales):

<form>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

El atributo de marcador de posición

El placeholderatributo de entrada especifica una sugerencia breve que describe el valor esperado de un campo de entrada (un valor de muestra o una descripción breve del formato esperado).

La sugerencia breve se muestra en el campo de entrada antes de que el usuario ingrese un valor.

El placeholderatributo funciona con los siguientes tipos de entrada: texto, búsqueda, URL, teléfono, correo electrónico y contraseña.

Ejemplo

Un campo de entrada con un texto de marcador de posición:

<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

El atributo requerido

El requiredatributo de entrada especifica que se debe completar un campo de entrada antes de enviar el formulario.

El requiredatributo funciona con los siguientes tipos de entrada: texto, búsqueda, URL, teléfono, correo electrónico, contraseña, selectores de fecha, número, casilla de verificación, radio y archivo.

Ejemplo

Un campo de entrada obligatorio:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

El atributo de paso

El stepatributo de entrada especifica los intervalos de números legales para un campo de entrada.

Ejemplo: si paso = "3", los números legales podrían ser -3, 0, 3, 6, etc.

Sugerencia: este atributo se puede usar junto con los atributos máximo y mínimo para crear un rango de valores legales.

El stepatributo funciona con los siguientes tipos de entrada: número, rango, fecha, fecha y hora local, mes, hora y semana.

Ejemplo

Un campo de entrada con intervalos de números legales especificados:

<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>

Nota: las restricciones de entrada no son infalibles y JavaScript proporciona muchas formas de agregar entradas ilegales. ¡Para restringir la entrada de forma segura, también debe ser verificada por el receptor (el servidor)!


El atributo de enfoque automático

El autofocusatributo de entrada especifica que un campo de entrada debe enfocarse automáticamente cuando se carga la página.

Ejemplo

Deje que el campo de entrada "Nombre" se enfoque automáticamente cuando se cargue la página:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Los atributos de alto y ancho

La entrada heighty los widthatributos especifican la altura y el ancho de un <input type="image">elemento.

Sugerencia: especifique siempre los atributos de alto y ancho de las imágenes. Si se establecen alto y ancho, el espacio requerido para la imagen se reserva cuando se carga la página. Sin estos atributos, el navegador no conoce el tamaño de la imagen y no puede reservarle el espacio adecuado. El efecto será que el diseño de la página cambiará durante la carga (mientras se cargan las imágenes).

Ejemplo

Defina una imagen como el botón de envío, con atributos de alto y ancho:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

El atributo de la lista

El listatributo de entrada hace referencia a un <datalist>elemento que contiene opciones predefinidas para un elemento <input>.

Ejemplo

Un elemento <input> con valores predefinidos en un <datalist>:

<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

El atributo de autocompletar

El autocompleteatributo de entrada especifica si un formulario o un campo de entrada debe tener activado o desactivado el autocompletado.

Autocompletar permite que el navegador prediga el valor. Cuando un usuario comienza a escribir en un campo, el navegador debe mostrar opciones para completar el campo, en función de los valores escritos anteriormente.

El autocompleteatributo funciona con <form>los siguientes <input>tipos: texto, búsqueda, URL, teléfono, correo electrónico, contraseña, selectores de fecha, rango y color.

Ejemplo

Un formulario HTML con autocompletado activado y desactivado para un campo de entrada:

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

Sugerencia: en algunos navegadores, es posible que deba activar una función de autocompletar para que esto funcione (busque en "Preferencias" en el menú del navegador).


Ejercicios HTML

Ponte a prueba con ejercicios

Ejercicio:

En el campo de entrada a continuación, agregue un marcador de posición que diga "Su nombre aquí".

<formulario acción="/página_acción.php">
<tipo de entrada="texto">
</formulario>


Formulario HTML y elementos de entrada

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control

Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .