⭐ TODOS los Atributos de INPUT de FORMULARIOS en HTML

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

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.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats