TODOS los Elementos 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 elemento <input>

El elemento <input> es el más importante y según el type puede ser visualizado de diferentes maneras

See the Pen HTML | 2.2 - Elementos de formularios - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

El elemento <select>

El elemento <select> define una lista seleccionable.

See the Pen HTML | 2.2 - Elementos de formularios - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

El elemento <option> define los elementos dentro del <select>

Por defecto se selecciona la primera opción, podemos usar el atributo selected para cambiar eso.

See the Pen HTML | 2.2 - Elementos de formularios - 3 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

El atributo size especifica el número de opciones visibles.

See the Pen HTML | 2.2 - Elementos de formularios - 4 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

El atributo múltiple nos permite seleccionar más de una opción

See the Pen HTML | 2.2 - Elementos de formularios - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

El elemento <textarea>

Con el <textarea> tenemos un campo en el que podemos escribir varias líneas de texto.

El atributo rows especifica el número visible de líneas en un área de texto.

El atributo cols especifica el ancho visible de un área de texto.

También se puede usar el width y el height de CSS para definir el tamaño del textarea

See the Pen HTML | 2.2 - Elementos de formularios - textarea by Francisco Palomares Barrios (@kikopalomares) on CodePen.

El elemento <button>

El elemento <button> define un botón clicable.

Es importante definir siempre el type, porque es posible que los navegadores tengan comportamientos diferentes

See the Pen HTML | 2.2 - Elementos de formularios - button by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Elementos de formularios de HTML5

HTML5 añade dos nuevos elementos a los formularios:

  • <datalist>
  • <output>

Si el navegador no soporta HTML5 y no reconoce los elementos no va a “romper” la web, simplemente no los muestra

El elemento <datalist>

El elemento <datalist> especifica una lista predefinida para un elemento <input>

See the Pen HTML | 2.2 - Elementos de formularios - datalist by Francisco Palomares Barrios (@kikopalomares) on CodePen.

El elemento <output>

El elemento <output> especifica el resultado de un cálculo

See the Pen HTML | 2.2 - Elementos de formularios - output 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