TODOS los Atributos de INPUT de FORMULARIOS en HTML

El atributo value

Sirve para especificar un valor inicial para el input

See the Pen HTML | 2.4 - Atributos de inputs - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo readonly

Sirve para especificar que un input no se puede cambiar

See the Pen HTML | 2.4 - Atributos de inputs - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo disabled

El input queda deshabilitado, no se puede clicar, y el valor no se envía cuando se envía el formulario.

See the Pen HTML | 2.4 - Atributos de inputs - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo size

Especifica cómo de ancho tiene que ser el input, en número de caracteres.

See the Pen HTML | 2.4 - Atributos de inputs - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo maxlength

Establece el máximo número de caracteres en el input

See the Pen HTML | 2.4 - Atributos de inputs - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Los atributos de HTML5

HTML5 incluyó algunos nuevos atributos para los input:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

También incluyo estos para el <form>

  • autocomplete
  • novalidate

El atributo autocomplete

Define si el formulario o el input debería de tener autocompletado o no por parte del navegador. Los valores son “on” o “off”.

See the Pen HTML | 2.4 - Atributos de inputs - 6 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo novalidate

Este atributo es para el <form> y especifica que los datos no tienen que validarse en el envío.

See the Pen HTML | 2.4 - Atributos de inputs - 7 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo autofocus

Este atributo especifica que automáticamente ese input tenga el foco cuando carga la página.

See the Pen HTML | 2.4 - Atributos de inputs - 8 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo form

Indica que un input pertenece a un formulario, este input puede estar fuera del elemento <form>.

See the Pen HTML | 2.4 - Atributos de inputs - 9 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo formaction

Especifica la URL que procesa el formulario cuando sea enviado, es decir, se sobreescribe el action del <form>.

Se usa en los input de tipo submit e image.

See the Pen HTML | 2.4 - Atributos de inputs - 10 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo formenctype

Especifica la codificación de los datos cuando se envían (solo con POST). Sobreescribe el enctype del <form>. Y se usa en los input de type submit e image.

See the Pen HTML | 2.4 - Atributos de inputs - 11 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo formmethod

Define el método HTTP a usar cuando se envían los datos. Sobreescribe el method del <form>. Y se usa en los input de tipo submit e imagen.

See the Pen HTML | 2.4 - Atributos de inputs - 12 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo formnovalidate

Sobreescribe el atributo novalidate del form.

See the Pen HTML | 2.4 - Atributos de inputs - 13 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo formtarget

Sobreescribe el atributo target del form.

See the Pen HTML | 2.4 - Atributos de inputs - 14 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Los atributos width y height

Estos dos atributos sirve para especificar el ancho y alto de un input de tipo image.

See the Pen HTML | 2.4 - Atributos de inputs - 15 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo list

Hace referencia a un <datalist> que contiene una lista predefinida con opciones para ese input.

See the Pen HTML | 2.4 - Atributos de inputs - 16 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

Los atributos min y max

Establecen el mínimo y máximo valor que puede tomar el input. Funciona con los tipos: number, range, date, datetime-local, month, time y week.

See the Pen HTML | 2.4 - Atributos de inputs - 17 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo multiple

Permite al usuario introducir más de un valor en el input. Los tipos con los que funciona son: email y file.

See the Pen HTML | 2.4 - Atributos de inputs - 18 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo pattern

Define una expresión regular que se usará para validar el input. Funciona con los tipos: text, search, url, tel, email y password.

See the Pen HTML | 2.4 - Atributos de inputs - 19 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo placeholder

Especifica un texto en el input que se ve antes de rellenarlo. Funciona con los tipos text, search, url, tel, email y password.

See the Pen HTML | 2.4 - Atributos de inputs - 20 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo required

Determina si el input debe ser rellenado antes de enviar los datos del formulario. Funciona con los tipos: text, search, url, tel, email, password, date pickers, number, checkbox, radio y file.

See the Pen HTML | 2.4 - Atributos de inputs - 21 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

 

El atributo step

Especifica el intervalo entre los que cambian los números de un input. Funciona con los tipos: number,range, date, datetime-local, month, time y week.

See the Pen HTML | 2.4 - Atributos de inputs - 22 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

¿Quieres más?

Si estás interesado en el mundo de la programación y el desarrollo web, te recomiendo que te suscribas a mi canal de youtube donde tienes mucho más contenido gratuito

IR AL CANAL

¿Quieres convertirte en desarrollador web? [GRATIS]

Déjame aquí tu mejor email y te mandaré un curso para que puedas empezar en el desarrollo web totalmente GRATIS!

¡Prometo no enviarte SPAM! Sólo cosas relevantes que te interesen.